Dynamische blokken gebruiken in formulieren

Ontdek meer over dynamische blokken en hoe je ze kunt gebruiken in aanmeldingsformulieren om verschillende weergaven en ervaringen te creëren voor shoppers op desktop- en mobiele apparaten. Gebruik de zichtbaarheidsinstellingen van een blok om te kiezen op welke apparaten het wordt weergegeven.

Over dynamische blokken

Met dynamische blokken kun je bepalen welke blokken worden weergegeven op basis van het apparaat. Je kunt blokken zo configureren dat ze er in je formulier anders uitzien op basis van het apparaat, of dat ze op het ene apparaat wel worden weergegeven en op het andere niet.

Use cases voor dynamische blokken:

• Pas formulierweergaven aan voor verschillende apparaattypen (bijv. mobiel en desktop), zodat shoppers een ontwerp zien dat is afgestemd op hun scherm.
• Maak één formulier met verschillende sms-opt-inmethoden die per apparaattype worden weergegeven om conversie te optimaliseren (bijv. toon een tik-om-te-sms'en-optie op mobiele apparaten en een invoerveld voor een telefoonnummer op desktopapparaten).

Voordat je van start gaat

Open je formulier in de editor en selecteer Targeting & behavior > Display. Selecteer onder Apparaten Alle apparaten, zodat je desktop- en mobiele weergaven kunt configureren.

Met deze instelling kun je aparte weergaven voor desktop en mobiel configureren.

Gebruik dynamische blokken om aparte desktop- en mobiele weergaven te maken

Sommige blokken hebben een vaste zichtbaarheid. Bijvoorbeeld: invoervelden voor leeftijdscheck en verificatiecode worden op alle apparaten weergegeven, terwijl tap-to-text-knoppen alleen op mobiel worden weergegeven. Je kunt de zichtbaarheid ook niet wijzigen voor het laatste zichtbare blok in een stap.

Blokken en invoervelden met bewerkbare instellingen voor Zichtbaarheid kun je dynamisch maken, of ze nu al bestaan of je ze toevoegt via het paneel Blokken toevoegen. Als je dit paneel wilt openen, selecteer je Content toevoegen. Volg deze stappen om aan te passen op welke apparaten een blok wordt weergegeven:

1. Klik op het blok in het paneel met het formuliervoorbeeld (bijv. een tekstblok).
2. Scroll in het instellingenmenu van het blok aan de linkerkant omlaag naar Zichtbaarheid.
3. Kies of je het blok wilt weergeven op Desktop, Mobiel of alle apparaten.
4. Herhaal dit proces voor alle blokken die je dynamisch wilt maken.

Gebruik de weergaveselector in de rechterbovenhoek van de formuliereditor om te bekijken hoe je formulier er op elk apparaat uitziet. Je kunt schakelen tussen het desktopicoon en het icoon voor mobiele apparaten om elke weergave te bekijken.

• De desktopweergave laat zien hoe je formulier eruitziet voor shoppers die je site op een desktop bekijken. Alleen blokken die zijn ingesteld op desktop en alle apparaten zijn zichtbaar in deze weergave.
• In de mobiele weergave zie je een voorbeeld van wat shoppers te zien krijgen wanneer ze browsen op een mobiel apparaat. Hier zie je blokken die zijn geconfigureerd voor Mobiel en Alle apparaten.

Voorbeeld

Stel dat je wilt dat de koptekst van je formulier er anders uitziet op desktop dan op een mobiel apparaat. Om dit te configureren:

1. Selecteer in de weergaveselector in de rechterbovenhoek het desktopicoon.
2. Selecteer de tekst die je wilt bewerken in de formulierpreview en breng je wijzigingen aan.
3. Scroll in het instellingenmenu van het tekstblok naar Zichtbaarheid en stel het tekstblok zo in dat het alleen wordt weergegeven op Desktop .

This content requires Functional cookies to be enabled.

Update Cookie Settings

4. Om de mobiele weergave aan te passen, schakel je over naar de mobiele preview door het mobiele pictogram te selecteren in de weergaveselector.
5. Selecteer Content toevoegen om het paneel Blokken toevoegen te openen en sleep vervolgens een nieuw tekstelement naar het mobiele voorbeeld.
6. Pas de standaardkoptekst aan voor mobiele shoppers. Deze tekst moet anders zijn dan wat je hebt gebruikt in de desktopversie.
7. Scroll in het instellingenmenu van het tekstblok omlaag naar Zichtbaarheid en stel dit tekstblok in om weer te geven op Mobiel.

This content requires Functional cookies to be enabled.

Update Cookie Settings

8. Optioneel: herhaal dit proces voor andere elementen of invoervelden die je anders wilt weergeven op basis van het apparaattype (bijv. een afbeelding tonen aan desktopshoppers, maar verbergen op mobiel).
   • Als je afbeeldingen in je formulier dynamisch wilt maken, kun je:
     • Voeg een afbeelding aan de zijkant toe aan zowel de mobiele als de desktopweergave, of alleen aan 1 weergave.
     • Gebruik een zijafbeelding in de desktopweergave en plaats op mobiel een afbeelding boven de koptekst, of andersom.

Gebruik dynamische blokken om het verzamelen van sms-toestemming te optimaliseren

Als je een aanmeldingsformulier hebt dat sms-toestemming verzamelt, kun je dynamische blokken gebruiken om de sms-aanmeldmethode voor elk apparaat te optimaliseren (bijv. mobiele shoppers een tik-om-te-sms’en-knop tonen, terwijl desktopshoppers een invoerveld voor een telefoonnummer zien).

Gebruik de onderstaande stappen voor een formulier met traditionele sms-opt-in. Voordat je begint, stel je sms in in je account en zorg je ervoor dat je een verzendnummer hebt dat tekstberichten kan ontvangen in de regio die je wilt targeten. Als je formulier Smart Opt-in gebruikt, volg dan in plaats daarvan de bovenstaande handleiding.

1. Open je bestaande formulier in de editor en selecteer in de menubalk de stap waarmee sms-toestemming wordt verzameld.
   • Als je formulier nog geen telefoonnummers verzamelt, voeg dan een stap toe:
     1. Klik op + Stap, selecteer Mobiele opt-in en klik daarna op Volgende.
     2. Kies tekstberichten en klik vervolgens op Volgende.
     3. Selecteer de lijst waar nieuwe abonnees zich bij moeten aansluiten en kies Traditionele dubbele toestemming voor tekstberichten.
     4. Klik op Stap toevoegen.

2. Selecteer in de weergaveselector rechtsboven het desktopicoon om de desktopweergave van je formulier aan te passen.
3. Selecteer het invoerveld voor het telefoonnummer in de preview en stel het onder Zichtbaarheid zo in dat het wordt weergegeven op Desktop. Doe hetzelfde voor de knop Verzenden. Zorg dat de sms-disclosuretekst zichtbaar blijft op beide apparaten.

This content requires Functional cookies to be enabled.

Update Cookie Settings

1. Schakel over naar de mobiele weergave van je formulier door het mobiele pictogram in de rechterbovenhoek te selecteren.
2. Selecteer een bestaande tap-to-text-knop, of selecteer Content toevoegen om het paneel Blokken toevoegen te openen en sleep een nieuwe knop naar de mobiele preview.
3. Stel de actie van de knop in op Aanmelden via tekstberichten. Met deze actie wordt de knop automatisch alleen voor mobiel.

This content requires Functional cookies to be enabled.

Update Cookie Settings

4. Kies een keyword voor tekstberichten en pas het bericht aan voor je tik-om-te-sms'en-knop. Mobiele abonnees worden toegevoegd aan de lijst die bij dat keyword hoort, dus controleer of die overeenkomt met de lijst die je bedoelt voor sms-abonnees.
5. Kies onder Verzendregio de regio die je wilt targeten. Klaviyo gebruikt het verzendnummer dat bij die regio hoort.
6. Schakel heen en weer tussen de desktop- en mobiele weergave om ervoor te zorgen dat de blokken op elk apparaat verschijnen zoals je bedoelde.

Je dynamische blokken zijn nu zo ingesteld dat er op desktop een veld voor een telefoonnummer wordt weergegeven en op mobiel een tik-om-te-sms'en-knop. Mobiele shoppers moeten de vooraf ingevulde tekst versturen om een sms-abonnement aan te vragen.

Volgende stappen

Voordat je je aanmeldingsformulier publiceert, selecteer je Stijlen bewerken om de lay-out, lettertypen en kleuren aan te passen aan je merk. Zorg er ook voor dat je je sms-kennisgevingstaal toevoegt en aanpast.

Om het formulier of je wijzigingen live te zetten:

1. Klik op Publiceren of plannen.
2. Kies Nu publiceren en los eventuele blokkerende meldingen op.
3. Klik op Nu publiceren om te publiceren.

Aanvullende bronnen