A Webflow Site settings (webhely-beállítások) részében van egy beépített egyéni kód szakasz. Ha a Yaplet kódot a Footer code (lábléc kód) részbe illeszted, a widget az oldalad minden közzétett lapján megjelenik — nincs szükség bővítményekre vagy kiegészítőkre.
Az egyéni kódhoz fizetős Webflow Site plan (webhelycsomag, Basic vagy magasabb) vagy fizetős Workspace plan (munkaterület-csomag: Core, Growth, Agency vagy Freelancer) kell. Ingyenes Starter munkaterületen lévő ingyenes Starter oldalon nem érhető el. A Webflow felülete angol nyelvű, ezért a menüpontokat angolul írjuk, ahogy a képernyőn látod, zárójelben a jelentésükkel.
1. Szerezd meg a Yaplet kódodat
Lépj be a Yaplet vezérlőpultra, és menj a Márka → (a márkád) → Chat widget → Telepítés útvonalra. Ha a fül megkérdezi, min fut a weboldalad, válaszd a Webflow lehetőséget. Másold ki a kódot a kódblokk másolás gombjával. Ha előbb meg szeretnéd érteni, mit csinál, olvasd el: A Yaplet telepítése.
A Webflow egyéni kód mezői <script> tagek közé tett JavaScriptet várnak, ezért a 3. lépésben beillesztett kódnak is ilyen tagek között kell lennie.
2. Nyisd meg a Webflow Site settings oldalát
A Webflow irányítópultján menj az oldalad Site settings (Webhely-beállítások) oldalára.
3. Illeszd be a kódot a Footer code részbe
Nyisd meg a Custom code (Egyéni kód) fület. A Footer code (Lábléc kód) részbe illeszd be a Yaplet kódot. A beillesztett kódnak egy <script> sorral kell kezdődnie és egy </script> sorral kell végződnie; ha amit kimásoltál, ehelyett így kezdődik: !function (Yaplet, akkor írd be elé egy új sorba, hogy <script>, utána pedig egy új sorba, hogy </script>. A Webflow ezt a kódot minden oldalon közvetlenül a záró </body> tag elé teszi.
Kattints a Save changes (Változtatások mentése) gombra.
4. Tedd közzé az oldaladat
Kattints a Publish (Közzététel) gombra, jelöld be a domain(eke)t, ahová közzé akarod tenni, majd kattints a Publish to selected domains (Közzététel a kiválasztott domainekre) gombra. Az egyéni kód hatását a Webflow előnézetében is látod, de a látogatóknak csak azokon a domaineken él, ahová közzétetted.
5. Ellenőrizd, hogy a widget megjelenik-e
Nyisd meg a közzétett oldaladat egy új böngészőfülön, és frissítsd. A Yaplet chat gombja megjelenik a jobb alsó sarokban. Kattints rá, és nézd meg, hogy megnyílik-e a chat.
A teljes ellenőrzőlistát itt találod: Telepítés ellenőrzése.
A widget hozzáadása csak egy oldalhoz
Ha a Yapletet csak egy adott oldalon szeretnéd megjeleníteni az egész oldal helyett:
- A Webflow Designerben vidd az egeret az oldal fölé a Pages (Oldalak) panelen.
- Kattints az oldal neve melletti Page settings (Oldalbeállítások) ikonra.
- Görgess le a Custom code (Egyéni kód) részhez.
- Illeszd be a Yaplet kódot a
<script>és</script>soraival együtt a Before </body> tag (a </body> tag előtt) mezőbe, majd mentsd a változtatásokat. - Tedd közzé az oldaladat.
Hibaelhárítás
- A widget nem jelenik meg közzététel után — Az egyéni kód csak azokon a domaineken él, ahová közzétetted az oldalt. Ellenőrizd, hogy az egyéni kód mentése után közzétetted-e az oldalt arra a domainre, amelyiket nézed.
- A kód szövegként látszik az oldalaidon — Hiányoznak a
<script>tagek. Tedd őket a Yaplet kód köré a Footer code részben, mentsd, és tedd közzé újra az oldalt. - Webflow ingyenes csomag — Ingyenes Starter munkaterületen lévő ingyenes Starter oldalon nincs egyéni kód. A használatához vegyél fizetős Site plant az oldalhoz, vagy válts fizetős Workspace planre.
- A widget átfed más elemekkel — Ha az oldal jobb alsó sarkában egy másik rögzített pozíciójú elem található, az lefedheti a Yaplet indítógombját. Módosítsd az ütköző elem pozícióját, változtasd meg az indítógomb pozícióját a widget Megjelenés fülének Indító szakaszában, vagy lépj kapcsolatba az ügyfélszolgálattal az indítógomb áthelyezéséhez.