По вашему запросу ничего не найдено :(
Убедитесь, что запрос написан правильно, или посмотрите другие
наши статьи:
Мессенджеры с каждым днем все больше и больше интегрируются в нашу жизнь. Это невольно наводит на мысль о «бесшовной» интеграции мгновенных сообщений и бизнес инструментов. Размышляя на этот счет, под наш исследовательский порыв попал популярный в России мессенджер Telegram и CRM Битрикс24.
Нам захотелось присылать информацию о созданном лиде в Битриксе в групповой чат Telegram. Мы написали небольшой скрипт на .php и адаптировали его на Linux – машине. Что из этого получилось, спешим рассказать :)
Попробовать Битрикс24
Бот в Телеграме
Итак, первым делом создаем бота в Телеграме. В нашей базе уже есть пошаговый материал по созданию бота, поэтому, нажмите на кнопку ниже и пройдите по ссылке. Выполните все шаги, которые указаны в пункте «Создание бота в Telegram» - это займет примерно 5 минут. Как сделаете, переходим к следующему пункту.
Создание бота
Скрипт обработки
Все ли получилось на этапе ранее? У вас должен быть токен вида 331754110:AAHkMNalOz5I_Schh2kvj7ONhRcE8HuKV-c и ID (идентификатор) группового чата. Если все на месте, то вашему вниманию предлагается сам скрипт (комментарии по ходу скрипта после двойного слеша //):
<?php
$token = "Ваш_токен"; // тут вводим ваш токен;
$chat_id = "ID_чата"; // указываем идентификатор группового чата
$lead_name=$_GET['name']; //получает методом GET название лида, ответственного, источник и его идентификатор;
$lead_respons=$_GET['respons'];
$lead_source=$_GET['source'];
$lead_link=$_GET['link'];
$lead_link1 = "https://ваш_домен_битрикс.bitrix24.ru/crm/lead/show/$lead_link/"; // данную конструкцию мы используем для того, чтобы корректно сформировать и отправить ссылку на лида в Telegram;
#Оправляем в телеграм
$hello = "<b>Здравствуйте, коллеги!</b>"; // формируем элементы массива (сообщения), который будем отправлять в сторону Telegram – API;
$hello_1 = "";
$message = "В CRM Битрикс24 добавлен новый лид - ";
$repons = "Ответственный - ";
$src= "Источник - ";
$link = "Ссылка - ";
$arr = array( // формируем сам массив;
$hello => $hello_1,
$message => $lead_name,
$repons => $lead_respons,
$src => $lead_source,
$link => $lead_link1,
);
foreach($arr as $key => $value) {
if ($key == "Ссылка - ") { $txt .= "".$key." ".$value."%0A";} else {
$txt .= "".$key." ".$value."%0A";
}};
fopen("https://api.telegram.org/bot{$token}/sendMessage?chat_id={$chat_id}&parse_mode=html&text={$txt}","r"); // отправляем данные в сторону API Телеграма;
Скачать скрипт
После загрузки скрипта по ссылке, смените его расширение на .php
Подставляем свои данные, сохраняем скрипт как bitrixtelegram.php и закидываем его в WEB - директорию вашего сервера (сервера в вашей сети). На нашем сервере мы используем web – сервер Apache на базе CentOS – наша директория /var/www/html/.
Важно! Скрипт должен быть доступен по web из внешней сети (Битрикс24 будет обращаться к нему из бизнес – процесса). Мы рекомендуем использовать https, засекьюрить директорию, внутри которой будет находиться скрипт (например, дать ей имя v2I7TD9w3zo9QR7vg6ApNwDVvJOj9XbO61OJKdIyxI6d0. Тем самым, полный путь до директории будет /var/www/html/v2I7TD9w3zo9QR7vg6ApNwDVvJOj9XbO61OJKdIyxI6d0). Помимо этого, рекомендуем ограничить подключение к этой директории фильтрацией по IP (на уровне web – сервера и фаервола/маршрутизатора на уровне L3).
После этого, в консоли сервера, в случае Linux, даем команды (путь к файлу скрипта у вас может отличаться):
chmod 755 /var/www/html/v2I7TD9w3zo9QR7vg6ApNwDVvJOj9XbO61OJKdIyxI6d0/bitrixtelegram.php
dos2unix /var/www/html/v2I7TD9w3zo9QR7vg6ApNwDVvJOj9XbO61OJKdIyxI6d0/bitrixtelegram.php
Адаптация в бизнес – процесс в Битрикс24
Да – да, мы будем использовать вебхуки (Webhook). Это отличное средство, которое позволяет внедрять кастомные сценарии в обработку любой сущности в рамках Битрикс24. По факту, Битрикс просто будет кидать GET - запрос.
Переходим к настройке. Открываем CRM → Настройки → Автоматизация → Бизнес - процессы → Лид → Добавить шаблон:
Даем имя шаблону и указываем параметры запуска – «При добавлении». Внутри самого бизнес процесса, из правой палитры инструментов перетаскиваем элемент Webhook:
В настройка вебхука, в поле в хендлер копируем следующую конструкцию:
https://telegram.merionet.ru/ v2I7TD9w3zo9QR7vg6ApNwDVvJOj9XbO61OJKdIyxI6d0/ bitrixtelegram.php?name={=Document:TITLE}&respons={=Document:ASSIGNED_BY_PRINTABLE}&source={=Document:SOURCE_ID}&link={=Document:ID}
Где:
https://telegram.merionet.ru - хостовая часть, на которой расположился наш скрипт;
v2I7TD9w3zo9QR7vg6ApNwDVvJOj9XbO61OJKdIyxI6d0 - директория в корне web – сервера, в которой лежит скрипт;
bitrixtelegram.php - сам скрипт;
?name={=Document:TITLE}&respons={=Document:ASSIGNED_BY_PRINTABLE}&source={=Document:SOURCE_ID}&link={=Document:ID} - параметры, которые мы будем передавать в скрипт, а именно – имя лида, источник, ответственный и ID - лида;
Проверяем :) Вручную добавляем лид в CRM:
И вот что ждет нас в Telegram:
Решение Cisco Unified Contact Center Enterprise предназначено для крупных контактных центров, которые имею географически распределенные площадки и большое количество персонала, работающего в рамках центра.
Выделим следующие основные преимущества UCCE:
Интеллектуальная маршрутизация с универсальными очередями;
Computer Telephony Integration (CTI) в рамках модели сеть – рабочее место;
Возможность обрабатывать различные канала взаимодействия (звонки, чаты, e-mail, web – обращения, sms и так далее.);
Голосовое меню IVR;
«Умный» алгоритм очередей;
Интеграция со устаревшими моделями телефонных станций;
Единая платформа отчетности.
Рассмотрим архитектуру решения UCCE:
Компонент Intelligent Contact Manager (ICM) это элемент, ответственный за принятие решений о маршрутизации вызова, отчетности и CTI интеграции. Параллельно, с развертыванием ICM компоненты, устанавливается множество других важных узлов, таких как:
Контроллер: делится на две компоненты:
Router («роутер») - выполняет функции направления и контроля почти всех событий происходящих в рамках ICM. С точки зрения маршрутизации, роутер ответственен за обработку входящих запросов на маршрутизацию и отвечает на исходящие события. Запрос на маршрутизацию может приходить из сети провайдера или других периферийных устройств (ACD, IVR IP PBX и так далее);
Logger («логгер») - так же называется сервер базы данных. Главная функция логгера это быть базой данных для ICM компонента. В предыдущих версиях ICM, логгер содержал только информацию об ICM. Текущие актуальные версии логгера выполняют копии конфигурации ICM и другие административные задачи, такие как уведомления в случае ошибок. Логгер частично содержит историческую отчетность, которая, в большинстве своем, передается на Administration & Data Server (сервер администрирования и информации), на котором хранится историческая отчетность и отчетность типа Real – time (реального времени);
Network Interface Controller (NIC) - интерфейс взаимодействия с провайдером. Не все ICM системы напрямую подключаются к провайдеру услуг. Так же ICM может быть развернут без NIC. В рамках разворачиваемой архитектуры, NIC может быть развернут как сторонним сервере, так и на одном сервере с компонентом Router;
Administration & Data Server - интерфейс пользователя для взаимодействия с конфигурацией и отчетностью;
Периферийный шлюз (Peripheral gateway, PG) - термин «переферийный» используется для обозначения того, что любое внешнее устройство может быть подключено к ICM через PG. Внешними устройствами, или как принято говорить «периферийными», могут быть устаревшие типы ACD, IVR – системы, Cisco Unified Communications Manager, Cisco Unified CVP [7] (Customer Voice Portal) и многие другие. Периферийный шлюз это интерфейс между контроллером и периферией.
Взгляните на архитектуру контактного центра Unified Contact Center Enterprise:
В итоге получаем, что сочетание ICM, CUCM и IVR, и есть Unified Contact Center Enterprise.
Рассмотрим требования Unified CCE к программному обеспечению:
Microsoft Windows Server 2003 SP2 или Microsoft Windows Server 2003 R2 SP2 (стандартный или корпоративный). Данные системы необходимы для таких компонент, как Router, Administration & Data Server, Logger, PG и CTI сервер;
SQl Server 2005;
Только 32-х битная архитектура;
Microsoft SQL Server 2005 SP3 (стандартный или корпоративный). Необходим для таких компонент как Logger и Administration & Data Server;
Требования к аппаратной платформе ниже:
MCS сервера;
Виртуализация возможна только для некоторых компонент;
Многоядерный процессор;
Полнодуплексные сетевые интерфейсы.
Лицензирование
Лицензирование UCCE происходит по двум принципам. Первый, это покупка обязательных лицензий для компонентов и агентов. Вторая часть, это покупка дополнительных лицензий, таких как интеграция со сторонними IVR системами и лицензии на сложные модели развертывания.
К любой системе Unified CCE необходимо приобрести одну (или несколько) категорий лицензий для конкретных клиентских каналов взаимодействия центра, такие как:
Голосовые взаимодействия: Лицензия на развертывание компонент Router/Logger, PG, отказоустойчивые компоненты IVR PG, AWDB, HDS, NIC и так далее;
Взаимодействие по каналу e-mail: Лицензия на развертывание обязательных компонент для обработки e-mail транзакций, таких как Services Server, Application Server, Database Server и так далее;
Взаимодействие по каналу WEB: Для общения с клиентом через WEB формы на сайте компании, необходимо приобрести соответствующие лицензии на компоненты, указанные выше. Лицензия включает встраиваемые шаблоны HTML для взаимодействия по каналу WEB, коннекторы в базы данных и так далее;
Существует 4 возможных схемы лицензирования агентов для обработки голосовых транзакций:
Стандартная лицензия - включает в себя Cisco Agent Desktop (CAD) или Cisco Supervisor Desktop. Приложение CAD является тонким клиентом, где агент может работать с входящим и исходящими вызовами;
Расширенная лицензия - включает в себя Enhanced Cisco Agent Desktop или Enhanced Cisco Supervisor Desktop. Расширение представляет из себя возможность «кастомизации» агентского интерфейса;
Премиум лицензия - в рамках данной лицензии предоставляется возможность выбора одного из агентских рабочих мест, а именно:
Cisco Finesse Agent Desktop - представляет из себя WEB – интерфейс, в котором агент может производить обработку различных событий. Обладает широчайшими возможностями «кастомизации»;
Cisco Toolkit Desktop (CTI OS) - разновидность агентского рабочего места. Представляет широкий набор возможностей обработки вызова, таких как набор номера, ответ, отбой, удержание, подключение, помощь супервизора и так далее;
Premium CAD и Supervisor Desktop - максимальный функциональный набор;
CRM Agent Licenses - включает в себя Cisco Unified CRM Connector для Siebel CRM.
Основой любого сайта является HTML. Это первое, что видят люди. Без него сайта бы не существовало.
Поэтому так важно придерживаться правильных методов написания кода. Если этого не делать, то посетители вашего сайта получат плохой пользовательский опыт.
В HTML всегда есть, чему поучиться. Причем не важно, новичок вы в программировании или опытный специалист.
В данной статье мы поговорим о лучших практиках HTML. Давайте начнем.
Лучшие практики HTML – это набор правил, помогающих создавать сайты, одинаково удобные для чтения и сопровождения.
При создании сайта на HTML необходимо придерживаться следующих принципов:
Используйте только один элемент <h1> для страницы
В HTML доступно 6 различных тегов заголовков – от <h1> до <h6>. Тегом <h1> отмечается основной заголовок (название веб-страницы), а тег <h6> используется для наименее важного заголовка.
Тег <h1> крупнее <h2>, <h2> крупнее <h3> и так до тега <h6>. Размер каждого заголовка уменьшается по степени его важности.
Очень важно не добавлять более одного элемента <h1> на странице.
Не делайте так:
<main>
<div>
<h1>Писать код – это весело?</h1>
<p>Чем больше вы пишете, тем опытнее становитесь</p>
</div>
<div>
<h1>Писать код – это весело</h1>
<p>Лучше писать код с удовольствием</p>
</div>
</main>
В примере выше мы используем тег <h1> в первом и втором блоке <div>. Такой код, конечно же, заработает, но это не самый правильный вариант оформления.
Лучше вот так:
<main>
<div>
<h1>Писать код – это весело?</h1>
<p>Чем больше вы пишете, тем опытнее становитесь</p>
</div>
<div>
<h2>Писать код – это весело</h2>
<p>Лучше писать код с удовольствием</p>
</div>
</main>
Кроме того, наличие одного элемента <h1> на странице – крайне важно для поисковой оптимизации (SEO). Через этот тег поисковики понимают, что находится на странице (главная мысль страницы).
Не забывайте про иерархию заголовков в HTML
Когда вы пользуетесь тегами заголовков, важно следовать установленной иерархии: после <h1> идет <h2>, за <h3> следует <h4> и т.д...
Не перескакивайте от <h1> к <h3>. Некоторые посетители сайта используют средства чтения с экрана. И таким пользователям бывает трудно понять содержимое вашей страницы при нарушенной иерархии элементов.
Средства чтения с экрана – это одна из специальных возможностей, помогающая людям получать доступ к цифровому содержимому (сайтам или приложениям) и взаимодействовать с ним через звуки и касания. Основные пользователи данной технологии – слабовидящие или незрячие люди.
Не делайте так:
<h1>Писать код – это весело</h1>
<h3>Лучше писать код с удовольствием</h3>
<h5>Постоянство – это ключ</h5>
Лучше вот так:
<h1>Писать код – это весело?</h1>
<h2>Чем больше вы пишете, тем опытнее становитесь</h2>
<h3>Писать код – это весело</h3>
Добавляйте подписи к изображениям через элемент figure
Добавлять подписи к изображениям рекомендуется через элемент <figure>. А чтобы все заработало, нужно прописать не только <figure>, но и <figcaption>.
Не делайте так:
<div>
<img src=“a-man-coding.jpg” alt=“Мужчина за компьютером”>
<p>Это изображение мужчины, который работает за компьютером</p>
</div>
С точки зрения кода, пример выше написан хорошо. Но лучше сделать все иначе. Если изображение не загрузилось, отображается содержимое alt, и на экране показывается текст из элемента <p>. Но посетитель, использующий средства чтения с экрана, не сможет отличить тексты в <p> и alt.
Помните: даже если ваш код работает, это еще не значит, что вы делаете все правильно.
Лучше сделать вот так:
<figure>
<img src=“a-man-coding.jpg” alt=“ Мужчина за компьютером”>
<figcaption>Это изображение мужчины, который работает за компьютером</figcaption>
</figure>
Пример выше – отличный способ, как можно добавить подписи к изображениям.
Почему важно добавлять подписи к изображениям именно так:
Поисковая оптимизация. Ваши изображения легче найти в поисковых системах.
Посетителям, использующим средства чтения с экрана, проще понять содержимое вашей страницы.
Не используйте div для шапки и подвала; для этого подходят семантические элементы
Семантические элементы HTML используются для логической разметки структуры документа на странице. Кроме того, они нужны для правильной сборки страницы.
Откажитесь от <div> в пользу семантики. Не используйте <div> для обозначения шапки и подвала страницы. Для этих целей есть семантические элементы <header> и <footer>.
Элемент <header> показывает навигацию или вводную часть страницы.
В элементе <footer> размещается информация об авторских правах или ссылки для перехода на страницы.
Не делайте так:
<div class="header">
<a href="index.html">Главная</a>
<a href="#">О нас</a>
<a href="#">Контакты</a>
</div>
<div class="footer">
<a href="index.html">Главная</a>
<a href="#">О нас</a>
<a href="#">Контакты</a>
</div>
В примере выше тег <div> используется в качестве контейнера для <header> и <footer>. Такой код будет работать, но это не самый правильный способ реализации.
Лучше вот так:
<header>
<h1></h1>
</header>
<footer>
<a href="index.html">Главная</a>
<a href="#">О нас</a>
<a href="#">Контакты</a>
</footer>
Лучше всего добавлять <footer> и <header> на страницу именно так.
Почему важно добавлять <footer> и <header> с помощью семантических элементов HTML:
Использование семантических элементов для шапки и подвалаупрощает чтение кода.
Такой способ предлагает более качественный пользовательский опыт. Посетителям, использующим средства чтения с экрана, будет проще понять содержимое страницы.
Не используйте <b> и <i> для выделения текста на странице
Теги <b> и <i> выделяют текст жирным шрифтом (b) или курсивом (i). Но не стоит ими пользоваться на сайте, поскольку оба тега не несут семантической нагрузки. Для выделения текста лучше подходит свойство CSS font-weight, либо теги <strong> и <em>.
Тегом <strong> отмечают важный текст на странице. Он выделяет текст или делает его жирным. Тег <em> подчеркивает текст или добавляет курсив (точно также, как <i>).
Не делайте так:
<p><i>Пишите код в своем собственном темпе</i><p>
<p><b>пишите код в своем собственном темпе </b><p>
В этом примере текст выделяется жирным и курсивом. Но пользователи со средствами для чтения с экрана не заметят разницы. Данные теги не несут семантического значения.
Спецификация HTML 5 рекомендует нам использовать теги <b> и <i> только в самых крайних случаях и при отсутствие альтернативных вариантов.
Лучше делайте так:
<p><strong>Пишите код в своем собственном темпе</strong><p>
<p><em>пишите код в своем собственном темпе</em><p>
Не используйте блочные элементы внутри строчных
Блочные элементы начинают новую строку на странице. По умолчанию действие этих элементов распространяется на всю строку – от ее начала до конца. Вы не сможете добавить строчные элементы внутри блочных без CSS.
К блочным элементам относятся <p>, <h1> – <h6> и <div>.
Строчные элементы действуют на небольшую часть страницы. Они не начинаются с новой строки.
К строчным элементам относятся <span>, <em> и <a>.
Вы не можете добавить блочные элементы внутри строчных.
Не делайте так:
<a href="#" >
<p>Посетите merion</p>
</a>
У вас не получится добавить <p> внутрь элемента <a>, поскольку <p> относится к блочным элементам, а <a> – к строчным.
Лучше сделать так:
<p>
Посетите <a href="wiki.merionet.ru" target="_blank">Merion</a>
для изучения IT
</p>
Это отличный пример того, как можно вложить строчные элементы внутри блочных.
Важно помнить, что:
Блочный элемент нельзя вложить внутри строчного.
Строчный элемент можно вложить внутри блочного.
Строчный и блочный элемент можно вложить внутри блочного.
Небольшое уточнение: «вложить» что-то в данном случае означает «добавить внутрь». Так что, говоря «это нельзя вложить», я имею ввиду, что вы не сможете добавить один такой элемент внутрь другого.
Надеюсь, вы запомнили 3 простых правила для вложения элементов.
Кроме того, CSS позволяет преобразовать блочные элементы в строчные. Для этого используется display: inline-block и display: inline.
А еще важно помнить простую истину: даже если ваш код работает, это еще не значит, что вы делаете все правильно.
Именно поэтому я всегда рекомендую пользоваться валидатором разметки W3C и дополнительно проверять свой код.
Этот валидатор отслеживает правильность разметки веб-документов в HTML, XHTML, SMIL, MathML и т.д.
Для проверки кода можно скопить его URL и добавить на сайт, либо загрузить сам файл HTML.
Заключение
Надеемся, что данная статья помогла вам узнать что-то новое о лучших практиках в HTML. Мы постарались включить в нее самые полезные советы, которыми можно начинать пользоваться уже сегодня.