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

Покрокова iнструкцiя для магазинiв 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н мiстить ваш особистий ID вiджета.

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

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

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

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

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

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

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

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

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

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

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

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

Використання Панелi керування BigCommerce

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

Використання Stencil CLI (локальна розробка)

Якщо ви розробляєте локально з Stencil CLI:

Вiдкрийте локальнi файли вашої теми
Перейдiть до templates/components/common/footer.html
Додайте ваш код для вставки Asyntai перед закриваючими тегами
Вiдправте змiни за допомогою stencil push

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

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

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

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

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