Hoe een Pushmelding Abonnementsknop toe te voegen aan Pop-ups

Op zoek naar een manier om een pushmelding-abonneeknop toe te voegen aan uw pop-ups?

Pop-ups zijn een geweldige manier om uw conversies te verhogen en een e-maillijst op te bouwen. Maar dat is niet alles wat u ermee kunt doen. Als u de juiste popup-builder gebruikt, kunt u alles aan uw pop-ups aanpassen.

Standaard worden pushmeldingen ook geleverd met popup-modals. Maar u kunt veel meer aanpassingsopties krijgen met een popup-builder.

Dus, we gaan een popup-builder gebruiken om de popup te bouwen en een abonnementslink toe te voegen om push-abonnees te verzamelen.

U kunt eenvoudig een knop toevoegen om pushmelding-abonnees rechtstreeks vanuit uw pop-ups te verzamelen. En het is super eenvoudig te doen. Alles wat u nodig hebt, is een popup-builder en een pushmelding-software om aangepaste pop-ups in te stellen om push-abonnees te verzamelen.

Laten we beginnen.

Hoe maak je een popup om push-abonnees te verzamelen

Laten we beginnen met het maken van een popup. We raden aan om OptinMonster te gebruiken om al uw pop-ups 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.

OptinMonster heeft vrijwel alles wat u nodig hebt om uw leadgeneratieproces te starten, te laten groeien en op te schalen.

Hier is een korte samenvatting van wat je kunt doen met de toolkit:

• Verzamel pushmelding-abonnees met een popup
• Converteer bezoekers die voor het eerst komen naar vaste lezers
• Verminder de tarieven voor verlaten winkelwagens en verlaten browse-sessies
• Creëer tijdelijke aanbiedingen met echte afteltimers
• Verhoog het aantal downloads van e-books en verkoop van digitale producten
• Maak een funnel voor live evenementen
• Verbeter sitebetrokkenheid met gamified pop-ups
• Verwijs uw verkeer door naar pagina's en berichten die u geld opleveren

We gebruiken OptinMonster nogal veel en we hebben zelfs een volledige review van OptinMonster geschreven. U kunt die bekijken, of meteen met uw campagne beginnen. Het enige wat u hoeft te doen is u aanmelden voor OptinMonster en de rest van dit artikel volgen.

Stap #1: Maak een Popup Campagne om Abonnees te Verzamelen

Ga naar uw OptinMonster dashboard en klik op de knop Maken:

Selecteer de optie Sjabloon om een optin te maken met een vooraf ontworpen sjabloon:

Voor deze tutorial gaan we een popup maken voor Black Friday. Selecteer het campagnetype Popup en zoek naar een campagnesjabloon

U kunt elk sjabloon kiezen dat u wilt, maar we gaan voor deze tutorial voor het Black Friday campagnesjabloon.

Nadat u uw sjabloon hebt geselecteerd, geeft u uw campagne een naam. Onthoud dat deze campagnenaam voor u is en u waarschijnlijk een heleboel van deze pop-ups zult maken met verschillende targetingopties. Geef de campagne dus een betekenisvolle naam, anders raakt u later echt in de war.

Afhankelijk van uw abonnement kunt u OptinMonster ook op meerdere sites gebruiken. Selecteer dus ook de website waar u uw campagne wilt weergeven. Klik op Beginnen met Bouwen als u klaar bent.

Stap #2: Bewerk uw Popup om het Uiterlijk aan te Passen

Met OptinMonster krijgt u een visuele drag-and-drop popup-builder. Zodra u klaar bent met het benoemen van uw campagne, kunt u zelfs de kleinste details van uw popup bewerken.

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.

U kunt alles aan uw popup bewerken, inclusief afbeeldingen. Als u tevreden bent met het uiterlijk van de optin, kunt u doorgaan naar meer geavanceerde instellingen.

