Как да добавите Asyntai AI чатбот към BigCommerce

Ръководство стъпка по стъпка за BigCommerce магазини

Платформа:

Стъпка 1: Вземете вашия код за вграждане

Първо, отидете във вашето табло на Asyntai и превъртете надолу до секцията „Embed Code“. Копирайте вашия уникален код за вграждане, който ще изглежда така:

<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
- Описание: AI чат уиджет (по избор)
- Позиция: Footer
- Местоположение: Всички страници
- Категория на скрипта: Functional
- Тип на скрипта: 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 теми)

За разработчици, използващи 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 магазин в нов таб на браузъра или в прозорец инкогнито. Трябва да видите бутона на чат уиджета в долния десен ъгъл на магазина. Натиснете го, за да се уверите, че се отваря и работи правилно.

Не виждате уиджета? Изчистете кеша на браузъра и опитайте отново. Ако сте направили промени чрез Theme Editor, уверете се, че сте натиснали "Publish", за да приложите промените към живия магазин.

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