Как добавить ИИ-чат-бот Asyntai в BigCommerce

Пошаговое руководство для магазинов на BigCommerce

Платформа:

Шаг 1: Get Your Embed Code

Сначала перейдите на Панель управления Asyntai и прокрутите вниз до раздела «Код для встраивания». Скопируйте уникальный код, который выглядит так:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Примечание: Код выше — всего лишь пример. Вы должны скопировать свой уникальный код для встраивания с вашей Панели управления, так как он содержит ваш персональный идентификатор виджета.

Шаг 2: Choose Installation Method

Существует несколько способов добавить виджет чата в BigCommerce. Выберите тот, который лучше всего вам подходит:

Способ 1: Через менеджер скриптов (рекомендуется)

Script Manager — это самый простой и рекомендованный способ добавления пользовательских скриптов в ваш магазин BigCommerce. Он не требует знания программирования и сохраняется при смене темы.

Войдите в панель управления BigCommerce
Перейдите в Storefront → Script Manager
Нажмите the \"Create a Script\" button
Настройте your script with these settings:
- Название: Asyntai AI Chatbot
- Описание: чат-виджет на основе ИИ (необязательно)
- Расположение: футер
- Расположение: все страницы
- Категория скрипта: функциональная
- Тип скрипта: скрипт
В поле «Содержимое скрипта» вставьте код вставки Asyntai
Нажмите \"Save\"

Зачем использовать Script Manager? Скрипты, добавленные через Script Manager, управляются отдельно от темы. Они не будут затронуты при обновлении или смене темы магазина.

Способ 2: Через конструктор страниц

Вы можете использовать конструктор страниц BigCommerce для добавления виджета чата через HTML-элемент. Этот метод удобен, если вам нужен больший контроль над расположением виджета.

Войдите в панель управления BigCommerce
Перейдите в Storefront → My Themes
Click the "Customize" button on your active theme
В левой панели конструктора страниц найдите элемент «HTML»
Перетащите HTML-элемент в область футера шаблона страницы
Click on the HTML element and select "Edit HTML"
Вставьте код встраивания Asyntai
Нажмите \"Save HTML\"
Click "Publish" to apply changes to your live store

Примечание: Если вы хотите, чтобы чат-бот отображался на всех страницах, нужно добавить его в глобальную область, например в подвал. Метод через Script Manager проще для установки на весь сайт.

Способ 3: Редактирование файлов темы (темы Stencil)

Для разработчиков, использующих темы Stencil, можно добавить код напрямую в файлы темы. Для этого необходим доступ к исходным файлам темы.

Использование панели управления BigCommerce

Перейдите в Storefront → My Themes
Нажмите \"Advanced\" on your active theme
Выберите \"Edit Theme Files\"
Перейдите в templates → components → common
Откройте footer.html
Прокрутите файл в конец
Paste your Asyntai embed code just before the closing tag
Нажмите \"Save & Apply File\"

Использование Stencil CLI (локальная разработка)

Если вы разрабатываете локально с помощью Stencil CLI:

Откройте локальные файлы вашей темы
Перейдите в templates/components/common/footer.html
Добавьте код вставки Asyntai перед закрывающими тегами
Опубликуйте изменения с помощью stencil push

Важно: Изменения в файлах темы могут быть перезаписаны при обновлении темы. Для постоянного решения, сохраняющегося при обновлениях темы, используйте метод Script Manager.

Шаг 3: Verify Installation

После добавления кода откройте магазин BigCommerce в новой вкладке браузера или в режиме инкогнито. Вы должны увидеть кнопку виджета чата в правом нижнем углу магазина. Нажмите на неё, чтобы убедиться, что всё работает.

Виджет не отображается? Очистите кеш браузера и попробуйте снова. Если вы вносили изменения через редактор темы, убедитесь, что нажали «Опубликовать» для применения изменений на вашем живом магазине.

Документация