Добавянето на чатбот от ChatLab към Вашия уебсайт в Webflow позволява на посетителите да си взаимодействат с Вашия AI асистент директно на сайта. Това ръководство описва стъпките за вземане на кода за вграждане от ChatLab и поставянето му в Webflow.
Преди да започнете
Преди да започнете, създайте своя чатбот и проверете дали Вашият Webflow сайт или работно пространство (workspace) включва достъп за персонализиран код (custom code). Вижте изискванията на Webflow за персонализиран код. Също така се нуждаете от разрешение за редактиране и публикуване на уебсайта.
Стъпка 1 - Копирайте кода за вграждане (embed) от ChatLab
- Влезте в ChatLab и изберете чатбота, който искате да вградите
- Кликнете върху раздела Deploy (Внедряване), след което изберете Webflow от панела с платформи вдясно
- Изберете Widget за инсталиране в хедъра по-долу. За постоянно видим чат изберете Iframe и следвайте инструкциите за iframe по-долу. Вижте Каква е разликата между уиджет и Iframe? за сравнение
- Кликнете върху Copy to clipboard (Копиране в клипборда)
Стъпка 2 - Добавете кода в Webflow
Добавянето на кода в настройките на сайта (Site Settings) поставя чатбота на всяка страница от Вашия уебсайт в Webflow.
- Отворете проекта си в таблото за управление на Webflow (Webflow Dashboard)
- Отидете на Site settings > Custom code (Настройки на сайта > Персонализиран код)
- Поставете копирания код в секцията Head Code
- Кликнете върху Save Changes (Запазване на промените)
- Публикувайте (Publish) сайта си, за да влязат промените в сила
Добавяне само към една страница
Ако искате чатботът да се показва само на конкретна страница, а не на целия сайт:
- Отворете страницата в Webflow Designer
- Кликнете върху иконата със зъбно колело, за да отворите настройките на страницата (Page Settings)
- Превъртете надолу до секцията Custom Code (Персонализиран код)
- Поставете кода в полето Head Code
- Запазете и публикувайте сайта си
Добавяне на постоянно видим iframe
В Webflow Designer поставете елемент Code Embed там, където искате да се вижда чатботът, поставете фрагмента за Iframe от ChatLab и задайте неговата ширина и височина според оформлението си. Запазете и публикувайте сайта. Мястото на този iframe е в съдържанието на страницата, а не в Head Code.
Проверка на инсталацията
След публикуването отворете Вашия уебсайт в Webflow в браузър. Трябва да видите иконата за чат да се появява в ъгъла на страницата (за режим widget) или прозореца на чата, вграден на страницата (за режим iframe). Кликнете върху иконата, за да отворите чата, и изпратете тестово съобщение, за да се уверите, че всичко работи правилно.