Добавянето на ChatLab към Вашия уебсайт позволява на посетителите да взаимодействат с Вашия AI чатбот директно на сайта Ви. Това ръководство обяснява как да вземете кода за вграждане и да го добавите към Вашия уебсайт.
Отваряне на раздела Deploy
Изберете Вашия чатбот от главното табло за управление, след което кликнете върху раздела Deploy (Внедряване).
Избор на Вашата платформа
Панелът Select Platform (Избор на платформа) вдясно показва всички поддържани платформи. Кликнете върху платформата, която съответства на Вашия уебсайт, за да видите персонализирани инструкции за инсталиране.
Поддържани платформи:
- HTML Code - работи с всеки уебсайт, в който можете да редактирате HTML кода
- WordPress - чрез официалния плъгин на ChatLab или ръчно вмъкване на код
- Wix - чрез Settings > Advanced > Custom Code
- Webflow - чрез Site Settings > Custom Code (изисква платен план на Webflow)
- PrestaShop - чрез модула на ChatLab за PrestaShop или ръчно вмъкване на код
- Shopify - чрез файла theme.liquid
- WooCommerce - чрез плъгина за WordPress или ръчно вмъкване на код
- Abicart - чрез Store design > Themes > Site header
- CS-Cart - чрез Design > Layouts > Custom HTML code
Всяка платформа показва подробни инструкции стъпка по стъпка, специфични за съответната интеграция. За платформи със специализирани помощни статии в долната част се появява връзка 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 (Ръчно инсталиране).
Инсталиране чрез плъгин (препоръчително)
- Кликнете върху Get WordPress Plugin (Вземете плъгина за WordPress), за да отворите хранилището за плъгини на WordPress
- Инсталирайте и активирайте плъгина "ChatLab - AI Chatbot"
- Отидете на страницата с настройки на плъгина в администраторския панел на WordPress
- Копирайте Вашия Bot ID (Идентификатор на бота) от ChatLab с помощта на бутона Copy
- Поставете Bot ID в настройките на плъгина и запазете
- Проверете дали чатботът се появява на Вашия уебсайт
Ръчно инсталиране
Превключете към раздела Manual Installation за инсталиране чрез код:
- Инсталирайте плъгина "Insert Headers and Footers" в WordPress
- Отидете в Settings > Insert Headers and Footers
- Копирайте кода от ChatLab и го поставете в секцията Header
- Запазете промените и презаредете Вашия уебсайт
За пълни подробности вижте Как да добавите Вашия чатбот към уебсайт на WordPress.
Добавяне чрез други платформи
За Shopify, Wix, Webflow, PrestaShop, Abicart и CS-Cart изберете съответната платформа в панела Select Platform. Всяка платформа показва:
- Кода за вграждане с опции за Widget и Iframe
- Специфични за платформата инструкции стъпка по стъпка за поставяне на кода
- Връзка View full instructions към пълното ръководство за съответната платформа
Съответствие с GDPR
Ако е необходимо Вашият чатбот да се зарежда само след получено съгласие за бисквитки, вижте Настройване на ChatLab за съответствие с GDPR за ръководства за интеграция с CookieBot, Usercentrics и Google Tag Manager.
Политика за сигурност на съдържанието (CSP)
Ако Вашият уебсайт използва заглавки за Content Security Policy (Политика за сигурност на съдържанието), трябва да разрешите домейните на ChatLab, за да може чатботът да функционира. Необходимите директиви зависят от това дали използвате режим Widget, или Iframe.
Режим Widget
Уиджетът зарежда скрипт на Вашата страница, който създава интерфейса на чата. Добавете тези директиви към Вашата 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), поради което в style-src се изисква 'unsafe-inline'.
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' и Вашата CSP заглавка може да използва:
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
Iframe зарежда целия чатбот от един-единствен URL адрес, поради което е необходима само една директива:
frame-src https://api.chatlab.com;