Hoe maak ik een pop-up aan?

De pop-up builder is beschikbaar in het Premium pakket.

Navigeer rechtsboven in het dashboard naar het icoontje voor formulieren en klik vervolgens op het submenu-item 'Pup-ups'.

Op deze pagina zie je een overzicht van de aangemaakte pop-up. Je ziet ook de positie van de pop-up op de webpagina waar de embed-code van de pop-up is geplaatst en de status van de popup. Je kunt de pop-up eenvoudig activeren en deactiveren door op respectievelijk het rode kruisje of groene vinkje te klikken.

Klik op de button 'Pup-up Toevoegen' om een pop-up aan te maken. Vul op de volgende pagina allereerst de naam van de pop-up in. Deze naam is alleen zichtbaar in de software als referentie.

Onder 'Formulier' kun je optioneel een inschrijfformulier selecteren. Net als bij een landingspagina kun je in de editor het inhoudselement 'Formulier' in de content slepen.

Formulier beveiliging d.m.v. Google reCaptcha

Indien je een formulier hebt geselecteerd dien je ook de reCaptcha beveiliging te configureren om er zeker van te zijn dat jullie mailinglijst niet vervuild raakt met nep-inschrijvingen door spambots.

De reCaptcha Enterprise versie is aanbevolen maar het kan zijn dat de website waarop het formulier komt te staan al reCaptcha Enterprise heeft geïntegreerd. Mocht dat conflicteren raden wij reCaptcha v2 aan. Maak hiervoor een sitekey en secret key aan. Lees hier meer over hoe je dat doet.

Pop-up Opmaak

Onder het subkopje 'Styles' kun je de positie van de pop-up bepalen. 'Klassiek Midden' is de meest gebruikelijke en opent de pop-up in het midden van de pagina.

Indien je geavanceerde opmaak stijl wenst kun je het vinkboxje achter 'Geavanceerde stijlen' aanvinken. Hier kun je bijvoorbeeld ronde hoeken van de pop-up configureren, schaduw van de-popup, de overlay kleur en zelf een afbeelding als overlay.

Onder 'Overige Instellingen' kun je selecteren of de pop-up actief moet zijn of niet. Onder 'Pop-up Vertraging' kun je instellen na hoeveel seconden de pop-up moet verschijnen en onder 'Cookie geldigheid' bepaal je het aantal dagen dat de pop-up geldig is.

Indien je een formulier hebt gekozen kun je hier ook aangeven of het formulier d.m.v. AJAX moet worden gepost. Dat betekent dat het formulier op de achtergrond wordt gepost en de bedankt melding in de pop-up wordt weergegeven i.p.v. dat er wordt geredirect naar een volledige pagina. Indien je kiest voor AJAX kun je zelf bepalen wat de melding wordt als het formulier succesvol is verstuurd. Laat je deze melding leeg? Dan wordt de tekst uit de bedanktpagina van het betreffende formulier weergegeven.

Klik op 'Volgende' om een template te selecteren, een JSON te uploaden óf een pop-up vanaf scratch te ontwerpen.

Basis Ontwerp

Onder het eerste tabblad 'Ingebouwde Templates' worden een aantal templates weergegeven op basis waarvan de definitieve pop-up kan worden gemaakt. Hier worden overigens alleen de templates weergegeven die overeenkomen met de gekozen pop-up positie.

Deze templates bevatten nog geen formulieren. Deze moet je dus nog als inhoudselement erin slepen. 
Het is ook mogelijk om een JSON bestand van een pop-up te uploaden maar je kunt ook gewoon met een leeg canvas beginnen.

Klik op 'Leeg Canvas', 'Selecteer Template' of 'Upload JSON' om naar de editor te gaan.

Op de volgende pagina wordt de BEE editor geladen. Hier kun je net als bij de landingspagina's en nieuwsbrieven rijen en inhoudsblokken in de editor slepen. Vergeet niet tussentijds op te slaan!

Indien je klaar bent met de popup en hebt opgeslagen klik je op de button 'Terug naar overzicht'. 

Pop-up op de website plaatsen

Om de pop-up op de website te plaatsen klik je in het overzicht onder Acties achter de betreffende pop-up op 'Insluiten'. Kopieer vervolgens de Embed-code en plak deze code-snippet in de body van jouw website. De pop-up wordt als het goed is nu geladen. Controleer indien dat niet zo is of jouw website gebruik maakt van caching, leeg jouw browser cache en/of controleer na hoeveel seconden de pop-up zichtbaar zou moeten worden. Indien je de snippet via een HTML plugin in een WYSIWYG-editor hebt toegevoegd kan het zijn dat javascripts automatisch worden verwijderd vanwege bepaalde policies. Ook de Content Security Policy kan roet in het eten gooien. Voeg het domein uit de snippet toe aan jouw Content Security Policy.