--- id: "faq-10330" type: "faq" lang: "ru" title: "Как встроить чат на сайт - в страницу или карточку товара через iFrame в Binom" url: "https://binomai.com/ru/faq/vstroit-okno-chata-v-stranicu-iframe/" translation_group: "faq-10330" translations: 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" uk: url: "https://binomai.com/ua/faq/vstroit-okno-chata-v-stranicu-iframe/" markdown: "https://binomai.com/ai/ua/faq/vstroit-okno-chata-v-stranicu-iframe.md" categories: ["Публикация и интеграция Binom"] published: "2026-10-19T11:21:59Z" updated: "2026-10-19T11:21:59Z" --- # Как встроить чат на сайт - в страницу или карточку товара через iFrame в Binom *Обновлено: 19.10.2026, 11:21 UTC* Встроить чат на сайт прямо в содержимое страницы позволяет iFrame - окно чата Binom, которое стоит в карточке товара, на странице услуги или рядом с формой заявки. Клиент задаёт вопрос, не уходя со страницы. Код для встраивания копируется в разделе Интеграции → iFrame и вставляется в нужное место страницы. Если Binom нужен на всём сайте сразу, удобнее [плавающий Widget](https://binomai.com/ru/faq/kak-ustanovit-vidzhet-na-sajt/); если сайта нет - [публичная ссылка](https://binomai.com/ru/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/ru/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/ru/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/ru/faq/chat-ne-poyavlyaetsya-na-sajte/). ## Как ещё спрашивают ### Как вставить код чата в страницу сайта? Скопируйте блок 1 на вкладке [Интеграции → iFrame](https://app.binomai.com/cabinet/binom/integrations?tab=1) и вставьте его в нужное место страницы. В WordPress используйте блок "Произвольный HTML". Если окно не появилось - [что проверить](https://binomai.com/ru/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/ru/faq/kak-podklyuchit-webrtc-2/) - голосовой разговор в окне чата - [Что может клиент в чате Binom](https://binomai.com/ru/faq/foto-fajly-golosovye-v-chate-na-sajte/) - [Как задать единый фирменный стиль для всех чатов](https://binomai.com/ru/faq/chat-v-cvetah-brenda-brending/)