---
id: "faq-10490"
type: "faq"
lang: "uk"
title: "Як вбудувати чат на сайт: у сторінку або картку товару через iFrame у Binom"
url: "https://binomai.com/ua/faq/vstroit-okno-chata-v-stranicu-iframe/"
translation_group: "faq-10330"
translations:
  ru:
    url: "https://binomai.com/ru/faq/vstroit-okno-chata-v-stranicu-iframe/"
    markdown: "https://binomai.com/ai/ru/faq/vstroit-okno-chata-v-stranicu-iframe.md"
  en:
    url: "https://binomai.com/faq/vstroit-okno-chata-v-stranicu-iframe/"
    markdown: "https://binomai.com/ai/en/faq/vstroit-okno-chata-v-stranicu-iframe.md"
categories: ["Публікація та інтеграція Binom"]
published: "2026-10-19T16:36:14Z"
updated: "2026-10-19T17:16:29Z"
---

# Як вбудувати чат на сайт: у сторінку або картку товару через iFrame у Binom

*Оновлено: 19.10.2026, 17:16 UTC*


Вбудувати чат на сайт прямо у вміст сторінки дозволяє iFrame - вікно чату Binom, яке розміщується в картці товару, на сторінці послуги або поруч із формою заявки. Клієнт ставить запитання, не залишаючи сторінку. Код для вбудовування копіюється в розділі Інтеграції → iFrame і вставляється в потрібне місце сторінки.

