EmojiSup Widget

Wilt u zo'n emojibalk op uw eigen site?

De gratis reactiewidget staat er in een minuut op. Zonder registratie, zonder account, aan onze kant hoeft u niets in te stellen.

Installatie

Voeg in het HEAD-gedeelte van uw site toe:

<script src="https://api.emojisup.org/widget.js?4"></script>

Voeg in het BODY-gedeelte toe, op de plek waar de balk moet komen:

<div data-emojisup></div>

Daarmee is de installatie klaar. Zodra het script geladen is, koppelt het zijn stylesheet, loopt het de pagina na op elementen met het attribuut data-emojisup en tekent het in elk daarvan een reactiebalk.

Kenmerken van de widgets

Het kenmerk van een widget wordt afgeleid van het adres van de pagina, dus op één pagina kunnen er meerdere staan en elke pagina houdt haar eigen tellers bij. Campagneparameters als utm_source of fbclid tellen niet mee, zodat een bezoeker die via een advertentie binnenkomt dezelfde tellers ziet als iedereen.

U kunt het kenmerk ook zelf vastleggen:

<div data-emojisup id="my-article-42"></div>

Verandert het kenmerk, dan begint de widget opnieuw en staan de tellers weer op nul.

Instellingen

Elke instelling is een attribuut van hetzelfde element en mag worden weggelaten.

data-emojisup-set — toont alleen de reacties die u opsomt, gescheiden door komma's:

<div data-emojisup data-emojisup-set="👍,❤️,🔥,🤣"></div>

data-emojisup-theme — kiest de kleuren: light standaard, dark voor donkere achtergronden, auto volgt de systeeminstelling van de bezoeker.

data-emojisup-size — bepaalt de maat: s, m standaard of l.

data-emojisup-align — lijnt de rij uit: left, center of right. Zonder dit attribuut verdelen de reacties zich over de volle breedte van het blok.

<div data-emojisup data-emojisup-theme="dark" data-emojisup-size="l" data-emojisup-align="center"></div>

En hier dezelfde widget met donker thema, vier reacties en gecentreerd:

Inhoud die later binnenkomt

Staat de widget in inhoud die pas later wordt geladen, roep dit dan aan zodra die inhoud er staat:

<script>
    emojiSup.update();
</script>

De methode loopt de pagina opnieuw na en start nieuwe widgets. Wilt u dat een widget zijn tellers niet meer ververst, roep dan emojiSup.destroy() aan.

Wat de widget bewaart

De widget zet één cookie, ev_user_id, een jaar geldig. Daarin staat een willekeurig kenmerk en verder niets: daardoor onthoudt de widget welke reactie deze bezoeker koos, zodat die keuze een herlaadbeurt overleeft. Bij elk verzoek stuurt de widget het adres van de pagina waarop de balk staat, want zo blijven de tellers per pagina gescheiden. Geen namen, geen e-mailadressen, geen formuliergegevens.

De tellers worden ververst zolang het tabblad open en in beeld is. In een tabblad op de achtergrond vraagt de widget niets meer aan de server, en na een paar minuten zonder kliks schakelt hij vanzelf terug.

Vragen

Is het echt gratis? Ja, en er valt geen account aan te maken.

Hoeveel widgets passen er op één pagina? Zoveel u nodig hebt. Geef elk een eigen id.

Kan een bezoeker zijn reactie wijzigen? Ja. Per widget telt één reactie per bezoeker: op een andere klikken verplaatst de stem, nog eens op dezelfde klikken neemt hem terug.

Overleven de tellers een nieuw ontwerp? Ja, zolang het adres van de pagina of de id die u zelf gaf hetzelfde blijft.

Is jQuery nodig? Nee. Het script heeft geen afhankelijkheden en weegt ongeveer 45 KB.