Встраиваемые виджеты предназначены для использования на любых страницах вебсайта или приложения. В зависимости от автоматизации процессов или используемых чат ботов вы можете инициировать виджет для предоставления поддержки в зависимости от поведения пользоватя или отправляемого вам сообщения.
Но иногда у вас есть специфические требования, которые мы попробуем покрыть в данной статье.
Внимание: Авторизация пользователей в виджете при помощи 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.