Добавление виджетов на ваш сайт
В этом руководстве показано, как добавить виджет или чат-бот AstroAPI на ваш сайт — навыки программирования не требуются. Вы копируете один фрагмент кода из панели управления и вставляете его в конструктор вашего сайта.
Руководство содержит пошаговые инструкции для WordPress, Wix, Squarespace, Shopify и Webflow, а также универсальный способ, который работает на любом сайте.
Ищете технический API виджетов?
Это руководство посвящено вставке готового кода встраивания на ваш сайт. О создании и настройке виджетов через API читайте в разделе Встраиваемые виджеты. Об API чат-бота — в разделе ИИ-чат-бот.
Шаг 1: Получите код встраивания
- Войдите в панель управления AstroAPI.
- Перейдите в раздел Widgets (или Chatbots для ИИ-чат-бота) и откройте виджет, который хотите встроить.
- На вкладке Preview проверьте, что виджет выглядит так, как вы хотите. Цвета, шрифты и компоновка настраиваются здесь, в панели управления, а не в коде — поэтому позже вы сможете изменить оформление виджета, не трогая свой сайт.
- Откройте вкладку Embed и скопируйте код встраивания. Он выглядит примерно так:
<script
src="https://api.astroapi.cloud/widgets/sdk.js"
data-widget-id="wgt_abc123"
data-api-key="your-api-key"
data-api-url="https://api.astroapi.cloud"
></script>
<div id="astro-widget-wgt_abc123"></div>Код встраивания чат-бота — это один тег script без <div>:
<script
src="https://api.astroapi.cloud/widget.js"
data-chatbot-id="your-chatbot-id"
data-api-key="your-api-key"
></script>Это весь код, который вам нужен. В следующих разделах показано, куда его вставлять на каждой платформе.
Берегите свой API-ключ
Код встраивания содержит API-ключ. Используйте ключ, у которого есть права только на виджеты или чат-бот, — никогда не используйте свой основной API-ключ. Ограниченные ключи можно создать в разделе API Keys панели управления, а чат-бот можно ограничить только вашими доменами в разделе Chatbots → Security.
WordPress
Вариант A: блок Custom HTML (рекомендуется)
- Откройте на редактирование страницу или запись, где должен появиться виджет.
- Нажмите кнопку +, чтобы добавить блок, и найдите Custom HTML.
- Вставьте код встраивания в блок.
- Нажмите Preview, чтобы проверить результат, затем Update или Publish.
Вариант B: на всём сайте (для чат-бота)
Чтобы показывать чат-бот на каждой странице:
- Установите лёгкий плагин для header/footer, например WPCode, или используйте опцию «пользовательские скрипты» вашей темы — редактировать файлы темы не нужно.
- Вставьте код встраивания чат-бота в секцию Footer (перед
</body>). - Сохраните. Теперь пузырёк чат-бота появляется на каждой странице.
Elementor
Используете Elementor? Добавьте на страницу виджет HTML и вставьте код встраивания туда.
Wix
- В редакторе Wix нажмите Add Elements (кнопка +) в левой боковой панели.
- Выберите Embed Code → Embed HTML.
- Нажмите Enter Code и вставьте код встраивания.
- Нажмите Apply и перетащите/измените размер рамки под виджет.
- Нажмите Publish.
Чат-бот на Wix
Wix отображает встроенный HTML внутри фрейма, из-за чего пузырёк чат-бота остаётся заключённым в этом фрейме. Для чат-бота на всём сайте используйте вместо этого Settings → Custom Code (требуется платный тариф Wix): вставьте код встраивания чат-бота, настройте его загрузку на All pages и разместите в Body - end.
Squarespace
- Откройте на редактирование страницу, где должен появиться виджет.
- Нажмите на точку вставки и выберите блок Code.
- Вставьте код встраивания (оставьте режим HTML по умолчанию).
- Сохраните страницу.
Для чат-бота на всём сайте перейдите в Settings → Advanced → Code Injection и вставьте код встраивания чат-бота в поле Footer.
WARNING
Блоки кода и внедрение кода требуют тарифа Squarespace Business или выше.
Shopify
- В админ-панели Shopify перейдите в Online Store → Themes.
- Нажмите Customize на текущей теме.
- Добавьте секцию Custom Liquid (или блок HTML, в зависимости от вашей темы) на страницу, где должен появиться виджет.
- Вставьте код встраивания и нажмите Save.
Для чат-бота на всём сайте:
- Перейдите в Online Store → Themes → ⋯ → Edit code.
- Откройте
layout/theme.liquid. - Вставьте код встраивания чат-бота непосредственно перед закрывающим тегом
</body>. - Нажмите Save.
Webflow
- В дизайнере Webflow перетащите элемент Embed (из Add Elements → Components) на вашу страницу.
- Вставьте код встраивания в редактор кода и нажмите Save & Close.
- Опубликуйте сайт. Пользовательский код выполняется только на опубликованном сайте, а не в предпросмотре дизайнера.
Для чат-бота на всём сайте перейдите в Site Settings → Custom Code и вставьте код встраивания чат-бота в поле Footer Code.
WARNING
Пользовательский код в Webflow требует платного тарифа сайта.
Любой другой сайт
Если вы (или ваш веб-разработчик) редактируете HTML напрямую:
- Откройте HTML-файл или шаблон страницы.
- Вставьте код встраивания виджета в то место страницы, где он должен появиться.
- Для чат-бота вставьте его код встраивания непосредственно перед закрывающим тегом
</body>— он отображается как плавающий пузырёк, поэтому его позиция в HTML не имеет значения.
Устранение неполадок
Область виджета остаётся пустой. Убедитесь, что вставлены обе части кода встраивания: тег <script> и <div> под ним. Некоторые конструкторы страниц вырезают одну из двух частей.
«Invalid API key» или ничего не загружается. API-ключ в коде встраивания мог быть отозван или не имеет нужных прав. Скопируйте свежий код встраивания на вкладке Embed панели управления.
Чат-бот не появляется на опубликованном сайте. Если вы ограничили чат-бот определёнными доменами (Chatbots → Security → Allowed domains), убедитесь, что домен вашего сайта есть в списке — включая вариант с www., если ваш сайт его использует.
Виджет выглядит не так, как в предпросмотре. Оформление берётся из настроек в панели управления и загружается вместе с виджетом. Если вы недавно меняли дизайн, обновите страницу с очисткой кэша (Ctrl+Shift+R / Cmd+Shift+R), чтобы обойти кэш браузера.
На десктопе работает, а в webview моего приложения — нет. Коду встраивания нужно выполнять JavaScript с домена astroapi.cloud. Убедитесь, что политика безопасности (CSP) вашего приложения или сайта разрешает скрипты с этого домена.
Дальнейшие шаги
- Встраиваемые виджеты — создание и настройка виджетов через API
- ИИ-чат-бот — настройка поведения, плагинов и безопасности чат-бота
- Аутентификация — создание API-ключей с ограниченными правами