Як додати ШI-чатбот Asyntai до BigCommerce

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

Платформа:

Крок 1: Отримайте код для вставки

Спочатку перейдiть до вашої Панелi керування Asyntai та прокрутiть вниз до роздiлу "Код для вставки". Скопiюйте унiкальний код для вставки, який виглядатиме так:

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

Примітка: Код вище є лише прикладом. Ви повиннi скопiювати власний унiкальний код для вставки з вашої Панелi керування, оскiльки вiн мiстить ваш особистий ID вiджета.

Крок 2: Оберіть метод встановлення

Є кiлька способiв додати вiджет чату до BigCommerce. Оберiть метод, який найкраще пiдходить для вас:

Метод 1: Використання Script Manager (Рекомендовано)

Script Manager є найпростiшим та рекомендованим способом додавання користувацьких скриптiв до вашого магазину BigCommerce. Вiн не вимагає знань програмування та зберiгається при змiнi тем.

Увійдіть до вашої Панелі керування BigCommerce
Перейдіть до Storefront → Script Manager
Натисніть кнопку "Create a Script"
Налаштуйте ваш скрипт з такими параметрами:
- Назва: Asyntai AI Chatbot
- Опис: Віджет чату на основі ШI (необов'язково)
- Розміщення: Нижній колонтитул
- Місцезнаходження: Усі сторінки
- Категорія скрипту: Функціональний
- Тип скрипту: Script
У полi "Script Contents" вставте ваш код для вставки Asyntai
Натисніть "Save"

Чому варто використовувати Script Manager? Скрипти, доданi через Script Manager, управляються окремо вiд вашої теми. Вони не будуть зачепленi при оновленнi або змiнi теми магазину.

Метод 2: Використання Page Builder

Ви можете використовувати Page Builder BigCommerce для додавання вiджету чату за допомогою HTML-елемента. Цей метод корисний, якщо ви хочете бiльше контролю над тим, де вiджет з'являється.

Увійдіть до вашої Панелі керування BigCommerce
Перейдіть до Storefront → My Themes
Натисніть кнопку "Customize" на вашій активній темі
На лiвiй бiчнiй панелi Page Builder знайдiть елемент "HTML"
Перетягнiть HTML-елемент до областi нижнього колонтитула вашого шаблону сторiнки
Натисніть на HTML-елемент та оберіть "Edit HTML"
Вставте ваш код для вставки Asyntai
Натисніть "Save HTML"
Натисніть "Publish", щоб зміни стали активними

Примітка: Якщо ви хочете чатбот на всiх сторiнках, вам потрiбно додати його до глобальної областi, наприклад нижнього колонтитула. Метод Script Manager простiший для встановлення на весь сайт.

Метод 3: Редагування файлів теми (Stencil Themes)

Для розробникiв, якi використовують теми Stencil, ви можете додати код безпосередньо до файлiв теми. Для цього потрiбен доступ до вихiдних файлiв вашої теми.

Використання Панелі керування 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

Важливо: Змiни файлiв теми можуть бути перезаписанi при оновленнi теми. Для постiйного рiшення, яке зберiгається при оновленнях теми, використовуйте метод Script Manager.

Крок 3: Перевірте встановлення

Пiсля додавання коду вiдвiдайте ваш магазин BigCommerce у новiй вкладцi браузера або вiкнi iнкогнiто. Ви повиннi побачити кнопку вiджету чату в правому нижньому кутi вашого магазину. Натиснiть на неї, щоб переконатися, що вона вiдкривається та працює правильно.

Не бачите віджет? Очистiть кеш браузера та спробуйте знову. Якщо ви вносили змiни через редактор тем, переконайтеся, що ви натиснули "Publish", щоб застосувати змiни до вашого живого магазину.

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