Přidání chatbota ChatLab na váš web Webflow umožní návštěvníkům komunikovat s vaším AI asistentem přímo na stránkách. Tento průvodce vás provede kroky k získání kódu pro vložení z platformy ChatLab a jeho vložení do Webflow.
Než začnete
Než začnete, vytvořte si chatbota a zkontrolujte, zda váš web nebo workspace ve Webflow zahrnuje přístup k vlastnímu kódu (custom code). Podívejte se na požadavky Webflow na vlastní kód. Potřebujete také oprávnění k úpravám a publikování webu.
Krok 1 - Zkopírujte kód pro vložení (embed) z ChatLabu
- Přihlaste se do ChatLabu a vyberte chatbota, kterého chcete vložit
- Klikněte na záložku Deploy (Nasazení) a poté v panelu platforem vpravo vyberte Webflow
- Pro instalaci do záhlaví níže vyberte možnost Widget. Pro neustále viditelný chat zvolte Iframe a postupujte podle níže uvedených pokynů pro iframe. Porovnání najdete v článku Jaký je rozdíl mezi widgetem a Iframem?
- Klikněte na Copy to clipboard (Kopírovat do schránky)
Krok 2 - Přidejte kód do Webflow
Přidáním kódu v nastavení webu (Site Settings) umístíte chatbota na všechny stránky svého webu na Webflow.
- Otevřete svůj projekt v administračním panelu Webflow (Webflow Dashboard)
- Přejděte do Site settings > Custom code (Nastavení webu > Vlastní kód)
- Vložte zkopírovaný kód do sekce Head Code (Kód v záhlaví)
- Klikněte na Save Changes (Uložit změny)
- Web publikujte (Publish), aby se změny projevily
Přidání pouze na jednu stránku
Pokud chcete chatbota umístit jen na konkrétní stránku a ne na celý web:
- Otevřete stránku v nástroji Webflow Designer
- Kliknutím na ikonu ozubeného kola otevřete nastavení stránky (Page Settings)
- Sjeďte dolů k sekci Custom Code (Vlastní kód)
- Vložte kód do pole Head Code (Kód v záhlaví)
- Stránku uložte a publikujte
Přidání trvale viditelného iframe
V nástroji Webflow Designer vložte prvek Code Embed (Vložení kódu) na místo, kde chcete mít chatbota, vložte fragment kódu Iframe z ChatLabu a upravte jeho šířku a výšku podle rozvržení stránky. Stránku uložte a publikujte. Iframe patří do obsahu stránky, nikoli do pole Head Code (Kód v záhlaví).
Ověření instalace
Po publikování otevřete svůj web Webflow v prohlížeči. V rohu stránky by se měla zobrazit ikona chatu (v režimu widgetu) nebo okno chatu vložené přímo na stránce (v režimu iframe). Kliknutím na ikonu otevřete chat a odešlete testovací zprávu, abyste si ověřili, že vše funguje správně.