Hur man lägger till en knapp för prenumeration på push-notiser i popup-fönster

Letar du efter ett sätt att lägga till en knapp för prenumeration på push-notiser i dina popup-fönster?

Popup-fönster är ett utmärkt sätt att öka dina konverteringar och bygga en e-postlista. Men det är inte allt du kan göra med dem. Om du använder rätt verktyg för att skapa popup-fönster kan du anpassa allt med dina popup-fönster.

Som standard kommer push-notiser också med popup-modaler. Men du kan få mycket fler anpassningsalternativ med ett verktyg för att skapa popup-fönster.

Så, vi kommer att använda ett verktyg för att skapa popup-fönster för att bygga popup-fönstret och lägga till en prenumerationslänk för att samla push-prenumeranter.

Du kan enkelt lägga till en knapp för att samla push-notis-prenumeranter direkt från dina popup-fönster. Och det är superenkelt att göra. Allt du behöver är ett verktyg för att skapa popup-fönster och en programvara för push-notiser för att ställa in anpassade popup-fönster för att samla push-prenumeranter.

Låt oss dyka in.

Hur man skapar ett popup-fönster för att samla push-prenumeranter

Låt oss börja med att skapa ett popup-fönster. Vi rekommenderar att använda OptinMonster för att skapa alla dina popup-fönster.

OptinMonster är världens främsta verktyg för konvertering och vi har använt det själva. OptinMonster gör det superenkelt att skapa kraftfulla popup-fönster som konverterar. Och du behöver aldrig använda någon kod alls.

OptinMonster har i princip allt du behöver för att starta, växa och skala din process för att generera leads.

Här är en snabb översikt över vad du kan göra med verktygslådan:

• Samla push-notis-prenumeranter med ett popup-fönster
• Konvertera förstagångsbesökare till återkommande läsare
• Minska avbrutna kundvagnar och avbrutna surfningar
• Skapa tidsbegränsade erbjudanden med faktiska nedräkningstimer
• Öka nedladdningar av e-böcker och försäljning av digitala produkter
• Skapa en tratt för live-evenemang
• Förbättra webbplatsengagemanget med hjälp av spelifierade popups
• Omdirigera din trafik till sidor och inlägg som ger dig pengar

Vi använder OptinMonster ganska mycket och vi har till och med skrivit en fullständig recension av OptinMonster. Du kan kolla in den, eller börja med din kampanj direkt. Allt du behöver göra är att registrera dig för OptinMonster och följa resten av den här artikeln.

Steg #1: Skapa en popup-kampanj för att samla prenumeranter

Gå till din OptinMonster-instrumentpanel och klicka på knappen Skapa:

Välj alternativet Mall för att börja skapa en optin med en fördesignad mall:

För den här handledningen kommer vi att skapa ett popup-fönster för Black Friday. Välj kampanjtypen Popup och sök efter en kampanjmall

Du kan välja vilken mall du vill, men vi kommer att använda mallen för Black Friday-kampanjen för den här handledningen.

Efter att du har valt din mall, ge din kampanj ett namn. Kom ihåg, detta kampanjnamn är för dig och du kommer troligen att skapa en hel del av dessa popup-fönster med olika målinriktningsalternativ. Så, ge kampanjen ett meningsfullt namn, annars kommer du att bli riktigt förvirrad senare.

Även, beroende på din plan, kan du också använda OptinMonster på flera webbplatser. Så, välj webbplatsen där du vill visa din kampanj också. Klicka på Börja bygga när du är klar.

Steg #2: Redigera ditt popup-fönster för att anpassa utseendet

Med OptinMonster får du en visuell dra-och-släpp-byggare för popup-fönster. När du är klar med att namnge din kampanj kommer du att kunna redigera även de minsta detaljerna om ditt popup-fönster.

Det mest fantastiska här är att du bara klickar på den text du vill redigera och ändrar den direkt. Det finns inget behov av att fylla i ett formulär eller redigera någon HTML-kod i popup-fönstret.

Du kan redigera allt du vill om ditt popup-fönster, inklusive bilder. När du är nöjd med optin-fönstrets utseende kan du gå vidare till mer avancerade inställningar.

Sättet som den här mallen är uppbyggd på är att det finns tre delar i popup-fönstret. Du har en första Ja/Nej-skärm där besökaren väljer en kupong för Black Friday. Det är vad du ser i bilden ovan. Som standard är det en gratis frakt-kupong. Men du kan lägga till vilket erbjudande eller kupong du vill.

