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



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

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

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

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

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

<p class="callout info">Место в коде, в которое необходимо добавить методы инициализации зависит от "движка" вашего фронтенда.</p>

<p class="callout warning">Если у вас SPA (Single Page Application), то виджет должен инициализироваться не в момент готовности DOM модели, а после того как сайт «отрисован».</p>

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

- **С передачей роли пользователя** — это необходимо, когда вы хотите для каждой роли показывать разные стартовые меню и сценарии чат-бота;
- **Без передачи роли пользователя** — используйте этот режим, когда вам не важно разделение на роли на старте чат-бота.

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

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

Примеры:

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

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

```JavaScript
setWidgetRole();
```

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

```JavaScript
initMetabotWidget()
```

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

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

<table border="1" id="bkmrk-%D0%9C%D0%B5%D1%82%D0%BE%D0%B4-%D0%9E%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5" style="border-collapse: collapse; width: 100%; height: 151.417px;"><tbody><tr style="height: 29.4583px; background-color: #c2e0f4;"><td style="width: 33.3051%; height: 29.4583px;">**Метод**</td><td style="width: 33.3051%; height: 29.4583px;">**Описание**</td><td style="width: 33.3077%; height: 29.4583px;">**Примеры**</td></tr><tr><td style="width: 33.3051%;">setWidgetRole() </td><td style="width: 33.3051%;">Метод для передачи кода роли пользователя.

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

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

</td><td style="width: 33.3077%;">setWidgetRole(«Код роли»)

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

- **‘admin’** — администратор;
- **‘dealer’** — дилер;
- **‘employee’** — сотрудник.

</td></tr><tr style="height: 63.0417px;"><td style="width: 33.3051%; height: 63.0417px;">initMetabotWidget()</td><td style="width: 33.3051%; height: 63.0417px;">Функция инициализации виджета. Выполняется в самом конце.</td><td style="width: 33.3077%; height: 63.0417px;">  
</td></tr></tbody></table>

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

1\. Добавить код перед закрывающим тегом **&lt;/head&gt;**:

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

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

<p class="callout warning">Если у вас SPA (Single Page Application), виджет необходимо инициализировать после завершения отрисовки страницы и получения данных авторизованного пользователя.</p>

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

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

Пример:

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

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

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

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

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

<table border="1" id="bkmrk-%D0%9C%D0%B5%D1%82%D0%BE%D0%B4-%D0%9E%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5" style="border-collapse: collapse; width: 100%;"><tbody><tr style="background-color: #c2e0f4;"><td>**Метод**</td><td>**Описание**</td><td>**Пример**</td></tr><tr><td>initMetabotWidget()</td><td>Функция инициализации чат-виджета.

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

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

</td><td>```JavaScript
initMetabotWidget({ 
  name: user.fullName, 
  email: user.email, 
  company: user.companyName 
})
```

</td></tr></tbody></table>

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

<table border="1" id="bkmrk-%D0%9F%D0%BE%D0%BB%D0%B5-%D0%9E%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5-%D0%A2%D0%B8%D0%BF-na" style="border-collapse: collapse; width: 100%;"><tbody><tr style="background-color: #c2e0f4;"><td>**Поле**</td><td>**Описание**</td><td>**Тип**</td></tr><tr><td>name</td><td>Имя пользователя</td><td>string</td></tr><tr><td>email</td><td>Email пользователя</td><td>string</td></tr><tr><td>company</td><td>Название компании</td><td>string</td></tr></tbody></table>

####