Ha a webhelyed Cloudflare mögött fut, a Yaplet chatet a Cloudflare Zarazzal is felteheted. Ez a Cloudflare eszköze külső szkriptek betöltésére, így a webhelyed kódjához nem kell hozzányúlnod. Felveszel egy Custom HTML eszközt a Yaplet kóddal, és beállítod, hogy minden oldalmegtekintésnél lefusson. Ha a webhelyed forgalma nem a Cloudflare-en keresztül megy, inkább közvetlenül a webhelyedbe illeszd be a kódot, ahogy A Yaplet telepítése cikk leírja.
A Zaraz minden Cloudflare csomagban benne van, fiókonként havi 1 000 000 ingyenes Zaraz eseménnyel. Minden oldalmegtekintés egy eseménynek számít. Ha a fiókod ezt túllépi, és nincs bekapcsolva a Zaraz Paid, a Cloudflare a következő számlázási időszakig kikapcsolja a Zarazt, és vele együtt eltűnik a chat is. A menüpontokat angolul írjuk, ahogy a Cloudflare saját leírásai mutatják, zárójelben a magyar jelentésükkel.
1. Másold ki a Yaplet kódodat
A Yaplet bal oldali menüjében 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 Más weboldal lehetőséget. Másold ki a kódot a kódblokk másolás gombjával.
Ha a kimásolt kód így kezdődik: !function (Yaplet, akkor még nincs körülötte <script> tag. A Zaraznak kellenek ezek a tagek, ezért a 3. lépésben hozzáadod őket.
2. Vegyél fel egy Custom HTML eszközt
- A Cloudflare irányítópultján menj a Tag setup (címkék beállítása) oldalra.
- Ha korábban már vettél fel eszközt, válaszd a Third-party tools (külső eszközök) részt, és kattints az Add new tool (új eszköz hozzáadása) gombra.
- Az eszközkatalógusban válaszd a Custom HTML (egyéni HTML) eszközt, majd a Continue (tovább) gombot.
- Ha a Cloudflare engedélyeket kér az eszközhöz, add meg őket. A Custom HTML eszköznek ezek kellenek ahhoz, hogy szkripteket futtathasson az oldalaidon.
3. Illeszd be a kódot
Állítsd be az eszköz műveletét (action): adj neki nevet, például Yaplet chat, és a Firing Triggers (indító szabályok) mezőben válaszd a Pageview (oldalmegtekintés) szabályt. A HTML Code (HTML-kód) mezőbe illeszd be a Yaplet kódot. A kódnak egy <script> sorral kell kezdődnie, és egy </script> sorral kell végződnie. Ha a kimásolt kód ehelyett így kezdődik: !function (Yaplet, írd elé egy új sorba, hogy <script>, utána pedig egy új sorba, hogy </script>. A kész kód így néz ki:
<script>
(a Yaplet kódod)
</script>Utána kattints a Save (mentés) gombra.
4. Tedd közzé, ha a Zaraz kéri
A Zaraz alapból minden módosítást azonnal élesít, így nincs több teendőd. Ha bekapcsoltad a Preview & Publish Workflow (előnézet és közzététel) módot, a módosítás élesítéséhez kattints a Publish (közzététel) gombra.
5. Nézd meg a webhelyedet
Nyisd meg a webhelyedet egy új böngészőfülön, és frissítsd az oldalt. 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.
Ha nem jelenik meg a chat
- A kód szövegként látszik az oldalakon. Hiányoznak a
<script>tagek: a Zaraz mindent, ami nincs közöttük, szövegként tesz az oldalra. Szerkeszd a műveletet, és add hozzá a tageket. - Egyáltalán semmi sem jelenik meg. Lehet, hogy a Zaraz nem töltődik be. Nézd meg, hogy a domainod forgalma a Cloudflare-en keresztül megy-e, hogy a Zaraz beállításaiban be van-e kapcsolva az Auto-inject script (szkript automatikus beillesztése), és hogy a Custom HTML eszköz be van-e kapcsolva.
- A chat a sütik elfogadására vár. Ha a Zaraz hozzájáruláskezelését használod, és a Custom HTML eszközt egy célhoz (purpose) rendelted, az eszköz csak azután fut le, hogy a látogató elfogadta azt a célt.
- Egyoldalas alkalmazásban (SPA) kétszer töltődik be a chat. Ha a Zaraz beállításaiban be van kapcsolva a Single Page Application support (egyoldalas alkalmazások támogatása), nyisd meg a Custom HTML műveletet, kattints az Add Field (mező hozzáadása) gombra, add hozzá az Ignore SPA (SPA figyelmen kívül hagyása) mezőt, és kapcsold be.
- Egy forgalmas hónap után eltűnt a chat. Lehet, hogy a fiókod elhasználta az ingyenes Zaraz eseményeket. Kapcsold be a Zaraz Paid csomagot a Zaraz plans (Zaraz-csomagok) oldalon, vagy várd meg a következő számlázási időszakot.
- Még mindig a régi oldalt látod. A böngésződ vagy a webhelyed gyorsítótára egy régebbi változatot mutathat. Frissítsd az oldalt, vagy nyisd meg egy privát ablakban.
Mi a következő lépés?
Ha meg szeretnéd tudni, mit csinál a kód, és hol találod a widget azonosítóját, olvasd el ezt: A Yaplet telepítése.