När dina besökare klickar på knappen Ja i popup-fönstret skickas de till Optin-skärmen. Det är här du skulle samla prenumeranter. Som standard samlar optin-skärmen e-postadresser. Vi kommer att ersätta det med en knapp för att samla push-prenumeranter.

Slutligen har du en Framgång-skärm som visas när din besökare prenumererar.

Låt oss göra detta steg för steg.

Steg 3: Ta bort e-postoptin från popup-fönstret

Du kan redigera vilken modul som helst i popup-fönstret du vill. Gå till Optin-skärmen i den nedre listen:

Här kan du hovra över e-postoptin-modulen och bara klicka på delete-knappen för att ta bort den:

Nu när e-postoptinet är borta kommer vi att lägga till en knapp som samlar prenumeranter på push-notiser.

Steg 4: Lägg till en klick-för-att-prenumerera-knapp till ditt popup-fönster

Lägg först till ett HTML -block till ditt popup-fönster från sidofältet i OptinMonster.

Det här är där vi kommer att lägga till koden för att samla prenumeranter på push-notiser. Klistra först in följande kod för att skapa en klickbar knapp:

<button class = "btn" onclick="subscribeOnClickButton()">Get Updates via Push Notifications Instead</button>

Klistra in koden där det står att du kan lägga till HTML. Vid det här laget bör du se en ny knapp i ditt popup-fönster:

Scrolla sedan ner och klistra in följande CSS i CSS-behållaren:

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;
}

Vid det här laget bör du se en vackert utformad knapp i ditt popup-fönster:

Steg 5: Hämta prenumerationskod från PushEngage

Push-notiser hjälper dig att öka din webbplatstrafik och engagemang automatiskt. Web push-notiser är ett effektivt sätt att få tillbaka användare som kan ha övergivit sin session eller lämnat webbplatsen. Det hjälper till att återengagera användare genom att meddela dem om nytt innehåll, erbjudanden eller händelser.

Push-notiser inkluderar också tydliga och handlingsbara meddelanden och knappar med uppmaning till handling, som uppmuntrar användare att vidta specifika åtgärder, som att läsa en artikel, slutföra ett köp eller delta i ett evenemang.

Du kan skräddarsy push-notiser baserat på användarnas preferenser, beteende och intressen, för att säkerställa att meddelandena är relevanta och värdefulla för varje användare. Användare måste godkänna att få web push-notiser. Detta säkerställer att meddelandena inte ses som skräppost och att de skickas med användarnas tillstånd.

Det coolaste är att du kan samla prenumeranter på push-notiser från ditt e-postformulär. Så, om dina webbplatsbesökare inte vill ge upp sin e-postadress, kan du fortfarande få dem att prenumerera med webbpush-notiser.

Vi rekommenderar att använda PushEngage för att skicka webbpush-notiser.

Här är en snabb överblick över vad du får med PushEngage:

• Högkonverterande automatiserade kampanjer
• Flera målgruppsinställningar och schemaläggningsalternativ för kampanjer
• Målspårning och avancerad analys
• Smart A/B-testning
• En dedikerad framgångschef

Du kan komma igång gratis, men om du menar allvar med att växa ditt företag bör du köpa en betald plan. Innan du köper någon pushmeddelandetjänst bör du också kolla in den här guiden till kostnader för pushmeddelanden.

Och om du driver en onlinebutik, hjälper PushEngage dig också att öka din försäljning genom att hjälpa dig att skapa automatiserade e-handels-push-notiser.

Du kommer att se att PushEngage är utan tvekan det bästa valet om du vill bygga trafik, engagemang och försäljning för ditt företag. Och om du har en budget kan du alltid vara lite kreativ med dina pushmeddelanden.

Gå till PushEngage startsida och klicka på knappen Kom igång :

Sedan vill du välja gratisplanen för att prova PushEngage eller välja en betald plan om du menar allvar med att växa din verksamhet. De betalda planerna kommer med fler kampanjalternativ och möjligheten att bygga ännu större prenumerantlistor.

I din PushEngage-instrumentpanel, gå till Webbplatsinställningar » Webbplatsdetaljer och klicka på knappen Klicka här för installationsinstruktioner. Under Valfri webbplats, får du din installationskod:

VARNING: Du måste kopiera koden du får från din instrumentpanel. Koden är unik för varje PushEngage-användare. Du kan inte kopiera koden i bilden och samla prenumeranter på push-notiser.

När du har koden i din PushEngage-instrumentpanel, ta det andra skriptet och lägg till lite extra kod. Din slutliga kod bör se ut ungefär så här:

<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>

