A ChatLab chatbot hozzáadása a Webflow-weboldalához lehetővé teszi a látogatók számára, hogy közvetlenül az Ön webhelyén lépjenek kapcsolatba a mesterséges intelligenciával működő asszisztensével. Ez az útmutató bemutatja azokat a lépéseket, amelyekkel beszerezheti a beágyazási kódot a ChatLabből, majd beillesztheti azt a Webflow-ba.
Mielőtt elkezdené
Mielőtt hozzálátna, hozza létre a chatbotját, és ellenőrizze, hogy a Webflow-webhelye vagy munkaterülete tartalmazza-e az egyéni kódok hozzáadásának lehetőségét. Lásd a Webflow egyéni kódokra vonatkozó követelményeit. Ezenkívül jogosultságra lesz szüksége a webhely szerkesztéséhez és közzétételéhez is.
1. lépés - A beágyazási kód másolása a ChatLabből
- Jelentkezzen be a ChatLab felületére, és válassza ki a beágyazni kívánt chatbotot
- Kattintson a Deploy (Közzététel) fülre, majd válassza ki a Webflow lehetőséget a jobb oldali platformpanelen
- Válassza a Widget (Widget) lehetőséget az alábbi fejléc-telepítéshez. Ha folyamatosan látható chatet szeretne, válassza az Iframe (Iframe) lehetőséget, és kövesse az alábbi iframe-utasításokat. Az összehasonlításhoz tekintse meg a Mi a különbség a widget és az Iframe között? című cikket
- Kattintson a Copy to clipboard (Másolás a vágólapra) gombra
2. lépés - A kód hozzáadása a Webflow-hoz
Ha a kódot a Site Settings (Webhelybeállítások) menüpontban adja hozzá, a chatbot a Webflow-webhely minden oldalán meg fog jelenni.
- Nyissa meg a projektjét a Webflow Dashboard felületén
- Lépjen a Site settings > Custom code (Webhelybeállítások > Egyéni kód) menüponthoz
- Illessze be a másolt kódot a Head Code (Fejléc kód) szakaszba
- Kattintson a Save Changes (Módosítások mentése) gombra
- Kattintson a Publish (Közzététel) gombra a webhely közzétételéhez, hogy a módosítások érvénybe lépjenek
Hozzáadás csak egyetlen oldalhoz
Ha azt szeretné, hogy a chatbot a teljes webhely helyett csak egy adott oldalon jelenjen meg:
- Nyissa meg az oldalt a Webflow Designer felületén
- Kattintson a fogaskerék ikonra a Page Settings (Oldalbeállítások) megnyitásához
- Görgessen le a Custom Code (Egyéni kód) szakaszhoz
- Illessze be a kódot a Head Code mezőbe
- Mentse a módosításokat, és tegye közzé a webhelyét
Folyamatosan látható iframe hozzáadása
A Webflow Designerben helyezzen el egy Code Embed (Kódbeágyazás) elemet oda, ahol a chatbotot látni szeretné, illessze be a ChatLabből származó Iframe kódrészletet, majd állítsa be a szélességét és a magasságát az elrendezésnek megfelelően. Mentse a módosításokat, és tegye közzé a webhelyet. Az iframe az oldal tartalmához tartozik, nem a Head Code szakaszba.
A telepítés ellenőrzése
A közzététel után nyissa meg a Webflow-webhelyét egy böngészőben. Látnia kell a chat ikont az oldal sarkában (widget mód esetén), vagy magát a beágyazott chatablakot az oldalon (iframe mód esetén). Kattintson az ikonra a chat megnyitásához, és küldjön egy tesztüzenetet, hogy megbizonyosodjon a megfelelő működésről.