# Як підключити віджет на сайт Віджет ConnectiveOne дозволяє інтегрувати чат-ботів та підключення до операторів безпосередньо на вашому сайті. Ця стаття пояснює, як підключити віджет на ваш сайт. ## Передумови - Активний бот в ConnectiveOne - Доступ до налаштувань бота - Можливість редагувати HTML код вашого сайту ## Крок 1: Отримання коду вставки 1. Перейдіть в **Налаштування ботів** → оберіть потрібного бота 2. Перейдіть до розділу **Widget** 3. Налаштуйте вигляд віджету в конструкторі (якщо потрібно) 4. Скопіюйте згенерований HTML+JS код ## Крок 2: Вставка коду на сайт Вставте скопійований код на ваш сайт ближче до закриваючого тега ``. **Важливо:** На одній сторінці може бути лише один екземпляр віджету. **Приклад розміщення:** ```html Мій сайт
``` ### Опціонально: захист від перемальовування сторінкою За замовчуванням віджет залишається в тому `
`, де ви його розмістили. Це рекомендована поведінка для більшості сайтів. Якщо платформа сайту перемальовує або видаляє блок, у який вставлено віджет, увімкніть опціональний прапорець `move_to_body`: ```javascript kw('init', { bot_id: 1, language_code: "uk", move_to_body: true }); ``` Коли прапорець увімкнено, віджет переносить свій змонтований root у `document.body` і видаляє порожні дублікати widget-placeholder, які сайт може створити пізніше. Використовуйте це лише для floating widget mode, не для `inline` або `frame` розміщення. ## Крок 3: Налаштування доменів (CORS) Для підключення віджету на сайті необхідно додати **origin** вашого сайту до списку дозволених. 1. Перейдіть у **Налаштування → Боти → оберіть бота → Widget**. 2. У розділі **«Список дозволених доменів для встановлення віджету»** натисніть **«Додати домен»**. 3. Введіть **повний origin** з протоколом, без слеша в кінці, без шляху та параметрів — наприклад, `https://www.example.com`. 4. Збережіть налаштування (**«Зберегти CORS»** або кнопку збереження каналу). **Приклади:** - Правильно: `https://shop.example.com`, `http://localhost:5173` - Неправильно: `example.com`, `https://example.com/`, `https://example.com/page` > 📖 **Детальніше:** [Налаштування CORS у віджеті](/uk/channels/how-to/configure-widget-settings.md#налаштування-cors-доменів) ## Крок 4: Мобільна версія Для коректного відображення на мобільних пристроях додайте в тег ``: ```html ``` ## Перевірка роботи Після вставки коду: 1. Оновіть сторінку сайту 2. Перевірте, чи з'явився віджет (лаунчер або кнопка) 3. Натисніть на віджет та перевірте, чи відкривається чат 4. Відправте тестове повідомлення та перевірте, чи отримуєте відповідь ## Обмеження - На одній сторінці може бути лише один екземпляр віджету - Віджет працює тільки через HTTPS (крім localhost) - Домени для віджету повинні бути додані в CORS settings - Віджет потребує JavaScript для роботи ## Пов'язані статті - [Що таке віджет](/uk/channels/explanation/what-is-widget.md) - [Налаштування віджету в Налаштування](/uk/channels/how-to/configure-widget-settings.md) - [Передача параметрів з сайту до сценарію](/uk/channels/how-to/pass-parameters-from-widget.md) - [Кастомізація кольорів віджету](/uk/channels/how-to/customize-widget-colors.md)