Как вставить виджет UIS в свой элемент сайта (JS API)

Виджеты UIS можно открывать по клику на любой элемент сайта. Для этого можно использовать два решения на выбор:

• прописать код элемента в настройках виджета UIS;
• вызывать виджет с помощью команды JS API.

Первый способ быстрее, а второй — надежнее, потому что при изменении элементов на сайте вам не придется менять настройки в Личном кабинете UIS. Мы опишем оба способа, а вы можете выбрать удобный для себя.

В обоих случаях вам понадобится доступ к коду сайта и в Личный кабинет UIS.

Откройте сайт, кликните правой кнопкой на нужный элемент и нажмите «Просмотреть код»:

Кликните правой кнопкой по выделенному элементу и нажмите «Copy ⟶ Copy selector»:

В Личном кабинете UIS подключите и настройте нужный виджет, а затем в настройке «Событие» выберите «Клик на элементе»:

Вставьте код, который скопировали на сайте, и сохраните.

Готово! Теперь по клику на элемент будет открываться виджет UIS.

В Личном кабинете UIS подключите и настройте нужный виджет, а затем скопируйте его ID из настроек:

В код элемента на сайте вставьте команду JS API для открытия виджета, вместо «ID» в скобках укажите тот ID, который скопировали в Личном кабинете UIS:

Пример кода элемента после вставки команды для вызова виджета:

Если нужно, чтобы виджет открывался только по клику на настроенный элемент, то в настройках виджета в поле «Событие» выберите «JS API»:

Если при этом вы используете в виджете кнопку для заказа обратного звонка, обязательно создайте сценарий для обработки звонка и включите в нем настройку «Использовать сценарий в JS API», иначе обратный звонок работать не будет.

Если нужно, чтобы виджет открывался и по клику на элемент, и в соответствии с логикой, настроенной в ЛК UIS, задайте эту логику в настройках виджета:

В Личном кабинете UIS добавьте адрес сайта и установите код счетчика UIS в код сайта.

Подключите и настройте нужный канал: Telegram, WhatsApp* или VK Groups. В настройках канала включите «Использовать в виджете на сайте», выберите нужный сайт и сохраните:

Теперь откройте настройки канала и скопируйте ссылку на канал с помощью кнопки копирования. Ссылка понадобится для настройки команды JS API:

Обязательно добавьте набор виджетов в разделе Виджеты на сайте ⟶ Виджеты:

Если не хотите, чтобы виджеты отображались на сайте, просто не включайте их в настройках, но сам набор виджетов обязательно нужно добавить, иначе переход в канал работать не будет, даже если прописать команды JS API в коде элементов на сайте.

В код элемента на сайте вставьте команду JS API для перехода в мессенджеры:

Для канала Telegram

В скобки вставьте ссылку на канал, которую скопировали из настроек канала.

Пример:

Для канала WhatsApp*

В скобки вставьте ссылку на канал, которую скопировали из настроек канала.

Пример:

Для канала VK Groups

В скобки вставьте ссылку на канал, которую скопировали из настроек канала.

Пример:

Если хотите, чтобы переход в каналы работал не только по клику на элементы, но и через стандартные кнопки UIS, настройте и включите виджеты с типом «Кнопка для сайта».