Steg 6: Lägg till din prenumerationskod i HTML-blocket i ditt popup-fönster

Lägg till denna kod i HTML-blocket i OptinMonster och du är klar!

När du är klar, klicka bara på knapparna Spara och Publicera.

Steg 7: Lägg till klickspårning och kampanjavslut

Den sista delen vi behöver göra är att lägga till klickspårningskod för att betrakta varje prenumerant som en konvertering i OptinMonster. Dessutom, när besökaren prenumererar, vill du antingen att de ska flyttas till Framgång-skärmen eller avsluta kampanjen.

Inuti Javascript-snutten, lägg till följande kodrader:

För att aktivera konverteringsspårning, lägg till denna kod:

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

För att flytta din prenumerant till Framgång-skärmen, lägg till denna kod:

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

För att stänga kampanjen vid prenumeration, lägg till denna kod:

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

Du kan lägga till flera kodsnuttar också. Vi rekommenderar att du flyttar prenumeranter till Framgång-skärmen och spårar konverteringen. Så, den slutliga kodsnutten som vi rekommenderar att använda (inklusive knappen och all Javascript) är:

<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>

Eller så kan du använda denna kod istället för att stänga kampanjen direkt:

<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>

Kopiera och klistra bara in koden i HTML-blocket i ditt OptinMonster popup-fönster.

Och för båda kodsnuttarna, kom ihåg att lägga till följande CSS i CSS-sektionen av ditt HTML-block:

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;
}

När du är klar, klicka på Spara. Om du kontrollerar din webbplats bör du nu se popup-fönstret som samlar både e-post- och push-notis-prenumeranter:

Och precis så samlar du push-prenumeranter från ditt popup-fönster. Push-notiser kommer med sina egna popup-modaler. Men de är lite svåra att anpassa. Så du kan skapa vackra popup-fönster med OptinMonster och sedan använda dem som dina push-notis-popup-fönster.

Steg #8: Publicera ditt popup-fönster för avsikt att lämna i WordPress

När du skapar en ny kampanj är den Pausad som standard.

Gå till fliken Publicera i toppmenyn för att se Publiceringsalternativ. Ställ sedan in statusen till Publicera och välj webbplattformen:

Om du driver en WordPress-webbplats hanterar OptinMonster-pluginet resten av installationen automatiskt. Det är samma för Shopify och BigCommerce. För alla andra webbplatser, klicka på Valfri webbplats och klistra in inbäddningskoden i webbplatsens head:

Och du är klar!

Bonussteg: Inaktivera snabbinstallation i PushEngage

Snabbinstallation är en metod för att lägga till prenumeranter på push-notiser till en webbplats utan ett SSL-certifikat. Numera har nästan alla webbplatser ett SSL-certifikat, men om du mot förmodan inte har ett installerat, rekommenderar vi starkt att du installerar ett omedelbart. Kolla in den här artikeln om hur man installerar ett SSL-certifikat i WordPress.

Så innan du börjar samla prenumeranter på din webbplats rekommenderar vi att du även inaktiverar snabbinstallation. Gå till PushEngage-instrumentpanelen och gå till Design » Popup-modaler. Inaktivera sedan Snabbinstallation:

Och nu är du redo att marknadsföra din webbplats och samla fler prenumeranter inför Black Friday!

Vad du ska göra efter att du börjat samla push-prenumeranter

Det var allt för den här gången, gott folk!

Låt oss veta om den här artikeln hjälpte. Att skapa popup-fönster på din webbplats kan hjälpa dig att omvandla din trafik till push-prenumeranter och genuina affärsledningar. Och vi rekommenderar starkt att du börjar skapa popup-fönster för avsikt att lämna omedelbart.

Och om du letar efter ett prisvärt sätt att öka din trafik, rekommenderar vi att du använder push-notiser. Push-notiser kan hjälpa dig att få mer återkommande trafik och webbplatsengagemang. Du kan också skapa automatiserade push-notiskampanjer som genererar försäljning.

Inte övertygad? Kolla in dessa resurser:

• 7 smarta strategier för att öka kundengagemanget
• Är push-notiser effektiva? 7 statistik + 3 experttips
• Hur du ställer in pushmeddelanden för övergivna kundvagnar (Enkel handledning)
• Hur man lägger till ett WordPress-plugin för webbnotiser på din webbplats

Vi rekommenderar att använda PushEngage för att skapa dina push-notiskampanjer. PushEngage är den främsta push-notisprogramvaran i världen. Så om du inte redan har gjort det, kom igång med PushEngage idag!