De manier waarop dit specifieke sjabloon is ingesteld, is dat de popup uit drie delen bestaat. U hebt een initieel Ja/Nee-scherm waar de bezoeker kiest voor een kortingsbon op Black Friday. Het is wat u ziet in de bovenstaande afbeelding. Standaard is het een gratis verzendingskortingsbon. Maar u kunt elk aanbod of coupon toevoegen dat u wilt.

Wanneer uw bezoekers op de knop Ja in de popup klikken, worden ze naar het Optin-scherm gestuurd. Hier verzamelt u abonnees. Standaard verzamelt het optin-scherm e-mails. We gaan dat vervangen door een knop om push-abonnees te verzamelen.

Ten slotte hebt u een Succes-scherm dat verschijnt wanneer uw bezoeker zich abonneert.

Laten we dit stap voor stap doen.

Stap #3: Verwijder de E-mail Optin uit de Popup

U kunt elke module in de popup bewerken die u wilt. Ga naar het Optin-scherm in de onderbalk:

Hier kunt u met de muis boven de e-mail optin-module zweven en gewoon op de verwijderknop klikken om deze te verwijderen:

Nu de e-mail optin weg is, gaan we er een knop aan toevoegen die push-notificatieabonnees verzamelt.

Stap #4: Voeg een Klik-om-te-abonneren-knop toe aan uw 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 class = "btn" onclick="subscribeOnClickButton()">Get Updates via Push Notifications Instead</button>

Plak de code waar staat dat u HTML kunt toevoegen. Op dit punt zou u een nieuwe knop in uw popup moeten zien:

Scroll vervolgens naar beneden en plak de volgende CSS in de CSS-container:

html div#om-{{id}} .btn
{
    font-family: Arial, sans-serif;
    font-weight: 0;
    font-size: 14px;
    color: #fff;
    background-color: #cf1f31;
    padding: 10px 30px;
    width: 100%;
    margin: auto;
    border: solid #cf1f31 2px;
    box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
    border-radius: 50px;
    transition : 1000ms;
    transform: translateY(0);
    display: grid;
    align-text: center;
    cursor: pointer;
}

html div#om-{{id}} .btn:hover
{
    transition : 1000ms;
    padding: 10px 35px;
    transform : translateY(-0px);
    background-color: #ffffff;
    color: #cf1f31;
    border: solid 2px #ffffff;
}

Op dit punt zou u een prachtig uitziende knop op uw popup moeten zien:

Stap #5: Haal de Abonnementscode van PushEngage

Pushmeldingen helpen u om uw websiteverkeer en betrokkenheid automatisch te laten groeien. 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 opnieuw betrekken van gebruikers door hen op de hoogte te stellen van nieuwe inhoud, aanbiedingen of evenementen.

Pushmeldingen bevatten ook duidelijke en bruikbare 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 u push-abonnees kunt verzamelen vanuit uw e-mailpopup. Dus, voor het geval uw websitebezoekers hun e-mailadres niet willen opgeven, kunt u ze toch laten abonneren met web pushmeldingen.

We raden aan om PushEngage te gebruiken om web pushmeldingen te verzenden.

Hier is een snelle blik op wat u krijgt met PushEngage:

• Hoog converterende geautomatiseerde campagnes
• Meerdere targeting en campagneplanning opties
• 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.

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 #6: 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.

Stap #7: Voeg kliktracking en campagneafsluiting toe

Het laatste dat we moeten doen, is kliktrackingcode toevoegen om elke abonnee als een conversie in OptinMonster te beschouwen. Ook, wanneer de bezoeker zich abonneert, wilt u dat deze naar het Succes-scherm gaat of de campagne afsluit.

Voeg binnen het Javascript-snippet de volgende regels code toe:

Om conversietracking in te schakelen, voegt u deze code toe:

om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster

Om uw abonnee naar het Succes-scherm te verplaatsen, voegt u deze code toe:

