Widget beillesztése a weboldalba

A |related| widget megjelenését a kód átadása előtt minden esetben testre szabjuk az adott weboldal arculatának megfelelően, annak stíluselemeit felhasználva. A cikk tartalmi része után közvetlenül elhelyezett widget a leghatékonyabb, de minden esetben egyeztetjük a kidóval a widget pozícióját az oldalon belül.

A beillesző kódot a HTML dokumentumon belül a megfelelő szekcióba vagy elembe kell elhelyezni. Így biztosítható, hogy a tartalomajánló widget a weboldal látogatói számára pontosan ott jelenik meg, ahova az tervezve lett, harmonizálva a weboldal többi tartalmával és elrendezésével.  

Amennyiben több widget is tervezve lett az adott oldalra, mindegyiket külön-külön kell a megfelelő helyre beilleszteni.

Kérés esetén szívesen küldünk látványtervet is, így még a beillesztés előtt egyeztetni tudjuk a megjelenést.

Az esetleges problémák elkerülése miatt, kérjük, a beillesztő kódot ne módosítsátok, valamint egyedi CSS beállításokkal ne írjátok felül a megjelenését. Amennyiben eltérést tapasztaltok vagy később módosul a weboldal designja, jelezzétek a [email protected] címen és rövid időn belül beigazítjuk a stílusokat.

Next.js, Nuxt és SPA-oldalak esetén

Ha a weboldal React/Next.js, Vue/Nuxt vagy más, dinamikusan felépülő keretrendszert használ, a widget scriptjét az érintett komponens kliensoldali felépülése után illesszétek be, amikor a widget divje már a DOM-ban van. Szerveroldali renderelés esetén az indítással várjátok meg az érintett komponens hidratálását is.

Teljes oldalújratöltés nélküli navigáció esetén a widget nem érzékeli automatikusan az oldalváltást. A korábbi widget lecserélésekor először annak teljes DOM-elemét távolítsátok el, majd hozzatok létre egy új, üres widgetdivet az átadott attribútumokkal, és csak ezután illesszétek be újra a scriptet. A meglévő div tartalmának kiürítése önmagában nem elegendő: ha megmarad rajta az inicializáláskor hozzáadott data-init="1" attribútum, a script kihagyja az elemet.

Egyedi keretrendszeres beillesztésnél kérdés vagy probléma esetén keressetek minket, és segítünk az integráció pontosításában.