Якщо Binom потрібен на всьому сайті одразу, зручніше [плаваючий Widget](https://binomai.com/ua/faq/kak-ustanovit-vidzhet-na-sajt/); якщо сайту немає - [публічне посилання](https://binomai.com/ua/faq/ssylka-na-chat-bez-sajta-publichnyj-chat/). Порівняння способів: [що обрати для сайту](https://binomai.com/ru/faq/chto-effektivnee-ispolzovat-dlya-sajta-vsplyvayushhij-vidzhet-podderzhki-ili-chat-vstroennyj-pryamo-v-veb-straniczu/).

## Як налаштувати вікно чату

1. Відкрийте [Інтеграції → iFrame](https://app.binomai.com/cabinet/binom/integrations?tab=1).
2. У блоці "Розмір чату" вкажіть ширину і висоту вікна в пікселях. Орієнтуйтеся на місце, яке вікно займатиме на сторінці.
3. Щоб вікно виглядало інакше, ніж інші канали, позначте "Налаштувати оформлення окремо" і задайте "Колір чату" та "Стиль і оформлення". Без цієї позначки використовуються спільні кольори з [Налаштування](https://app.binomai.com/cabinet/binom/settings) → вкладка "Брендинг" ([як задати єдиний фірмовий стиль](https://binomai.com/ua/faq/chat-v-cvetah-brenda-brending/)).
4. Натисніть "Оновити" і перевірте результат у блоці "Попередній перегляд чату".

## Який код вставити на сайт

Нижче налаштувань показано три блоки коду. Вони вирішують різні завдання:

| Блок | Що робить | Коли потрібен |
| --- | --- | --- |
| 1. "Скопіюйте наступний код і вставте його в відповідне місце на вашому сайті" | Саме вікно чату потрібного розміру. Вікно завантажується, коли відвідувач прокручує сторінку до нього, тому не сповільнює завантаження. | Завжди - це основний код. |
| 2. "...скрипт, який розпізнається як віджет чату Binom і ініціалізує його" | Після завантаження вікна передає в чат адресу сторінки і параметр `product_id` з адреси. | Якщо Binom має розуміти, на сторінці якого товару перебуває клієнт (Product ID). |
| 3. "...скрипт для динамічного завантаження чату" | Порожній контейнер і скрипт, який сам створює вікно чату зі збереженими налаштуваннями. | Альтернатива блоку 1, якщо зручніше вставляти один рядок коду. |

Використовуйте **або блок 1, або блок 3**, інакше на сторінці опиняться два вікна. Блок 2 додається на ту саму сторінку нижче основного коду.

У коді блоку 1 є атрибут `allow="microphone *; autoplay *"`. Не видаляйте його: без нього у вікні не працюватимуть голосові повідомлення і [голосова розмова через WebRTC](https://binomai.com/ua/faq/kak-podklyuchit-webrtc-2/).

## Куди вставити код

- **WordPress:** відкрийте потрібну сторінку або шаблон картки товару в редакторі, додайте блок "Довільний HTML" в місце, де має бути вікно, і вставте код.
- **Конструктор сайтів:** використовуйте елемент для вставки HTML-коду в потрібному місці сторінки.
- **Сайт з індивідуальною розробкою:** передайте розробнику скопійований код, адреси сторінок, де має бути вікно, потрібний розмір вікна і, якщо потрібен Product ID, - блок 2.

Щоб вікно стояло в усіх картках товарів, вставляйте код в спільний шаблон картки, а не на кожну сторінку окремо.

## Як перевірити результат

1. Відкрийте сторінку сайту в режимі інкогніто та прокрутіть до місця, де розміщено вікно.
2. Переконайтеся, що вікно потрібного розміру і не перекриває інші елементи на комп'ютері та телефоні.
3. Надішліть запитання. Якщо вставлено блок 2, на сторінці товару запитайте "Чи є він в наявності?" без назви товару - Binom має зрозуміти, про який товар йдеться.
4. Знайдіть тестовий діалог у розділі [Чати](https://app.binomai.com/cabinet/binom/chats).

## Можливі проблеми

### Картка сіра і позначена "Недоступно на тарифі"

**Що це означає:** публічний чат, iFrame та Widget входять до однієї тарифної опції, і її немає у вашому тарифі. На безкоштовному тарифі Free встановлення віджета та iFrame недоступне ([обмеження тарифу Free](https://binomai.com/ru/faq/v-chem-klyuchevye-ogranicheniya-besplatnoj-versii-free-po-sravneniyu-s-platnymi-tarifami/)). У блоці з кодом замість коду буде повідомлення "Ваш тариф не включає інтеграцію віджета".

**Як перейти на потрібний тариф:**

1. Дізнайтеся, який тариф потрібен: у розділі [Інтеграції](https://app.binomai.com/cabinet/binom/integrations) наведіть курсор на сіру картку - підказка "Перейдіть на тариф ..." назве найдоступніший тариф, до якого входить ця інтеграція. Чим відрізняються тарифи Free, Basic, Pro та Business: [скільки коштує Binom AI](https://binomai.com/ru/faq/skolko-stoit-ispolzovanie-platformy-binom-ai-i-ot-kakih-faktorov-zavisit-itogovaya-stoimost/).
2. Відкрийте [Підписка](https://app.binomai.com/cabinet/subscription). Якщо зараз безкоштовний тариф - натисніть "Вибрати тариф", якщо платний - "Порівняти тарифи".
3. Виберіть тариф і період оплати (щомісяця, кожні 3 місяці або щороку) і натисніть "Підтвердити й оплатити". Відкриється сторінка оплати.
4. Після оплати з'явиться "Оплата підписки пройшла успішно!". Поверніться до [Інтеграції → iFrame](https://app.binomai.com/cabinet/binom/integrations?tab=1) - картка буде позначена "Доступно".

Хочете спершу спробувати? 7-денний пробний період включає функції тарифу Basic: [як оформити підписку або пробний період](https://binomai.com/ru/faq/kak-oformit-podpisku-ili-testovyj-period/). Якщо після оплати з'явилося "Оплата не була завершена. Ваш тариф не змінився", повторіть оплату або напишіть на support@binomai.com, вказавши email акаунта і обраний тариф.

### Повідомлення "У вас немає прав для керування цим розділом"

**Що це означає:** інтеграції налаштовують лише користувачі з рівнем доступу Owner або Admin для обраного Binom.
**Що зробити:** попросіть власника акаунта надати вам рівень Admin або передати завдання йому. Докладніше: [рівні доступу в команді](https://binomai.com/ru/faq/kak-raspredelit-obyazannosti-v-komande-s-pomoshhyu-pyati-urovnej-dostupa-owner-admin-editor-operator-viewer/).
**Як зрозуміти, що проблему вирішено:** після оновлення сторінки відкривається каталог інтеграцій.

### Вікно не з'явилося на сторінці

Покрокова перевірка: [чому чат Binom не з'являється на сайті](https://binomai.com/ua/faq/chat-ne-poyavlyaetsya-na-sajte/).

## Як ще питають

### Як вставити код чату на сторінку сайту?

Скопіюйте блок 1 на вкладці [Інтеграції → iFrame](https://app.binomai.com/cabinet/binom/integrations?tab=1) і вставте його в потрібне місце сторінки. У WordPress використовуйте блок "Довільний HTML". Якщо вікно не з'явилося - [що перевірити](https://binomai.com/ua/faq/chat-ne-poyavlyaetsya-na-sajte/).

### Чи можна поставити чат у картку товару?

Так. Вставте код у загальний шаблон картки товару і додайте блок коду 2, щоб працював [чат-бот для інтернет-магазину, який знає товар](https://binomai.com/ru/faq/kak-ii-sotrudnik-opredelyaet-na-stranicze-kakogo-tovara-nahoditsya-klient-dlya-predostavleniya-kontekstnoj-konsultaczii/).

## Що далі

- [Як Binom визначає товар на сторінці (Product ID)](https://binomai.com/ru/faq/kak-ii-sotrudnik-opredelyaet-na-stranicze-kakogo-tovara-nahoditsya-klient-dlya-predostavleniya-kontekstnoj-konsultaczii/)
- [Як підключити WebRTC](https://binomai.com/ua/faq/kak-podklyuchit-webrtc-2/) - голосова розмова у вікні чату
- [Що може клієнт у чаті Binom](https://binomai.com/ua/faq/foto-fajly-golosovye-v-chate-na-sajte/)
- [Як задати єдиний фірмовий стиль для всіх чатів](https://binomai.com/ua/faq/chat-v-cvetah-brenda-brending/)