Bannerek | Yaplet HU

Hogyan működnek a bannerek

A bannerek közvetlenül a weboldaladon jelennek meg, amikor a trigger feltételek teljesülnek. Beleilleszkednek a weboldalad dizájnjába, és tartalmazhatnak szöveget, stílusbeállításokat és interaktív elemeket, például gombot vagy bezárás vezérlőt.

Banner lista

A banner lista az összes banneredet vizuális kártyaként jeleníti meg rácsos elrendezésben. Minden kártya mutatja:

Egy élő szín előnézet csíkot, amely a banner tényleges színeit tükrözi
A banner nevét és a hozzá tartozó widgetet
Egy Közzétéve/Piszkozat jelvényt — kattints rá közvetlenül a listából a banner állapotának váltásához
A banner létrehozási dátumát
A kártya láblécében a Prioritás számot két nyíl gombbal — föléjük húzva a Prioritás növelése és a Prioritás csökkentése felirat jelenik meg —, mellettük egy Szerkesztés gombot; a Másolás és a Törlés a ⋯ menüben van

Banner létrehozása

Kattints az Új Banner gombra a létrehozási ablak megnyitásához. Kezdheted a nulláról, vagy választhatsz előre elkészített sablont (a sablonok neve a felületen angolul jelenik meg):

Üres Banner

Kezdj egy üres bannerrel, és alakítsd a saját igényeid szerint.

Server Issue

Sárga beágyazott banner „Contact us” chat művelettel. Minden oldalmegtekintéskor aktiválódik.

New Feature

Kék beágyazott banner „Learn more” URL művelettel. A munkamenet kezdetekor aktiválódik, látogatónként egyszer.

Special Offer

Zöld beágyazott banner „Claim offer” URL művelettel. A munkamenet kezdetekor aktiválódik, látogatónként egyszer.

Important Notice

Piros beágyazott banner bezárás gomb és művelet nélkül. Minden oldalmegtekintéskor aktiválódik.

Info Tip

Indigó beágyazott banner „Show me” URL művelettel. A munkamenet kezdetekor aktiválódik, látogatónként egyszer.

A sablonok előre kitöltik mind a vizuális beállításokat, mind a trigger feltételeket, így azonnal használható bannert kapsz, amelyet tovább szabhatsz testre.

Banner szerkesztő

A banner szerkesztő kétpaneles elrendezést használ asztali gépen: bal oldalon a beállítások panel, jobb oldalon az élő előnézet. Mobilon az előnézet ragadós csíkként jelenik meg a tetején, alatta a teljes beállítási űrlappal.

A felső navigációs sáv mutatja a banner nevét, egy Éles/Vázlat állapot jelvényt, valamint a riportok és mentés gombokat.

A beállítások panel ikonnal jelölt szekciókra oszlik, ebben a sorrendben — Általános, Trigger, Tartalom, Háttér, Elrendezés, Szegély és Művelet —, így minden mezőcsoport vizuálisan elválik és könnyebben átlátható.

Bannerek aktiválása

A Trigger szekció közvetlenül az Általános alatt található. Ha nincsenek triggerek beállítva, egy figyelmeztető doboz jelenik meg: „Nincs trigger beállítva — Ez a banner egyetlen látogatónak sem fog megjelenni.” Ha vannak triggerek, azt mutatja, hány feltétel van beállítva. Bármelyikre kattintva megnyílik a trigger konfigurációs ablak.

A triggerek konfigurálásáról részletes információkat a trigger dokumentációnkban találsz.

Trigger konfiguráció

Ismerkedj meg az összes elérhető trigger opcióval és azok konfigurálásával a bannereidhez.

Banner beállítások

Általános

Név

string required

Leíró cím a banneredhez, amelyet a vezérlőpulton használsz.

Widget

string required

Melyik chat widgethez tartozik ez a banner — és így melyik weboldalon jelenik meg. Egy márkához legfeljebb egy chat widget tartozik, tehát a gyakorlatban a márkát választod ki.

Közzétéve

boolean

Aktív-e a banner, és megjeleníthető-e a látogatók számára.

Tartalom

string required

A banner fő szöveges tartalma, HTML formázást támogatva szövegszerkesztőn keresztül.

Háttér

A Háttér szekció egy Egyszínű / Színátmenet fülkapcsolóval kezdődik — ugyanaz a minta, amit a widget Indító gombnál is használunk. Válaszd ki a módot, és csak az adott módhoz tartozó mezők jelennek meg alatta.

Egyetlen háttérszín a bannerhez.

Szín

string

A banner háttérszíne.

:: :::

Több színből álló lineáris színátmenet. Minden szín egy stop, amelyek sorrendben, a megadott szög mentén keverednek össze.

1. szín … N. szín

string

2 és 5 közötti színstop. Új stopot a Szín hozzáadása gombbal adsz hozzá; a melletti × gombbal távolíthatsz el egy stopot (a 2 stopos minimum kötelező — ez alá nem mehetsz).

Szög

number

Elforgatási szög fokokban (0–360). Szerkesztheted a számbeviteli mezőben, húzhatod a csúszkát, vagy kattinthatsz a csúszka alatti 0° / 90° / 180° / 270° / 360° előre beállított jelzők egyikére.

