Sådan tilføjer du en push-meddelelsesabonnementsknap til popups

Leder du efter en måde at tilføje en push-notifikationsabonnementsknap til dine popups?

Popups er en fantastisk måde at øge dine konverteringer og udvide en e-mail-liste. Men det er ikke alt, du kan gøre med dem. Hvis du bruger den rigtige popup-builder, kan du tilpasse alt ved dine popups.

Som standard kommer push-notifikationer også med popup-modaler. Men du kan få mange flere tilpasningsmuligheder med en popup-builder.

Så vi vil bruge en popup-builder til at bygge popupen og tilføje et abonnementslink til at indsamle push-abonnenter.

Du kan nemt tilføje en knap til at indsamle push-notifikationsabonnenter direkte fra dine popups. Og det er super nemt at gøre. Alt hvad du behøver er en popup-builder og en push-notifikationssoftware til at opsætte brugerdefinerede popups til at indsamle push-abonnenter.

Lad os dykke ned.

Sådan opretter du en popup til at indsamle push-abonnenter

Lad os starte med at oprette en popup. Vi anbefaler at bruge OptinMonster til at oprette alle dine popups.

OptinMonster er konverteringsværktøjskassen #1 i verden, og vi har brugt den selv. OptinMonster gør det super nemt at oprette kraftfulde popups, der konverterer. Og du behøver aldrig at bruge nogen kode overhovedet.

OptinMonster har stort set alt, hvad du behøver for at starte, vokse og skalere din leadgenereringsproces.

Her er en hurtig oversigt over, hvad du kan gøre ved hjælp af værktøjskassen:

• Indsaml push-notifikationsabonnenter ved hjælp af en popup
• Konverter førstegangsbesøgende til faste læsere
• Reducer kurv-forladelsesrater og browser-forladelsesrater
• Opret tidsbegrænsede tilbud med faktiske nedtællingstimere
• Øg eBook-downloads og salg af digitale produkter
• Opret en funnel til live-begivenheder
• Forbedre sideengagement ved hjælp af gamificerede popups
• Omdiriger din trafik til sider og indlæg, der tjener dig penge

Vi bruger OptinMonster en hel del, og vi har endda skrevet en fuld anmeldelse af OptinMonster. Du kan tjekke den ud, eller komme i gang med din kampagne lige nu. Alt du skal gøre er at tilmelde dig OptinMonster og følge med i resten af denne artikel.

Trin #1: Opret en popup-kampagne til at indsamle abonnenter

Gå til dit OptinMonster-dashboard og tryk på Opret-knappen:

Vælg Skabelon-indstillingen for at begynde at oprette en optin ved hjælp af en foruddesignet skabelon:

Til denne vejledning vil vi oprette en popup til Black Friday. Vælg Popup-kampagnetypen, og søg efter en kampagneskabelon

Du kan vælge den skabelon, du vil, men vi går med Black Friday-kampagneskabelonen til denne vejledning.

Når du har valgt din skabelon, skal du give din kampagne et navn. Husk, at dette kampagnenavn er til dig, og du vil sandsynligvis oprette en hel masse af disse popups med forskellige målretningsmuligheder. Så giv kampagnen et meningsfuldt navn, ellers bliver du virkelig forvirret senere.

Afhængigt af din plan kan du også bruge OptinMonster på flere websteder. Så vælg det websted, hvor du vil vise din kampagne. Tryk på Start opbygning , når du er færdig.

Trin #2: Rediger din popup for at tilpasse udseendet

Med OptinMonster får du en visuel træk-og-slip popup-builder. Når du er færdig med at navngive din kampagne, vil du kunne redigere selv de mindste detaljer om din popup.

Den mest fantastiske del her er, at du bare klikker på den tekst, du vil redigere, og ændrer den inline. Der er ingen grund til at udfylde en formular eller redigere HTML-kode i popup'en.

Du kan redigere alt, hvad du vil, om din popup, inklusive billeder. Når du er tilfreds med optin-udseendet, kan du gå videre til mere avancerede indstillinger.

Måden, denne specifikke skabelon er sat op på, er, at der er tre dele til popup'en. Du har en indledende Ja/Nej-skærm, hvor den besøgende vælger en kupon til Black Friday. Det er det, du ser på billedet ovenfor. Som standard er det en gratis forsendelseskupon. Men du kan tilføje ethvert tilbud eller kupon, du ønsker.

