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

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

Платформа:

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

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

<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>

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

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

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

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

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

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

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

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

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

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

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

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

Для розробників, які використовують теми 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 у новій вкладці браузера або вікні інкогніто. Ви повинні побачити кнопку віджету чату в правому нижньому куті вашого магазину. Натисніть на неї, щоб переконатися, що вона відкривається та працює правильно.

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

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