Op zoek naar een manier om een lightbox-popup voor uw site te maken?
Een lightbox-popup kan ongelooflijk effectief zijn voor het vastleggen van leads. Ze zijn ontworpen om te overtuigen en te converteren.
Maar er zelf een moeten coderen is een echte pijn. Ten eerste moet je genoeg weten van HTML, CSS en Javascript om de pop-up te maken, samen met triggerregels voor wanneer je deze wilt weergeven. Vervolgens moet je een handmatige integratie maken met je e-mailserviceprovider. En ten slotte moet je omgaan met privacy- en beveiligingsproblemen.
Goed nieuws: er is een veel eenvoudigere manier.
In dit artikel laten we u zien hoe u een lightbox-popup lanceert zonder te coderen in minder dan 10 minuten.
Laten we beginnen.
Wat is een Lightbox-popup?
Een lightbox-popup is een opt-in formulier dat verschijnt met een filmisch effect. Wanneer een lightbox verschijnt, vervaagt de rest van de site op de achtergrond. Op deze manier is uw volledige focus op de popup.
Oorspronkelijk komt het concept van lightboxes uit buitenreclame:
En toen dachten sommige ontwikkelaars dat dit een heel cool effect was en creëerden ze een Javascript-bibliotheek om hetzelfde effect op webassets te recreëren. Later kwam het idee om lightbox-popups te gebruiken in beeld.
Waarom Lightbox-popups werken
Lightbox-popups vangen meer e-mails dan een traditioneel e-mail opt-in formulier.
Maar waarom werken ze?
Laten we snel de belangrijkste redenen bekijken waarom lightbox-popups zo goed werken.
#1. Lightbox-popups hebben een duidelijke call-to-action
De meeste mensen geloven dat het geweldig is om hun klanten veel opties te geven.
Maar dat is niet echt waar.
Als u op zoek bent naar directe conversies, wilt u een enkele, duidelijke call-to-action waarop uw publiek zich kan concentreren. Op deze manier verwijdert u alle afleidingen uit de geest van de gebruiker. En lightbox-popups doen geweldig werk bij het benadrukken van uw kernaanbod en het laten focussen van mensen op uw call-to-action.
Dus, van nature zijn de conversiepercentages behoorlijk goed.
#2. Lightbox-popups zijn onmogelijk te negeren
Lightbox-popups nemen het hele scherm in beslag en vervagen al het andere. Het is dus praktisch onmogelijk om ze te negeren.
Dit geldt vooral als ze geanimeerd zijn:
Natuurlijk moet u ervoor zorgen dat uw popups niet opdringerig zijn. En dat kunt u doen door aan te passen wanneer u verschillende popups op uw site activeert. Zolang uw publiek niet geïrriteerd raakt door de onderbreking, kunt u ze heel gemakkelijk overtuigen en converteren.
#3. Lightbox-popups hebben gepersonaliseerde triggers
U moet niet aan al uw websitebezoekers hetzelfde aanbod tonen. Als u een e-commerce winkel runt, heeft u heel andere aanbiedingen nodig voor nieuwe en terugkerende klanten.
Voor een nieuwe klant kunt u een welkomstcampagne activeren:
Maar voor een terugkerende klant wilt u ze misschien een ander aanbod sturen:
Merk op hoe de kortingsbedragen voor beide aanbiedingen precies hetzelfde zijn. Maar de manier waarop het aanbod wordt geformuleerd, is drastisch anders. En dit is super belangrijk omdat lightbox-popups zijn gebouwd voor theatrale effecten. Een meer gepersonaliseerde aanpak zal u zeker veel betere resultaten opleveren.
U kunt het aanbod zelfs personaliseren op basis van de inhoudsvoorkeuren van uw gebruiker. Als ze een artikel over dinerrecepten lezen, heeft het meer zin om hen een aanbieding te tonen die verband houdt met dinerrecepten dan om hen een aanbieding voor auto's te tonen.
#4. Lightbox-popups kunnen vertrekkende bezoekers vastleggen
Lightboxes zijn slechts een methode om je popup weer te geven. Er is dus niets dat je ervan weerhoudt om de trigger naar wens aan te passen. We raden aan om exit-intent lightbox popups te maken.
Exit-intent popups worden geactiveerd wanneer je bezoekers je website proberen te verlaten. Hierdoor behoud je een groot aantal bezoekers die je site anders zouden hebben verlaten. Dus, als je last hebt van websiteverlating, moet je zeker een exit-intent lightbox popup maken.
Hoe maak je een Lightbox Popup
Nu je begrijpt wat een lightbox popup is en waarom je er een zou willen maken, hoe maak je een lightbox popup? We raden aan om OptinMonster te gebruiken om je popups te maken.
OptinMonster is de #1 conversietool ter wereld en we hebben het zelf gebruikt. OptinMonster maakt het super eenvoudig om krachtige pop-ups te maken die converteren. En u hoeft nooit code te gebruiken.
We hebben zelfs een volledige review van OptinMonster geschreven.
Je kunt die bekijken, of meteen aan de slag gaan met je campagne. Het enige wat je hoeft te doen is je aanmelden voor OptinMonster en de rest van dit artikel volgen.
Stap #1: Maak een campagne
Ga naar uw OptinMonster dashboard en klik op de knop Maken:
Selecteer het Lightbox Popup campagnetype:
Kies vervolgens een campagnetemplate. Je kunt elke template kiezen die je wilt, maar we gaan voor het Simple campagnetype voor deze tutorial.
Geef je campagne nu een naam. Onthoud dat deze campagnenaam voor jou is en je waarschijnlijk een heleboel van deze popups zult maken met verschillende targetingopties. Geef de campagne dus een betekenisvolle naam, anders raak je later echt in de war.
Afhankelijk van je abonnement kun je OptinMonster ook op meerdere sites gebruiken. Selecteer dus ook de website waar je je campagne wilt weergeven.
Druk op Start Bouwen als je klaar bent.
Stap #2: Bewerk je Lightbox Popup
Met OptinMonster krijg je een visuele drag-and-drop pop-up builder. Zodra je klaar bent met het maken van je campagne, kun je zelfs de kleinste details van je pop-up bewerken. Begin met het bewerken van je pop-up titel:
Het meest verbazingwekkende hier is dat u gewoon op de tekst klikt die u wilt bewerken en deze inline wijzigt. U hoeft geen formulier in te vullen of HTML-code in de popup te bewerken.
En pas vervolgens je knoptekst en uiterlijk aan om een duidelijke call to action te creëren:
Als je tevreden bent met het uiterlijk van je popup, kun je doorgaan naar meer geavanceerde instellingen.
Stap #3: Stel Weergeregels in
Weergeregels zijn bedoeld om te bepalen wanneer je campagne op je site verschijnt en wie deze ziet.
Onze aanbeveling is om de triggerconditie te wijzigen naar exit-intent:
Klik Volgende stap om de Actie te kiezen. Hier raden we aan om Toon de campagne-weergave in te stellen op Optin View, toon met MonsterEffect in te stellen op een animatie naar keuze, en speel geluidseffect in te stellen op een geluidseffect voor je popup.
Klik vervolgens op de knop Volgende stap. Je kunt de volledige omvang van je instellingen zien in het tabblad Samenvatting.
Stap #4: Stel je E-mailintegratie in
De volgende stap is het instellen van je e-mailintegratie. Klik op Nieuwe integratie toevoegen vanuit het tabblad Integraties en selecteer je e-mailserviceprovider:
We raden aan om Drip te gebruiken voor je e-mailmarketing als je nog geen e-mailserviceprovider hebt.
Stap #5: Publiceer je Lightbox Popup
Wanneer u een nieuwe campagne maakt, is deze standaard Gepauzeerd.
Ga naar het tabblad Publiceren in het hoofdmenu om de Publicatie-opties te zien. Stel vervolgens de status in op Publiceren en selecteer het websiteplatform:
Als je een WordPress-site runt, regelt de OptinMonster-plugin de rest van de installatie automatisch. Hetzelfde geldt voor Shopify en BigCommerce. Voor elke andere site klik je op Any Site en plak je de embedcode in de head van je website:
En je bent klaar!
BONUS: Verzamel Pushmeldingabonnees vanuit je Popup
Pushmeldingen helpen je om je websiteverkeer en betrokkenheid automatisch te vergroten. Web pushmeldingen zijn een effectieve manier om gebruikers terug te halen die hun sessie hebben verlaten of de website hebben verlaten. Het helpt bij het herengageren van gebruikers door hen op de hoogte te stellen van nieuwe inhoud, aanbiedingen of evenementen.
Pushmeldingen bevatten ook duidelijke en actiegerichte berichten en call to action-knoppen, die gebruikers aanmoedigen om specifieke acties te ondernemen, zoals het lezen van een artikel, het voltooien van een aankoop of het deelnemen aan een evenement.
U kunt pushmeldingen aanpassen op basis van de voorkeuren, het gedrag en de interesses van gebruikers, om ervoor te zorgen dat de berichten relevant en waardevol zijn voor elke gebruiker. Gebruikers moeten toestemming geven om web pushmeldingen te ontvangen. Dit zorgt ervoor dat de berichten niet als spam worden gezien en dat ze met toestemming van de gebruiker worden verzonden.
Het coolste is dat je pushmeldingsabonnees kunt verzamelen vanuit je e-mailpopup. Dus, voor het geval je sitebezoekers hun e-mailadres niet willen opgeven, kun je ze toch laten abonneren via web pushmeldingen.
En daar gaan we mee aan de slag.
Stap #1: Selecteer een Pushmeldingenservice
We raden aan om PushEngage te gebruiken om web pushmeldingen te verzenden.
Hier is een kort overzicht van wat je krijgt met PushEngage:
- Hoog converterende geautomatiseerde campagnes
- Meerdere targetingopties en campagneplanningopties
- Doeltracking en geavanceerde analyses
- Slimme A/B-tests
- Een toegewijde succescoach
Je kunt gratis beginnen, maar als je serieus bent over het laten groeien van je bedrijf, moet je een betaald abonnement kopen. Controleer ook, voordat je een pushmeldingsservice koopt, deze gids voor kosten van pushmeldingen.
En als je een online winkel runt, helpt PushEngage je ook om je verkopen te laten groeien door je te helpen bij het maken van geautomatiseerde eCommerce pushmeldingen.
Je zult zien dat PushEngage zonder twijfel de beste keuze is als je verkeer, betrokkenheid en verkopen voor je bedrijf wilt opbouwen. En als je een beperkt budget hebt, kun je altijd een beetje creatief zijn met je pushmeldingen.
Stap #2: Voeg een HTML-blok toe aan je Popup
Voeg eerst een HTML-blok toe aan uw popup vanuit de zijbalk in OptinMonster.
Hier gaan we de code toevoegen om push-notificatieabonnees te verzamelen. Plak eerst de volgende code om een klikbare knop te maken:
<button onclick="subscribeOnClickButton()" style="border: none; width: 100%; padding-left: 15%; padding-right:15%; text-align: center; display: inline-block; color: white;">Get Updates via Push Notifications Instead</button>Plak de code waar staat dat u HTML kunt toevoegen:
Op dit punt zou je een nieuwe knop in je popup moeten zien met de tekst "Updates ontvangen via Pushmeldingen" net onder de e-mailabonnementsknop:
Natuurlijk kunt u met de stijlen spelen om het er aantrekkelijker uit te laten zien. Vervolgens gaan we ervoor zorgen dat de knop pushmeldingsabonnees verzamelt wanneer erop wordt geklikt.
Stap #3: Verkrijg Abonnementscode van PushEngage
Ga naar de PushEngage homepage en klik op de knop Get Started :
Vervolgens wil je het gratis abonnement selecteren om PushEngage uit te proberen of een betaald abonnement kiezen als je serieus bent over het laten groeien van je bedrijf. De betaalde abonnementen bieden meer campagneopties en de mogelijkheid om nog grotere abonneelijsten op te bouwen.
Ga in uw PushEngage-dashboard naar Site-instellingen » Sitegegevens en klik op de knop Klik hier voor installatie-instructies. Onder Elke site krijgt u uw installatiecode:
WAARSCHUWING: U moet de code kopiëren die u uit uw dashboard haalt. De code is uniek voor elke PushEngage-gebruiker. U kunt de code in de afbeelding niet kopiëren en pushmeldingabonnees verzamelen.
Zodra u de code in uw PushEngage-dashboard hebt, neemt u het tweede script en voegt u er wat extra code aan toe. Uw uiteindelijke code moet er ongeveer zo uitzien:
<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
}]);
}
</script>Stap #4: Voeg uw abonnementscode toe aan het HTML-blok in uw pop-up
Voeg deze code toe aan het HTML-blok in OptinMonster en u bent klaar!
Als u klaar bent, klikt u gewoon op de knoppen Opslaan en Publiceren.
Als u uw website bekijkt, zou u nu de light-box pop-up moeten zien die zowel e-mail- als push-abonnees verzamelt:
En net als dat verzamelt u push-abonnees vanuit uw pop-up. Pushmeldingen worden geleverd met hun eigen pop-upmodals. Maar ze zijn een beetje moeilijk aan te passen. Dus, u kunt prachtige pop-ups maken met OptinMonster en ze vervolgens gebruiken als uw pushmeldingspop-ups.
Wat te doen nadat u een light-box pop-up hebt gemaakt
Dat is alles voor deze keer, mensen!
Laat het ons weten als dit artikel u heeft geholpen. Het maken van pop-ups op uw site kan u helpen uw verkeer om te zetten in e-mailabonnees en echte zakelijke leads. En we raden u ten zeerste aan om meteen te beginnen met het maken van light-box pop-ups.
En als je op zoek bent naar een betaalbare manier om je verkeer te vergroten, raden we het gebruik van pushmeldingen aan. Pushmeldingen kunnen je helpen meer terugkerend verkeer en site-betrokkenheid te genereren. Je kunt ook geautomatiseerde pushmeldingcampagnes maken die verkopen genereren.
Nog niet overtuigd? Bekijk deze bronnen:
- 7 slimme strategieën om klantbetrokkenheid te vergroten
- Zijn pushmeldingen effectief? 7 statistieken + 3 expert tips
- Hoe verlaten winkelwagen pushmeldingen in te stellen (eenvoudige tutorial)
We raden aan om PushEngage te gebruiken om je pushmeldingscampagnes te maken. PushEngage is de nummer 1 pushmeldingssoftware ter wereld. Dus, als je dat nog niet hebt gedaan, begin vandaag nog met PushEngage!