Når dine besøgende klikker på Ja-knappen på popup'en, sendes de til Optin-skærmen. Det er her, du ville indsamle abonnenter. Som standard indsamler optin-skærmen e-mails. Vi vil erstatte det med en knap til at indsamle push-abonnenter.

Endelig har du en Succes-skærm, der vises, når din besøgende abonnerer.

Lad os gøre dette et skridt ad gangen.

Trin #3: Fjern e-mail-optin fra popup'en

Du kan redigere ethvert modul i popup'en, du ønsker. Gå til Optin-skærmen i bundlinjen:

Her kan du holde musen over e-mail-optin-modulet og bare klikke på slet-knappen for at fjerne det:

Nu hvor e-mail-optin er væk, vil vi tilføje en knap til den, der indsamler push-notifikationsabonnenter.

Trin #4: Tilføj en Klik for at abonnere-knap til din popup

Tilføj først en HTML -blok til din popup fra sidepanelet i OptinMonster.

Her er, hvor vi skal tilføje koden til at indsamle push-notifikationsabonnenter. Indsæt først følgende kode for at oprette en klikbar knap:

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

Indsæt koden, hvor der står, at du kan tilføje HTML. På dette tidspunkt bør du se en ny knap i din popup:

Rul derefter ned, og indsæt følgende CSS i CSS-containeren:

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

På dette tidspunkt bør du se en smukt udseende knap på din popup:

Trin #5: Hent abonnementskode fra PushEngage

Push-notifikationer hjælper dig med at øge din hjemmesidetrafik og engagement automatisk. Web push-notifikationer er en effektiv måde at bringe brugere tilbage, der måske har forladt deres session eller forladt hjemmesiden. Det hjælper med at gen-engagere brugere ved at underrette dem om nyt indhold, tilbud eller begivenheder.

Push-notifikationer inkluderer også klare og handlingsrettede beskeder og call to action-knapper, der opfordrer brugerne til at udføre specifikke handlinger, såsom at læse en artikel, gennemføre et køb eller deltage i en begivenhed.

Du kan skræddersy push-notifikationer baseret på brugernes præferencer, adfærd og interesser for at sikre, at beskederne er relevante og værdifulde for hver bruger. Brugere skal acceptere at modtage web push-notifikationer. Dette sikrer, at beskederne ikke opfattes som spam, og at de sendes med brugernes tilladelse.

Det fedeste er, at du kan indsamle push-notifikationsabonnenter fra din e-mail-popup. Så hvis dine webstedsbesøgende ikke ønsker at give deres e-mail-id, kan du stadig få dem til at abonnere ved hjælp af web push-notifikationer.

Vi anbefaler at bruge PushEngage til at sende web push-notifikationer.

Her er et hurtigt overblik over, hvad du får med PushEngage:

• Højkonverterende automatiserede kampagner
• Flere målretningsmuligheder og kampagneplanlægningsmuligheder
• Målsporing og avanceret analyse
• Smart A/B-test
• En dedikeret succesmanager

Du kan komme i gang gratis, men hvis du er seriøs omkring at vækste din forretning, bør du købe en betalt plan. Før du køber en push-notifikationstjeneste, bør du også se denne guide til priser på push-notifikationer.

Og hvis du driver en online butik, hjælper PushEngage dig også med at øge dit salg ved at hjælpe dig med at oprette automatiserede e-handels push notifikationer.

Du vil se, at PushEngage uden tvivl er det bedste valg, hvis du vil opbygge trafik, engagement og salg for din virksomhed. Og hvis du har et stramt budget, kan du altid være lidt kreativ med dine push-notifikationer.

Gå til PushEngage hjemmeside og klik på knappen Kom i gang :

Vælg derefter gratisplanen for at prøve PushEngage, eller vælg en betalt plan, hvis du er seriøs omkring at udvide din virksomhed. De betalte planer kommer med flere kampagnemuligheder og muligheden for at opbygge endnu større abonnentlister.

På dit PushEngage dashboard skal du gå til Sideindstillinger » Sideoplysninger og klikke på knappen Klik her for opsætningsinstruktioner. Under Enhver side får du din installationskode:

ADVARSEL: Du skal kopiere den kode, du får fra dit dashboard. Koden er unik for hver PushEngage-bruger. Du kan ikke kopiere koden på billedet og indsamle push-notifikationsabonnenter.

Når du har koden i dit PushEngage-dashboard, skal du tage det andet script og tilføje lidt ekstra kode til det. Din endelige kode skal se nogenlunde sådan ud:

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