om{{id}}.changeView('success'); // Show Success view on submission

Om de campagne te sluiten bij abonnement, voegt u deze code toe:

om{{id}}.startClose();// Close campaign on submission

U kunt ook meerdere codefragmenten toevoegen. We raden u aan abonnees naar het Succes-scherm te verplaatsen en de conversie te volgen. Dus, het uiteindelijke codefragment dat we aanbevelen te gebruiken (inclusief de knop en alle Javascript) is:

<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);
om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster
om{{id}}.startClose();// Close campaign on submission
}]);
}
</script>
<div>
	<button class="btn" onclick="subscribeOnClickButton()">Get Updates via Push Notifications</button>
</div>

Of u kunt deze code gebruiken om de campagne direct te sluiten:

<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);
om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster
om{{id}}.changeView('success'); // Show Success view on submission
}]);
}
</script>
<div>
	<button onclick="subscribeOnClickButton()">Get Updates via Push Notifications</button>
</div>

Kopieer en plak de code gewoon in het HTML-blok van uw OptinMonster-pop-up.

En voor beide codefragmenten, vergeet niet de volgende CSS toe te voegen in de CSS-sectie van uw HTML-blok:

html div#om-{{id}} .btn
{
    font-family: Arial, sans-serif;
    font-weight: 0;
    font-size: 14px;
    color: #fff;
    background-color: #cf1f31;
    padding: 10px 30px;
    width: 100%;
    margin: auto;
    border: solid #cf1f31 2px;
    box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
    border-radius: 50px;
    transition : 1000ms;
    transform: translateY(0);
    display: grid;
    align-text: center;
    cursor: pointer;
}

html div#om-{{id}} .btn:hover
{
    transition : 1000ms;
    padding: 10px 35px;
    transform : translateY(-0px);
    background-color: #ffffff;
    color: #cf1f31;
    border: solid 2px #ffffff;
}

Als u klaar bent, klikt u op Opslaan. Als u uw website controleert, zou u nu de pop-up moeten zien die zowel e-mail- als pushmeldingabonnees 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. U kunt dus prachtige pop-ups maken met OptinMonster en ze vervolgens gebruiken als uw pushmeldingspop-ups.

Stap #8: Publiceer uw Exit Intent Pop-up in WordPress

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!

Bonusstap: Schakel Snelle Installatie uit in PushEngage

Snelle Installatie is een methode om pushmeldingabonnees aan een website toe te voegen zonder een SSL-certificaat. Tegenwoordig hebben bijna alle sites een SSL-certificaat, maar voor het geval je er geen hebt geïnstalleerd, raden we je ten zeerste aan er onmiddellijk een te laten installeren. Bekijk dit artikel over hoe je een SSL-certificaat installeert in WordPress.

Dus, voordat je begint met het verzamelen van abonnees op je site, raden we je aan om ook Snelle Installatie uit te schakelen. Ga naar het PushEngage-dashboard en ga naar Design » Popup Modals. Schakel vervolgens Snelle Installatie uit:

En nu ben je klaar om je website te promoten en meer abonnees te verzamelen voor Black Friday!

Wat te doen nadat je bent begonnen met het verzamelen van push-abonnees

Dat is alles voor deze keer, mensen!

Laat het ons weten als dit artikel heeft geholpen. Het maken van pop-ups op je site kan je helpen om je verkeer om te zetten in push-abonnees en echte zakelijke leads. En we raden je ten zeerste aan om onmiddellijk te beginnen met het maken van exit-intent pop-ups.

En als je op zoek bent naar een betaalbare manier om je verkeer te laten groeien, raden we je aan om pushmeldingen te gebruiken. Pushmeldingen kunnen je helpen om meer terugkerend verkeer en sitebetrokkenheid te genereren. Je kunt ook geautomatiseerde pushmelding-campagnes 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)
• Hoe voeg je een WordPress-plugin voor webmeldingen toe aan je site

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!