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

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

Платформа:

Шаг 1: Получите код встраивания

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<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: Выберите способ установки

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

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

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

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

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

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

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

Войдите в панель управления BigCommerce
Перейдите в Storefront → My Themes
Нажмите кнопку «Customize» на вашей активной теме
В левой панели конструктора страниц найдите элемент «HTML»
Перетащите HTML-элемент в область футера шаблона страницы
Нажмите на HTML-элемент и выберите «Edit HTML»
Вставьте код встраивания Asyntai
Нажмите «Save HTML»
Нажмите «Publish», чтобы изменения вступили в силу

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

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

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

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

Перейдите в Storefront → My Themes
Нажмите «Advanced» на вашей активной теме
Выберите "Edit Theme Files"
Перейдите в templates → components → common
Откройте footer.html
Прокрутите файл в конец
Вставьте ваш код встраивания Asyntai непосредственно перед закрывающим тегом
Нажмите «Save & Apply File»

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

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

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

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

Шаг 3: Проверка установки

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

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

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