Встраиваемые виджеты для разработчиков

Встраиваемые виджеты предназначены для использования на любых страницах вебсайта или приложения. В зависимости от автоматизации процессов или используемых чат ботов вы можете инициировать виджет для предоставления поддержки в зависимости от поведения пользоватя или отправляемого вам сообщения. 

Но иногда у вас есть специфические требования, которые мы попробуем покрыть в данной статье.


Внимание: Авторизация пользователей в виджете при помощи SSO описана в другой статье


Кастомная ссылка для открытия виджета

Чтобы открыть виджет по ссылке на вашем сайте, следуйте инструкциям:

  • Добавьте код виджета, сгенерированный системой, на страницу вашего сайта;
  • Добавьте атрибут "ursdk-viewport-maximize" с нужным id виджета к HTML элементу, при нажатии на который будет открываться виджет. Пример:
<p>Feel free to <span ursdk-viewport-maximize="6"> contact our support </span></p>

В этом случае виджет будет открываться при нажатии на ссылку "contact our support".

Триггер виджета на нажатие по ссылке

Если вы хотите иниировать запуск виджета по нажатию на какую-то ссылку, находящуюся внутри текста на странице или других элементах вашего сайта, то следуйте инструкциям ниже.

  • Добавьте js код виджета на страницу из Администрирование » Каналы поддержки » Виджет » редактирование нужного виджета;
  • Добавьте href на элементе:
<a class="live-chat-link" href="#">Support Center</a>
  • Затем добавьте встроенный js на страницу или в отдельный файл js:
<script type="text/javascript">
      $('.live-chat-link').on('click', function(e) {
          e.preventDefault();
          $('.UR_chatHandleTab .UR_iWidget').get(0).click();
       });
</script>

Вы можете изменить код для использования своего id или класса на запуск js кода. Внимение: для запуска определенного типа виджета замените в коде класс .UR_Widget на нужный тип виджета для запуска. Вот список всех возможных классов для нужных виджетов:

  • UR_iWidget - чат виджет;
  • UR_iWidgetTopic - виджет обратной связи;
  • UR_iWidgetTicket - контактная форма;
  • UR_iWidgetKb - база знаний;
  • UR_iTelegram - telegram;
  • UR_iFacebook - fb messenger виджет;
  • UR_iVk - vkontakte виджет;
  • UR_iViber - viber;
  • UR_iWhatsapp - whatsapp виджет;
  • UR_iWechat - wechat виджет;
  • UR_iLine - line виджет;
  • UR_iLink - виджет со своим URL.

Также вы можете использовать js скрипт для JQuery, если этот метод вам более предпочтителен:

<script type="text/javascript">
    const chatButtons = document.getElementsByClassName('live-chat-link');
    for (let chatButton of chatButtons) {
        chatButton.onclick = function(event) {
            event.preventDefault();
            document.getElementsByClassName('UR_iWidget')[0].click();
        }
    }
</script>

Внимение: для открытия нужного типа виджета, пожалуйста, замените класс UR_iWidget на нужный из списка выше (над кодом).

Если вам требуется спрятать виджет, даже когда агенты поддержки онлайн, и запускать его по определенному клику, добавьте css класс на страницу:

 <style>
     .UR_chatHandleTab:not(.UR_chatTabExpanded):not(.UR_chatOpened) {
          display: none !important;
      }
</style>

Открытие виджета при загрузке страницы

Если вам нужно открывать виджет всегда при загрузке страницы, добавьте следующий js код на страницу :

<script type="text/javascript">
      sessionStorage.setItem('urchat_isOpen', widget_type);
</script>

где widget_type будет нужный для открытия тип виджета: topic, ticket, chat, kb.

Изменение имени виджета для пользователя с помощью CSS

Если вы хотите изменить название чат-виджета для пользователчя, перейдите в Администрирование -> Интерфейс -> Расширенный CSS. Затем вставьте следующий фрагмент кода в поле "CSS виджетов":

#ur_chat_desktop_conversation_chat_555 .UR_chatHeaderTitle { 
  font-size: 0;
}
#ur_chat_desktop_conversation_chat_555 .UR_chatHeaderTitle:after {
  content: 'Customer Support';
  font-size: 17px;
}

В коде "555" представляет собой ID чата. Чтобы найти ID чата, перейдите в Администрирование -> Каналы поддержки -> Виджет -> Выберите ваш виджет и нажмите "Изменить". В углу вы увидите отображенный ID чата, как показано на изображении:

"Customer support" - это новое название чата. Вы можете изменить его на то, что захотите.
Нажмите "Отправить", чтобы сохранить изменения.

Была ли статья полезной?
0 0 0