Добавянето на ChatLab към Вашия уебсайт позволява на посетителите да взаимодействат с Вашия AI чатбот директно на сайта Ви. Това ръководство обяснява как да получите кода за вграждане и да го добавите към Вашия уебсайт.
Преди да започнете
Създайте и обучете Вашия чатбот, преди да го споделите с клиенти. За инсталацията Ви е необходимо и разрешение за редактиране и публикуване на уебсайта. Вижте Как да създадете първия си чатбот.
Отваряне на раздела Deploy
Изберете Вашия чатбот от основното табло за управление, след което кликнете върху раздела Deploy (Внедряване).
Избор на Вашата платформа
Панелът Select Platform (Избор на платформа) вдясно изброява поддържаните дестинации в две групи: Website (Уебсайт), за поставяне на чатбота на страници под Ваш контрол, и Messaging channels (Канали за съобщения), за свързването му със съществуващ акаунт за разговори. Кликнете върху записа, съответстващ на мястото, където искате да се появи чатботът, за да видите персонализирани инструкции.
Поддържани платформи:
- HTML Code - работи с всеки уебсайт, където можете да редактирате HTML кода
- WordPress - чрез официалния плъгин на ChatLab или ръчно вмъкване на код
- Wix - чрез Settings > Custom Code
- Webflow - чрез Site settings > Custom code, с активиран достъп до персонализиран код за Вашия сайт или работно пространство
- PrestaShop - чрез модула на ChatLab за PrestaShop или ръчно вмъкване на код
- Shopify - чрез файла theme.liquid
- WooCommerce - чрез плъгина за WordPress или ръчно вмъкване на код
- Abicart - чрез Store design > Themes > Site header
- CS-Cart - чрез Design > Layouts > Custom HTML code
Канали за съобщения:
- WhatsApp Business - отговаря в акаунт в WhatsApp Business, вижте WhatsApp за бизнес
- Facebook Messenger - отговаря на съобщенията на Вашата Facebook страница, вижте Интеграция с Facebook Messenger
- Instagram - отговаря на директни съобщения в Instagram, вижте Интеграция с Instagram
Каналите за съобщения не използват кода за вграждане по-долу. Те се свързват с акаунт, който вече притежавате, така че в уебсайта не се поставя код.
Всяка платформа показва подробни инструкции стъпка по стъпка, специфични за съответната интеграция. За платформите със специални помощни статии в долната част се показва връзка View full instructions (Вижте пълните инструкции).
Добавяне чрез HTML Code
Опцията HTML Code работи с всеки уебсайт, където имате достъп до изходния код. Ще видите две опции за вграждане: Widget (Уиджет) и Iframe.
Режим Widget
Разделът Widget показва кода, който добавя икона за чат към Вашия уебсайт. Когато посетителите кликнат върху иконата, се отваря изскачащ прозорец за чат.
- Кликнете върху раздела Widget
- Кликнете върху Copy to clipboard (Копиране в клипборда), за да копирате кода
- Намерете секцията
<head>на Вашия уебсайт - Поставете кода като последен елемент в секцията
<head> - Презаредете браузъра си, за да проверите дали иконата на чатбота се показва
Режим Iframe
Разделът Iframe показва кода, който вгражда чатбота директно в съдържанието на Вашата страница. Чатботът е видим постоянно и може да бъде заобиколен от други елементи на страницата.
- Кликнете върху раздела Iframe
- Кликнете върху Copy to clipboard, за да копирате кода
- Поставете кода на произволно място в HTML кода на Вашия уебсайт, където искате да се показва чатботът
- Коригирайте атрибутите
widthиheight, за да съответстват на Вашето оформление
Не сте сигурни какво да изберете? Прочетете Каква е разликата между уиджет и Iframe? за подробно сравнение.
Добавяне чрез WordPress или WooCommerce
Платформите WordPress и WooCommerce предлагат два метода за инсталиране: Plugin Installation (Инсталиране чрез плъгин, препоръчително) и Manual Installation (Ръчно инсталиране).
Plugin Installation (препоръчително)
- Кликнете върху Get the plugin on WordPress.org, след което инсталирайте и активирайте плъгина на ChatLab.
- Отворете ChatLab в WordPress. За магазин в WooCommerce оставете избрана опцията WooCommerce integration, за да свържете и данните за магазина.
- Кликнете върху Continue, влезте в ChatLab и изберете Вашия чатбот.
- Завършете свързването, отворете Вашия публикуван уебсайт и изпратете тестово съобщение.
Manual Installation
Превключете на Manual Installation и копирайте кода за Widget в заглавната част (header) на Вашия сайт, като използвате плъгин за вмъкване на код. За Iframe използвайте HTML блок в съдържанието на страницата, който разрешава HTML за iframe. Публикувайте страницата и тествайте чата. Инсталирайте уиджета само веднъж - или чрез плъгина, или чрез ръчно вмъкнат фрагмент от код.
За пълни подробности вижте Как да добавите Вашия чатбот към уебсайт на WordPress.
Добавяне чрез други платформи
За Shopify, Wix, Webflow, PrestaShop, Abicart и CS-Cart изберете съответната платформа в панела Select Platform. Всяка платформа показва:
- Кода за вграждане с опции за Widget и Iframe
- Специфични за платформата инструкции за поставяне стъпка по стъпка
- Връзка View full instructions към пълното ръководство за платформата
Съответствие с GDPR
Ако се изисква Вашият чатбот да се зарежда само след получено съгласие за бисквитки, вижте Настройване на ChatLab за съответствие с GDPR за ръководства за интеграция, обхващащи CookieBot, Usercentrics и Google Tag Manager.
Content Security Policy (CSP)
Ако Вашият уебсайт използва хедъри за Content Security Policy, трябва да разрешите домейните на ChatLab, за да може чатботът да функционира. Необходимите директиви зависят от това дали използвате режим Widget, или Iframe.
Режим Widget
Уиджетът зарежда скрипт на Вашата страница, който създава интерфейса за чат. Обединете следните източници на ChatLab със съществуващите си директиви на CSP; не заменяйте политиката за останалата част от Вашия уебсайт:
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com 'unsafe-inline';
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
По подразбиране уиджетът вмъква някои стилове директно в кода (inline). Вашата политика трябва да оторизира и скрипта с вградена конфигурация, например чрез CSP nonce или hash. Разрешете източниците на изображения, използвани от Вашия бот и продуктови карти, в img-src; аудиото и други активирани функции могат да изискват допълнителни източници. За домейн на агенция използвайте домейните от Вашия генериран код.
CSP Safe Mode - избягване на unsafe-inline
Ако политиката за сигурност на Вашия уебсайт не разрешава 'unsafe-inline' в style-src, можете да активирате CSP Safe Mode. Това зарежда таблицата със стилове на контейнера на уиджета от външен CSS файл. Това не оторизира Вашия скрипт с вградена конфигурация и не гарантира, че всеки персонализиран стил и активирана функция отговарят на Вашата политика.
За да го активирате, добавете window.aichatbotCspSafe = true; преди тага за скрипта на ChatLab:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
При активиран CSP Safe Mode тествайте политиката за стилове без 'unsafe-inline'. Примерна начална конфигурация е:
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com;
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
Режим Iframe
Страницата родител трябва да разрешава източника в копирания URL адрес на iframe. За стандартен хостинг от ChatLab добавете следното към съществуващата политика:
frame-src https://api.chatlab.com;