Чат-виджет для сайта

Инструкция по установке чат-виджета на веб-сайт

1. Добавить код перед закрывающим тегом </head>:

<script src="https://{{код-скрипта}}.js" async></script> 

Исходный код возьмите в настройках канала или запросите у вашего разработчика.

2. Добавить код инициализации чат-виджета:

Место в коде, в которое необходимо добавить методы инициализации зависит от "движка" вашего фронтенда.

Если у вас SPA (Single Page Application), то виджет должен инициализироваться не в момент готовности DOM модели, а после того как сайт «отрисован».

Существует два режима работы с чат-виджетом.

3. Добавьте код установки роли пользователя:

setWidgetRole("<<Код роли>>")

Примеры:

setWidgetRole("admin"); // Устанавливает роль администратора
setWidgetRole("dealer"); // Устанавливает роль дилера
setWidgetRole("employee"); // Устанавливает роль сотрудника

4. Добавьте код сброса роли:

setWidgetRole();

5. Инициализируйте виджет:

initMetabotWidget()

Если вы все сделали верно, то вы увидите иконку чата в углу экрана при нажатии на которую распахивается окно чата. 

Описание методов

Метод Описание Примеры
setWidgetRole() 

Метод для передачи кода роли пользователя.


Передача кода происходит путем вызова функции с соответствующим параметром.  


Роль передается на платформу и фиксируется в атрибут лида "название" (на примере, атрибут/персона = "роль")

setWidgetRole(«Код роли»)


Где код роли может принимать строковое значение, например:

  • ‘admin’ — администратор;
  • ‘dealer’ — дилер;
  • ‘employee’ — сотрудник.
initMetabotWidget() Функция инициализации виджета. Выполняется в самом конце.

Инструкция по установке чат-виджета на веб-сайт (Veka) (с передачей параметров через диплинк)

1. Добавить код перед закрывающим тегом </head>:

<script src="https://cdn.metabot24.com/js/chatwidget/veka/selling-bot/scriptInit.js" async></script>

Исходный код возьмите в настройках канала или запросите у вашего разработчика.

Если у вас SPA (Single Page Application), виджет необходимо инициализировать после завершения отрисовки страницы и получения данных авторизованного пользователя.

2. Передать данные пользователя при запуске виджета:

initMetabotWidget({ name: "<<Имя пользователя>>", email: "<<Email пользователя>>", company: "<<Название компании>>" })

Пример:

initMetabotWidget({ name: "Иван Иванов", email: "ivan.ivanov@company.ru", company: "ООО 'Деметра'" })

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

initMetabotWidget({ name: user.fullName, email: user.email, company: user.companyName })

3. После выполнения кода на странице появится иконка чата. При открытии чата данные пользователя автоматически передаются в платформу и используются для персонализации сценариев.

Описание метода

Метод Описание Пример
initMetabotWidget()

Функция инициализации чат-виджета.

При запуске метода:

  • загружается скрипт виджета
  • устанавливается соединение с сервером чата
  • передаются данные пользователя
  • выполняется стартовый сценарий чат-бота
initMetabotWidget({ 
  name: user.fullName, 
  email: user.email, 
  company: user.companyName 
})

Формат передаваемых данных

Поле Описание Тип
name Имя пользователя string
email Email пользователя string
company Название компании string