Как добавить ИИ-чат-бот Asyntai в Bubble
Пошаговое руководство для приложений на Bubble
HTML/Custom
WordPress
Shopify
WooCommerce
BigCommerce
Ecwid
Wix
Squarespace
Webflow
Weebly
HubSpot
Tilda
Adobe Experience Manager
Duda
Google Sites
Bludit
Plesk
Concrete CMS
Craft CMS
Contentful
Docusaurus
Strapi
Joomla
Kentico
Drupal
Magento
Blogger
Bitrix
TYPO3
PrestaShop
OpenCart
Ghost
Hugo
Statamic
Umbraco
Volusion
Moodle
SilverStripe
Grav
October CMS
ProcessWire
Sanity
ExpressionEngine
Sylius
Backdrop CMS
MODX
Bagisto
PayloadCMS
e107
CrafterCMS
Kirby
MedusaCMS
DatoCMS
GoDaddy
Framer
Bubble
Carrd
Jimdo
Strikingly
Kajabi
Teachable
Thinkific
ClickFunnels
Hostinger
Unbounce
Leadpages
Systeme.io
Instapage
Шаг 1: Получите код встраивания
Сначала перейдите на Панель управления Asyntai и прокрутите вниз до раздела «Код для встраивания». Скопируйте уникальный код, который выглядит так:
<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
Примечание: Код выше — всего лишь пример. Вы должны скопировать свой уникальный код для встраивания с вашей Панели управления, так как он содержит ваш персональный идентификатор виджета.
Шаг 2: Через настройки приложения (рекомендуется)
В Bubble есть встроенный способ добавления пользовательских скриптов через настройки приложения:
- Войдите в редактор вашего приложения Bubble
- Перейдите в Settings на левой панели
- Нажмите на вкладку «Web App»
- Прокрутите вниз до раздела «Дополнительные настройки»
- Найдите раздел «Пользовательские заголовки и тело»
- Вставьте код вставки Asyntai в поле «Скрипт в теле»
- Разверните ваше приложение
Совет: Adding the code to the body script field ensures it loads on every page of your Bubble app, which is the recommended approach for chat widgets. This feature is available on all Bubble plans including Free.
Альтернатива: Через HTML-элемент
Если вы хотите добавить чат-бот только на определённую страницу:
- В редакторе Bubble откройте страницу, на которой вы хотите разместить чат-бот
- Добавьте HTML-элемент на страницу
- Вставьте код встраивания Asyntai в элемент
- Разверните ваше приложение
Примечание: Метод настроек приложения предпочтителен, так как применяет чат-бот ко всему приложению. Метод HTML-элемента добавит чат-бот только на конкретную страницу, где вы разместили элемент.
Шаг 3: Проверка установки
После деплоя приложения откройте сайт Bubble в новой вкладке браузера или в режиме инкогнито. Вы должны увидеть кнопку виджета чата в правом нижнем углу. Нажмите на неё, чтобы убедиться, что всё работает.
Виджет не отображается? Убедитесь, что вы задеплоили приложение после добавления кода. Попробуйте очистить кэш браузера или открыть сайт в режиме инкогнито. При тестировании в режиме разработки также проверьте работающую версию приложения.