Размещение виджета бота на странице сайта

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

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

1) Создать чат. Подробнее о том, как это сделать, написано в следующем разделе Создание новых чатов).

2) В личном кабинете администратора перейти в раздел Чаты - Настройки и нажать кнопку Код фрейма напротив имени созданного чата.

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

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

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

Виджет имеет настройки, которые задаются при помощи объектов sessionDefaults, appearance и analytics. Ниже приводится фрагмент кода инициализации виджета с этими объектами.

TwinChat.init('#twin-chat-container', { 
        chatId: '35a40e2c-4955-4ae3-a8e0-559fd4381244',
             sessionDefaults: {
          	name: 'Диалог с клиентом',
          	clientExternalId: 'externalKey',
          	       clientMetadata: {
 				age: 31,
 				topic: "Открытие магазина",
 				city: 'Москва'},
 				clientEmail: 'client@mail.ru',
 				clientPhone: '79111234567',
 				clientName: 'Иван Петров',
 				orderNumber: '1234567',
 				clientDeviceId:'0000-1111-2222-3333-44444444',
 				clientTimezone:'-300'
        		                },
              appearance:{
                lang: 'en', 
                start: {
                  mode: 'messengerButtons',
                },
 	            rating: {
                  midterm: 'Оцените, как проходит диалог',
                }
              	analytics: {
					yandexMetrika: {
					counter: '86962928',
					// method: 'ym',
					// prefix: '/chat-widget',
					},
				},
              }
      }).then(client => window.TwinClient = client);  

Объект sessionDefaults  передает в сценарий виджета системные и пользовательские переменные (например, ФИО клиента, день недели, контактный номер телефона, идентификатор клиента во внешней системе). Данные переменные можно использовать в диалогах виджета.

В указанном выше фрагменте кода инициализации виджета используются следующие переменные:

• name (системная переменная) – имя диалога, которое отображается в кабинете оператора.
• clientExternalId (системная переменная) – идентификатор клиента, по которому будут группироваться чат-сессии в кабинете оператора.
• clientMetadata – содержит список переменных, которые задаются пользователем. Значения этих переменных передаются в сценарий. Вы можете задавать любые переменные. Например:
  • age (пользовательская переменная) – возраст клиента;
    
  • topic (пользовательская переменная) – тема диалога;
    
  • city (пользовательская переменная) – город проживания клиента;
    
  • clientEmail (пользовательская переменная) – адрес электронной почты клиента;
  • clientPhone (пользовательская переменная) – контактный номер телефона клиента;
  • clientName (пользовательская переменная) – имя клиента;
  • orderNumber (пользовательская переменная) – номер заказа;
  • clientDeviceId (пользовательская переменная) – идентификатор устройства клиента;
  • clientTimezone (пользовательская переменная) – часовой пояс.

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

• lang - задает язык виджета (подробнее об изменении языка виджета см. Изменение языка виджета);
• start  - задает режим отображения кнопок подключенных мессенджеров и социальных сетей. Чтобы при загрузке страницы рядом с кнопкой виджета отображались кнопки с пиктограммами всех подключенных в личном кабинете мессенджера и социальных сетей, то для опции mode нужно указать значение messengerButtons;
• rating - задает текст запроса промежуточной оценки диалога. В значении midterm введите текст, который должен отображаться в диалогах виджета при запросе у пользователя промежуточной оценки диалога;
• analytics - содержит свойства, которые позволяют подключить яндекс метрику для оценки частоты использования чата:
  • yandexMetrika - идентификатор яндекс метрики.

Чтобы использовать указанные выше настройки виджета, необходимо добавить объекты sessionDefaults, appearance и analytics в раздел инициализации виджета.