Trin #6: Tilføj din abonnementskode til HTML-blokken i din popup

Tilføj denne kode til HTML-blokken i OptinMonster, og du er færdig!

Når du er færdig, skal du blot trykke på knapperne Gem og Udgiv.

Trin #7: Tilføj kliksporing og kampagnelukning

Den sidste ting, vi skal gøre, er at tilføje kliksporkode for at betragte hver abonnent som en konvertering i OptinMonster. Når den besøgende abonnerer, vil du enten have dem til at gå til Succes-skærmen eller afslutte kampagnen.

Inde i Javascript-snippetet skal du tilføje følgende kodelinjer:

For at aktivere konverteringssporing skal du tilføje denne kode:

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

For at flytte din abonnent til Succes-skærmen skal du tilføje denne kode:

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

For at lukke kampagnen ved abonnement skal du tilføje denne kode:

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

Du kan også tilføje flere kodestykker. Vi anbefaler, at du flytter abonnenter til Succes-skærmen og sporer konverteringen. Så det endelige kodestykke, vi anbefaler at bruge (inklusive knappen og al Javascript), er:

<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 du kan bruge denne kode i stedet for at lukke kampagnen direkte:

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

Bare kopier og indsæt koden i HTML-blokken i din OptinMonster-popup.

Og for begge kodestykker skal du huske at tilføje følgende CSS i CSS-sektionen af din 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;
}

Når du er færdig, skal du klikke på Gem. Hvis du tjekker dit websted, bør du nu se popup'en indsamle både e-mail- og push-notifikationsabonnenter:

Og lige som det, indsamler du push-abonnenter fra din popup. Push-notifikationer kommer med deres egne popup-modaler. Men de er lidt svære at tilpasse. Så du kan oprette smukke popups ved hjælp af OptinMonster og derefter bruge dem som dine push-notifikationspopups.

Trin #8: Udgiv din exit-intent popup i WordPress

Når du opretter en ny kampagne, er den pauset som standard.

Gå til fanen Udgiv fra topmenuen for at se Udgivelsesindstillinger. Indstil derefter status til Udgiv og vælg webstedsplatformen:

Hvis du kører et WordPress-websted, håndterer OptinMonster-pluginet resten af opsætningen automatisk. Det er det samme for Shopify og BigCommerce. For ethvert andet websted skal du klikke på Ethvert websted og indsætte embed-koden i dit websteds hoved:

Og du er færdig!

Bonustrin: Deaktiver hurtig installation i PushEngage

Quick Install er en metode til at tilføje push-notifikationsabonnenter til et websted uden et SSL-certifikat. I dag har næsten alle websteder et SSL-certifikat, men for en sikkerheds skyld, hvis du ikke har et installeret, anbefaler vi kraftigt, at du får et installeret med det samme. Se denne artikel om hvordan man installerer et SSL-certifikat i WordPress.

Så før du begynder at indsamle abonnenter på dit websted, anbefaler vi også at deaktivere Quick Install. Gå til PushEngage-dashboardet og gå til Design » Popup-modaler. Deaktiver derefter Quick Install:

Og nu er du klar til at promovere dit websted og indsamle flere abonnenter til Black Friday!

Hvad skal du gøre, efter du er begyndt at indsamle push-abonnenter

Det var alt for denne gang, folkens!

Lad os vide, om denne artikel hjalp. Oprettelse af popups på dit websted kan hjælpe dig med at konvertere din trafik til push-abonnenter og ægte forretningsleads. Og vi anbefaler kraftigt, at du begynder at oprette exit-intent popups med det samme.

Og hvis du leder efter en overkommelig måde at øge din trafik på, anbefaler vi at bruge push-notifikationer. Push-notifikationer kan hjælpe dig med at få mere gentagen trafik og engagement på webstedet. Du kan også oprette automatiserede push-notifikationskampagner, der genererer salg.

Ikke overbevist? Tjek disse ressourcer:

• 7 Smarte Strategier til at Øge Kundeengagement
• Er Push-notifikationer Effektive? 7 Statistikker + 3 Eksperttips
• Sådan opsættes push-meddelelser om forladte indkøbskurve (nem vejledning)
• Sådan tilføjer du et Web Notifications WordPress-plugin til dit websted

Vi anbefaler at bruge PushEngage til at oprette dine push-notifikationskampagner. PushEngage er den #1 push-notifikationssoftware i verden. Så hvis du ikke allerede har gjort det, kom i gang med PushEngage i dag!