Перейти к основному содержимому

Чат-виджет

Часто, заходя на сайт, клиенты видят всплывающее сбоку окошко, в котором они могут общаться с ботом или оператором. Это окошко называется чат-виджет. Это один из каналов, в котором вы можете опубликовать чат-бота Aimylogic.

подсказка
Если у вас еще нет чат-бота, вы можете создать его в конструкторе Aimylogic.

Чтобы встроить чат-виджет с ботом на сайт, вам нужно иметь доступ к коду сайта. Так что вы можете просто передать ссылку на эту статью вашему веб-разработчику. Либо встройте чат-виджет на любой конструктор сайтов, типа Tilda (с помощью блока HTML) или Wix.

Вы можете посмотреть пошаговую видеоинструкцию по публикации бота в чат-виджете:

Вот пример того как может отображаться чат-виджет на вашем сайте (вы можете поменять картинку на свою):

Как создать чат-виджет​

Перейдите в Каналы и найдите чат-виджет.

Чат-виджет в списке каналов

Нажмите Подключить. Чтобы настроить чат-виджет, нажмите напротив подключенного канала.

Как разместить чат-виджет на своем сайте​

Чтобы поместить чат-виджет на свой сайт, нажмите Получить script. Код скрипта будет скопирован в буфер обмена.

Получить script

Теперь вам нужно вставить этот код между тегами <head> на всех страницах вашего сайта, где вы хотите разместить виджет с вашим ботом. Например, так:

<head>
  <script src="https://bot.aimylogic.com/chatwidget/ae6deeca-be8e-43f0-b218-2b7f4d1aaaae/justwidget.js" async></script>
</head>

Чат-виджет появится на соответствующей странице.

Как разместить чат-виджет на конструкторе сайтов​

Если вы пользуетесь конструктором сайтов Tilda, вам нужно будет вставить код скрипта в блок HTML. Обратитесь к документации Tilda за более детальными инструкциями.

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

Как передать свои параметры в виджет​

Иногда нужно передавать некоторые параметры при загрузке виджета, чтобы бот, например, знал идентификатор пользователя, его имя или другие данные. Все эти данные передаются в виджет в момент, когда виджет открывается на сайте.

Скрипт, который передаст нужные параметры с вашего сайта:

<script>
  window.juswidgetVariables = new Object();
  window.juswidgetVariables.start = new Object();
  window.juswidgetVariables.start.id = "55";
  window.juswidgetVariables.start.name = "Слава";
</script>

Этот код необходимо разместить перед строкой, в которой загружается сам виджет.

В приведенном выше примере мы передаем в виджет переменную start, в которой хранится два поля –– id и name. В сценарии бота вы можете обратиться к этой переменной, как и к любой другой –– $start.name или $start.id.

Вы можете передавать любой другой набор полей, но переменная должна всегда иметь имя start.

Еще один пример: если вам нужно передать адрес вашего магазина, то HTML-код может выглядеть следующим образом (сначала скрипт с передаваемыми данными, затем скрипт чат-виджета):

<script>
  window.juswidgetVariables = new Object();
  window.juswidgetVariables.start = new Object();
  window.juswidgetVariables.start.address = "ул. Ленина";
</script>
<script src="https://bot.aimylogic.com/chatwidget/01f8bfb4-763d-4fbe-aca1-d3c7524e4907/justwidget.js" async></script>

Затем вы можете оперировать переменной $start.address в сценарии, например, передавать ее значение в HTTP-запросе.