Ha visszaváltasz Egyszínű módra, a színátmenet stopjai megmaradnak, így a színeid elvesztése nélkül válthatsz a két mód között. A szöveg színe automatikusan igazodik a színátmenet középső színéhez az optimális kontraszt érdekében.

Elrendezés

Stílus

select required

Válaszd ki a banner megjelenítési stílusát (lásd a Megjelenítési stílusok részt alább).

Szegély lekerekítés

number

Csak akkor jelenik meg, ha a Stílus értéke Lebegő kapszula — beállítja a lekerekített sarkokat (hagyd üresen az alapértelmezetthez).

Bezárás gomb megjelenítése

boolean

Engedélyezi, hogy a látogatók egy × gombbal a jobb felső sarokban bezárják a bannert.

Megjelenítési stílusok

A bannerek három különböző megjelenítési stílust kínálnak, mindegyik saját pozicionálással és viselkedéssel:

Teljes szélességű bannerek, amelyek a body tag tetejéhez kerülnek hozzáfűzésre. Lenyomják a nem rögzített elemeket és együtt görgetődnek az oldal tartalmával - görgetéskor eltűnnek, mint a normál oldalelemek.

Amikor aktív, a body tag megkapja a yaplet-b-shown CSS osztályt.

Teljes szélességű bannerek, amelyek a képernyő tetejéhez tapadnak görgetéskor is. Ez a stílus nem próbálja lenyomni az oldal tartalmát - a meglévő elemek tetején jelenik meg. Tökéletes rögzített navigációs sávokkal vagy fejlécekkel rendelkező oldalakhoz.

yaplet-b-shown és yaplet-b-fi CSS osztályokat ad a body-hoz. Szükség esetén a --yaplet-margin-top CSS változóval tolhatod le a rögzített fejléceket.

Középen elhelyezett, kapszula alakú bannerek, amelyek nem feszítik ki a teljes képernyőszélességet. A lebegő teljes szélességűhöz hasonlóan a tetejéhez tapadnak, de vizuálisan elkülönülnek és kissé eltávolodnak a képernyő szélétől.

yaplet-b-shown és yaplet-b-f CSS osztályokat ad a body-hoz. Szükség esetén a --yaplet-margin-top CSS változóval tolhatod le a rögzített fejléceket.

A bannerek automatikusan CSS osztályokat és CSS változókat adnak az oldaladhoz megjelenítéskor, lehetővé téve az elrendezés szükség szerinti módosítását. Használd ezeket a weboldalad elemeinek és a banner pozicionálás kölcsönhatásának testreszabásához.

Szegély

Szegély megjelenítése

boolean

Keretet rajzol a banner köré. A szélesség és szín mezők bekapcsolás után jelennek meg.

Szegély szélesség

number

Szegély vastagsága pixelben.

Szegély szín

string

A keret színe.

Művelet

Konfiguráld, mi történjen, amikor a látogatók interakcióba lépnek a bannereddel:

Nincs művelet

A banner csak információt jelenít meg, interaktív elemek nélkül.

Beszélgetés indítása

Chat beszélgetést nyit meg a widgetben. Opcionálisan választhatsz egy munkafolyamatot, amellyel induljon — a lista a kiválasztott widget aktív egyedi munkafolyamatait tartalmazza, a Nincs pedig üresen indítja a beszélgetést.

Felmérés indítása

Elindítja a widget egyik közzétett felmérését.

Visszajelzési űrlap megjelenítése

Megjeleníti az egyik beérkező űrlapodat. Az űrlapok azon a táblán élnek, amelyre jegyet nyitnak — Kommunikáció → Ticketek → (tábla) → Űrlapok.

URL megnyitása

Külső weboldalra vagy oldalra irányítja a látogatókat.

Tudásbázis cikk megjelenítése

Megjelenít egy közzétett cikket abból a tudásbázisból, amelyik éppen élőben van a márka webcímén — abból, amelyiket a Megjelenítés itt: … művelettel választottál ki a Márka → (a márkád) → Tudás oldalon. A művelet a saját címedet írja ki, ha a márkának már van ilyen; addig Megjelenítés a webcímeden néven látod.

Hír cikk megjelenítése

Megmutatja a widget egyik közzétett hírcikkét.

Művelet testreszabás

Interaktív elemeket tartalmazó műveletekhez:

Művelet szöveg

string

A művelet gombon megjelenő szöveg.

Művelet szín

string

Egyéni szín a művelet gombhoz (hagyd üresen az alapértelmezett stílus használatához).

A művelet gombok öröklik a banner szövegszín logikáját - automatikusan megfelelő kontrasztszíneket használnak a háttérválasztásod alapján.

Előnézet és tesztelés

A szerkesztőben lévő élő előnézet pontosan megmutatja, hogyan fog kinézni a bannered a weboldaladon. Asztali gépen egy böngésző makettben jelenik meg a beállítások panel mellett. Módosíthatod az előnézet háttérszínét, hogy különböző oldal hátterekkel tesztelj, és biztosítsd a megfelelő kontrasztot.

Elköteleződési kampányok tesztelése

Tudd meg, hogyan tesztelheted biztonságosan a kampányaidat, mielőtt éles látogatókhoz jutnának.

Mindig teszteld a bannereidet különböző eszközökön és képernyőméreteken, különösen lebegő stílusok vagy színátmenetek használatakor, hogy biztosítsd a helyes megjelenítést minden látogató számára.