> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # πŸ“’ Aankondigingsbalktypen uitgelegd > ℹ️ **Note:** Dit artikel is automatisch vertaald met behulp van AI en kan onjuistheden bevatten. Als er iets mis is, neem dan contact op met ons ondersteuningsteam. Hoppy Announcement Bar biedt vier verschillende manieren om berichten weer te geven in je storefront. Elk type gedraagt zich anders, ondersteunt verschillende contentconfiguraties en is ontworpen voor specifieke use cases. Door het juiste type vroeg in je setup te kiezen, voorkom je rework en zorg je ervoor dat je aankondiging zich precies zo gedraagt als je verwacht in de live store. --- # **⚠️ Voordat je begint** Het aankondigingstype wordt geselecteerd in het tabblad **Content (Inhoud)** bij het maken of bewerken van een aankondiging. Je kunt op elk moment van type wisselen, maar houd rekening met het volgende: * Sommige velden verschijnen of verdwijnen afhankelijk van het geselecteerde type * Contentitems kunnen worden ingekort of uitgebreid bij het wisselen tussen bepaalde types * Ontwerp- en plaatsingsinstellingen blijven voor alle types gedeeld ℹ️ Aankondigingstype is **niet** hetzelfde als **placement**. **Placement** bepaalt *waar* de balk verschijnt. **Type** bepaalt *hoe* de balk zich gedraagt. --- # **πŸ“‹ De vier aankondigingstypes** --- ## **1️⃣ Eenvoudige aankondiging (Simple)** Het **Simple**-type toont één statisch bericht. Dit is de meestgebruikte indeling omdat deze eenvoudig is en voor bijna elke use case werkt. ### **Wat het doet** * Toont één aankondiging met een **Title (titel)**, **Subheading (ondertitel)** en optionele call-to-action * Blijft statisch op de pagina staan totdat de klant wegnavigeert of de balk sluit * Ondersteunt alle CTA-types: knop, klikken op de hele balk, coupon, trigger event of geen CTA ### **Beschikbare contentvelden** * **Title** β€” Het hoofdbericht. Ondersteunt rich text-opmaak. * **Subheading** β€” Een tweede regel onder de titel. * **Call to action type** β€” Kies hoe klanten met de balk interacteren. ### **CTA-gedrag** | CTA Type | Gedrag | | ----- | ----- | | **No call to action** | Alleen bericht, geen klikbare elementen. | | **Button** | Een losse knop die naar elke URL linkt. | | **Make entire bar clickable** | De hele balk wordt een link. Klikken overal navigeert naar de geconfigureerde URL. | | **Coupon** | Toont een couponcode met een optionele knop om naar het klembord te kopiΓ«ren. | | **Trigger App Event** | Stuurt een aangepast event uit waar andere apps naar kunnen luisteren. Handig voor het openen van modals of het activeren van workflows. | ℹ️ Wanneer **Trigger App Event** is geselecteerd, verschijnt een extra veld **Trigger ID**. Deze ID moet overeenkomen met de eventnaam die is geconfigureerd in de ontvangende app. ### **Best geschikt voor** * Store-wide sale-aankondigingen * Updates van verzendbeleid * Aanbiedingen voor beperkte tijd * Algemene promoties --- ## **2️⃣ Lopende-tekst aankondiging (Running)** Het **Running**-type creΓ«ert een continue horizontaal scrollende ticker β€” vergelijkbaar met een nieuwsticker. De titeltekst animeert in een lus over de balk. ### **Wat het doet** * Toont één titelbericht in een soepele, eindeloze scroll * Richting en snelheid zijn volledig configureerbaar * Het veld **Subheading** is verborgen omdat de indeling is gebaseerd op één enkele scrollende regel ### **Beschikbare contentvelden** * **Title** β€” Het bericht dat over de balk scrollt. Ondersteunt rich text. * **Animation speed** β€” Een schuifregelaar van **1 tot 80** die bepaalt hoe snel de tekst beweegt. * **Run left to right** β€” Een selectievakje dat de standaard scrollrichting omkeert. ### **Hoe animatiesnelheid werkt** * Lagere waarden \= langzamer, beter leesbaar scrollen * Hogere waarden \= snellere tickerbeweging * De snelheid wordt dynamisch berekend op basis van de lengte van je titeltekst ### **CTA-gedrag** Running-aankondigingen ondersteunen knop, coupon, trigger en geen CTA. De optie **Make entire bar clickable** wikkelt het scrollgebied in een link. Als er een knop of coupon wordt gebruikt, verschijnt deze statisch naast de scrollende tekst. ### **Best geschikt voor** * Meldingen voor flash sales * Dringende verzenddeadlines * Herhalende merkslogans * Tijdsgevoelige herinneringen ⚠️ **Belangrijk:** Lopende-tekstbalken werken het beste met kortere titels. Zeer lange berichten kunnen voor ongelijkmatig scrolltempo zorgen op kleinere schermen. --- ## **3️⃣ Meerdere roterende aankondigingen (Multiple)** Het **Multiple**-type stelt je in staat om meerdere aankondigingen in één balk te stapelen die er automatisch doorheen roteert. Klanten zien één bericht tegelijk, met navigatiepijlen om handmatig te bladeren. ### **Wat het doet** * Cyclust door meerdere aankondigingslides * Elke slide heeft zijn eigen titel, ondertitel en CTA * Gaat automatisch verder op basis van een configureerbare weergaveduur * Inclusief links/rechts-pijlnavigatie ### **Beschikbare contentvelden** * **Announcement display duration** β€” Een schuifregelaar van **1 tot 10 seconden** die bepaalt hoe lang elke slide zichtbaar blijft voordat deze automatisch roteert. * **Announcement \#1, \#2, \#3...** β€” Elke slide is een onafhankelijk contentblok met eigen titel, ondertitel en CTA. * **Add new announcement** β€” Voegt extra slides toe. ### **Slidelimieten** * Minimum: **2 slides** * Maximum: **20 slides** Je kunt slides opnieuw ordenen met de pijlen omhoog/omlaag, en slides verwijderen als je er meer dan 2 hebt. ### **CTA-gedrag** Elke slide kan zijn eigen onafhankelijke CTA hebben. De ene slide kan een knop hebben, een andere een coupon tonen, en een derde helemaal geen CTA. Ondersteunde CTA-types per slide: knop, klikken op hele balk, coupon, trigger of geen. ### **Animatie-effecten** De overgang tussen slides wordt geregeld door de instelling **Animation** in het tabblad **Design (Ontwerp)**: * **Slide** β€” Standaard horizontale schuifovergang * **Fade** β€” Soepele cross-fade tussen slides * **Cube** β€” 3D-kuberotatie-effect * **Flip** β€” Overgang in kaart-omdraaistijl ### **Best geschikt voor** * Meerdere promoties tegelijk tonen * Verschillende productcategorieΓ«n aankondigen * Roterende berichten over verzending, retourneren en trust * Meerdere coupons uitlichten zonder de pagina vol te zetten --- ## **4️⃣ E-mailcollectiebanner (Email)** Het **Email**-type transformeert de aankondigingsbalk in een leadcaptureformulier. Het toont een e-mailinvoerveld en een verzendknop, en toont daarna een successtatus na verzending. ### **Wat het doet** * Toont een titel, ondertitel en een e-mailinvoerveld * Toont een **Success Message** nadat een klant zijn e-mailadres heeft verzonden * Kan een couponcode bevatten als beloning voor het inschrijven ### **Beschikbare contentvelden** * **Title** β€” Het hoofdbericht waarmee klanten worden uitgenodigd om zich in te schrijven. * **Subheading** β€” Ondersteunende tekst onder de titel. * **Button text** β€” Het label op de verzendknop. Standaard *Subscribe* als dit leeg wordt gelaten. * **Success Message** β€” De bevestigingstekst die wordt getoond na een succesvolle e-mailverzending. * **Email Placeholder** β€” De hinttekst in het lege e-mailinvoerveld. ### **CTA-gedrag** Email-collectiebalken ondersteunen twee CTA-modi: * **Button** β€” Een standaard verzendknop. De balk verzamelt het e-mailadres en toont de successtatus. * **Coupon** β€” Toont een couponcode naast of in plaats van het invoerveld, met een optionele kopieerknop. De opties **Make entire bar clickable** en **Trigger App Event** zijn niet beschikbaar voor dit type, omdat de balk is opgebouwd rond het indienen van een formulier. ### **Voorbeeld van successtatus** In de app-preview zie je twee balkstatussen gestapeld: 1. Het actieve e-mailcollectieformulier 2. De succesberichtenbalk In de live storefront zien klanten de successtatus pas *nadat* ze hun e-mailadres hebben verzonden. ### **Best geschikt voor** * Opbouwen van nieuwsbrieflijsten * Kortingscodes aanbieden in ruil voor e-mailadressen * Inschrijvingen voor wachtlijsten voor pre-launch * VIP- of loyaliteitsprogramma's promoten --- # **πŸ”€ Hoe typekeuze zichtbare instellingen beΓ―nvloedt** Het kiezen van een aankondigingstype verandert dynamisch welke velden verschijnen in het tabblad **Content**. Hier is een snel overzicht: ### **Velden die per type verschijnen** | Veld | Simple | Running | Multiple | Email | | ----- | ----- | ----- | ----- | ----- | | Title | βœ… | βœ… | βœ… | βœ… | | Subheading | βœ… | ❌ | βœ… | βœ… | | Animation speed slider | ❌ | βœ… | ❌ | ❌ | | Display duration slider | ❌ | ❌ | βœ… | ❌ | | Run left to right | ❌ | βœ… | ❌ | ❌ | | Add/remove slides | ❌ | ❌ | βœ… | ❌ | | Button text | βœ… | βœ… | βœ… | βœ… | | Success Message | ❌ | ❌ | ❌ | βœ… | | Email Placeholder | ❌ | ❌ | ❌ | βœ… | | Trigger ID | βœ… | βœ… | βœ… | ❌ | | Coupon code | βœ… | βœ… | βœ… | βœ… | | Copy button toggle | βœ… | βœ… | βœ… | βœ… | ### **Contentitemlimieten** * **Simple, Running, Email** β€” Alleen het **eerste** contentitem wordt gebruikt. Zelfs als er meerdere items in het datamodel bestaan, wordt alleen het eerste weergegeven. * **Multiple** β€” **Alle** contentitems worden gebruikt als individuele slides. ⚠️ Als je van **Multiple** naar **Simple** schakelt, worden extra slides op de achtergrond bewaard maar niet weergegeven. Ze verschijnen opnieuw als je terug schakelt naar **Multiple**. --- # **🎯 Call-to-action-types uitgelegd** CTA-gedrag is grotendeels consistent over aankondigingstypes heen, met enkele type-specifieke uitzonderingen. ### **No call to action (geen call-to-action)** De balk is puur informatief. Er worden geen knoppen, links of klikbare gebieden weergegeven. ### **Button (knop)** Er verschijnt een klikbare knop. Je configureert: * **Button text** β€” Wat de knop zegt * **Link** β€” Waar de knop naartoe navigeert ### **Make entire bar clickable (hele balk klikbaar maken)** Het volledige aankondigingsgebied wordt een link. Klikken overal op de balk navigeert naar de geconfigureerde URL. ℹ️ Als je balk geneste klikbare elementen bevat, zoals social icons, werken deze nog steeds onafhankelijk. Het klikken op de hele balk overschrijft deze niet. ### **Coupon (coupon)** Toont een gestileerd couponcodevak. Je configureert: * **Coupon Code** β€” De daadwerkelijke kortingscode * **Show copy button** β€” Voegt een kopieer-icoon met één klik toe naast de code ### **Trigger App Event (app-event activeren)** In plaats van naar een URL te navigeren, verstuurt de knop een browser **CustomEvent**. Je configureert: * **Trigger ID** β€” De eventnaamstring (bijvoorbeeld, `my-app:open-modal`) Andere apps of aangepaste thema-scripts die naar deze eventnaam luisteren, kunnen hierop reageren. ⚠️ Trigger-CTA's zijn niet beschikbaar op **Email**-collectiebalken, omdat de primaire actie van de balk het indienen van een formulier is. --- # **🎨 Ontwerpgedrag per type** De meeste ontwerpinstellingen zijn universeel van toepassing, maar een paar gedragen zich anders afhankelijk van het type. ### **Animation-instelling (Design-tabblad)** * **Simple & Email** β€” **Animation** regelt het entree-effect wanneer de balk voor het eerst laadt. * **Running** β€” **Animation speed** wordt geregeld in het tabblad **Content**, niet in het tabblad **Design**. * **Multiple** β€” **Animation** regelt het overgangseffect tussen slides (slide, fade, cube, flip). ### **Social icons** Bannericons kunnen aan alle types worden toegevoegd. Je beheert de zichtbaarheid afzonderlijk voor desktop en mobiel. * Iconen verschijnen statisch naast de content * Elk icoon kan naar een URL linken of niet-klikbaar blijven ### **Sluiticoon** Alle types ondersteunen het sluiticoon. Wanneer ingeschakeld, kun je het volgende configureren: * **Appear again after** β€” Hoeveel uur of dagen totdat de balk opnieuw verschijnt voor een terugkerende bezoeker Als er geen herverschijntijd is ingesteld, blijft de balk permanent verborgen na het sluiten. --- # **πŸ“± Mobiel gedrag** Alle vier aankondigingstypes zijn volledig responsief. Er vinden echter automatisch lay-outaanpassingen plaats: * **Email**-collectiebalken stapelen verticaal op mobiel β€” het invoerveld en de knop verschijnen op afzonderlijke regels * **Multiple** roterende balken verkleinen de pijlvulling en verkleinen lettergroottes licht * **Running**-balken behouden scrollsnelheid maar comprimeren icoongroottes als social icons zijn ingeschakeld * **Simple** balken met knoppen kunnen tekst centreren op kleinere schermen, afhankelijk van het CTA-type Je kunt het mobiele uiterlijk overschrijven met het paneel **Custom CSS (aangepaste CSS)** in het tabblad **Design** indien nodig. --- # **πŸ’‘ Use-casevoorbeelden** ### **Voorbeeld 1 β€” Eenvoudige balk met coupon** * **Type:** Simple * **Title:** \"Zomersale is live β˜€οΈ\" * **Subheading:** \"Gebruik code SUNNY voor 20% korting\" * **CTA:** Coupon * **Coupon code:** SUNNY * **Resultaat:** Een schone, statische balk met een kopieerbare kortingscode. ### **Voorbeeld 2 β€” Lopende ticker voor urgentie** * **Type:** Running * **Title:** \"Gratis verzending eindigt vanavond om middernacht ⏰\" * **Animation speed:** 25 * **CTA:** None * **Resultaat:** Een continue scrollend urgentiebericht bovenaan de store. ### **Voorbeeld 3 β€” Meerdere slides voor verschillende collecties** * **Type:** Multiple * **Slide 1:** \"Tot 50% korting op Schoenen β†’\" met knoplink naar /collections/shoes * **Slide 2:** \"Nieuwe collectie Accessoires β†’\" met knoplink naar /collections/accessories * **Slide 3:** \"Gratis retourneren op alle bestellingen\" zonder CTA * **Display duration:** 4 seconden * **Resultaat:** EΓ©n balk die automatisch door drie verschillende promoties cyclet. ### **Voorbeeld 4 β€” E-mailcollectie met couponbeloning** * **Type:** Email * **Title:** \"Word lid van de VIP-lijst\" * **Subheading:** \"Ontvang 15% korting op je eerste bestelling\" * **Button text:** \"Ontvang mijn code\" * **Success Message:** \"Welkom! Je code WELCOME15 is klaar.\" * **Email Placeholder:** \"Vul je e-mailadres in\" * **Resultaat:** Een leadcapturebalk die abonnees direct beloont met een coupon. --- # **⚠️ Belangrijke opmerkingen en beperkingen** ### **Type wisselen** Wisselen tussen types verwijdert je content niet. Houd er echter rekening mee: * Wisselen van **Multiple** naar **Simple** verbergt extra slides * Wisselen van **Running** naar **Simple** toont het veld **Subheading** opnieuw * Wisselen naar **Email** verbergt **Trigger ID**-velden als deze eerder waren ingesteld Controleer altijd je content nadat je van type hebt gewisseld. ### **Lengte lopende tekst** Zeer lange titels in lopende-tekstbalken kunnen zorgen voor ongelijkmatige scrolltiming, vooral op mobiel. Test met je daadwerkelijke berichtlengte voordat je publiceert. ### **Minimum aantal slides voor Multiple** Je kunt geen **Multiple**-aankondiging publiceren met minder dan 2 slides. Als je maar één bericht nodig hebt, gebruik dan het **Simple**-type. ### **Successtatus Email-balk** De successtatus verschijnt pas nadat een klant een e-mailadres heeft verzonden. De preview in de app toont beide statussen gestapeld ter referentie, maar live klanten zien eerst het formulier. ### **Klikken op hele balk en geneste elementen** Wanneer **Make entire bar clickable** is ingeschakeld, werkt het klikken op social icons of de kopieerknop nog steeds zoals verwacht. Het klikken op de hele balk negeert deze geneste interactieve elementen. --- # **πŸŽ‰ Eindresultaat** Door de vier aankondigingsbalktypen te begrijpen, kun je het juiste formaat koppelen aan je doel: βœ… **Simple** β€” Het beste voor enkele, statische promoties βœ… **Running** β€” Het beste voor urgentie en herhalende ticker-achtige berichten βœ… **Multiple** β€” Het beste voor het roteren van meerdere aanbiedingen in één **placement** βœ… **Email** β€” Het beste voor het verzamelen van leads en het laten groeien van abonneelijsten Elk type ondersteunt hetzelfde ontwerpsysteem, **placement**-regels, planning en targetinglogica. Het verschil zit puur in hoe content wordt gepresenteerd en waarop wordt gereageerd. Door het juiste type vanaf het begin te kiezen, zorg je ervoor dat je aankondiging native aanvoelt in je storefront en de juiste boodschap in het juiste formaat levert πŸš€