Skapa en länk för att prenumerera på push-meddelanden med ett klick

Letar du efter ett sätt att skapa en klick-för-att-prenumerera-länk och samla prenumeranter på push-notiser?

Vi förstår. Ibland är det mycket bekvämare att ha lite flexibilitet i hur du växer dina prenumeranter.

Oroa dig inte. Vi har dig täckt.

I den här artikeln kommer vi att visa dig steg-för-steg hur du skapar din egen prenumerationsknapp eller länk.

Vi kommer att använda PushEngage för att visa dig hur du gör det.

Men oroa dig inte ens om du använder en annan leverantör. Processen bör vara ganska liknande. Men om du menar allvar med att växa dina prenumeranter bör du prova PushEngage. PushEngage är den främsta push-notisprogramvaran i världen.

Så, om du inte redan har gjort det, kom igång med PushEngage idag.

Redo? Låt oss dyka in.

Hur man skapar en klick-för-att-prenumerera-knapp med PushEngage

Om du inte har ställt in PushEngage ännu är det ett bra tillfälle att göra det.

Steg 1: Kom igång med PushEngage

Gå till PushEngages 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.

Steg 2: Kopiera kodavsnittet

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 kommer inte att kunna kopiera koden på bilden och samla prenumeranter på push-notiser.

När du har koden i din PushEngage-instrumentpanel, lägg till detta kodavsnitt i din kod:

<script> window._peq = window._peq || [];</script>

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 || [];</script>

Steg 3: Skapa en knapp eller länk

Hur man skapar en knapp för prenumeration vid klick i HTML

Nu när du har koden är det mesta av det svåra gjort. Nu måste du skapa en knapp som utlöser din kod när den klickas. Detta är vad vi kallar en 'onclick-händelse'.

För att skapa en knapp för prenumeration vid klick, använd detta HTML-kodavsnitt:

<button onclick="subscribeOnClickButton()">Subscribe</button>

En prenumerationsknapp kan vara utmärkt som en uppmaning till handling ovanför vecket.

Här är hur det skulle se ut utan någon styling:

Ignorera rubriken och stycket i skärmdumpen. Det är bara för att visa dig hur det kan se ut på en webbplats första veck. HTML-kodavsnittet kommer inte att generera rubriken och stycket.

Självklart bör du styla din knapp med CSS när du klistrar in koden. Om du inte vet hur man stylar HTML-element, här är en fin lista med exempel du kan titta på.

Hur man skapar en länk för prenumeration vid klick i HTML

Du kan också samla dina prenumeranter med en prenumerationslänk. I så fall är här HTML-kodavsnittet:

<a onclick="subscribeOnClickButton();" href="javascript:void(0)">Subscribe</a>

Detta är för när du skapar en hyperlänk i texten. Detta kan vara mycket användbart om du vill infoga ett erbjudande om prenumeration på push-notiser i dina blogginlägg.

Det bör se ut ungefär så här:

Your HTML snippet will only create a link that says Subscribe. Feel free to add the rest of the content as we did in the image. That way, it will feel way more natural.

And that’s it! Your link’s ready.

Step #4: Embed the Code in WordPress

Done? Let’s get to the rest of the code, then.

Now, if you want only to collect a subscriber when the button gets clicked, paste this code:

<script>
function subscribeOnClickButton() {
window._peq.push(['subscribe']);
}
</script>

There are no fancy bells and whistles here. Just a button that collects subscribers when clicked.

But if you’d like something a little more advanced, you can log the response you get from the PushEngage server to the console as well:

function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
if(res.statuscode==1)
{
// Code to return response
console.log(res);
}
}]);
}

If you want to collect subscribers when your button gets clicked and then segment those subscribers automatically, you can use this code instead:

function subscribeOnClickButton(){
window._peq.push(['subscribe','segment_name',function(res){
if(res.statuscode==1)
{
// Code to return response
console.log(res);
}
}]);
}

And you’re done. Pick whichever code snippet suits you the best and paste it into your website’s HTML code.

Now, for the button or the link to work, you’ll need to paste some more Javascript code at the bottom of your page.

If you’re running a WordPress site, then the simplest way to do it is to use a plugin. The best plugin for the job is the Insert Headers and Footers plugin. Install the plugin (it’s free) and head over to Settings » Insert Headers and Footers:

And place your full code in the Scripts in Footer box. You should be pasting in the code you got from the PushEngage dashboard as well as the Javascript code you need to run the button or link properly.

Step #5: Paste the HTML Code for the Button or Link on Your Site

Finally, you’ll need to paste the HTML code for either your button or your link on your pages and posts.

If you’re on WordPress, you can paste HTML code directly onto the article.

It’s fine if you’ve never done this before.

Here’s an article on how to add HTML code in WordPress with step-by-step instructions.

At this point, we highly recommend that you test your push notifications to check if everything’s working.

If all went well, you will have a button or a link on your site that collects subscribers when clicked. And if something isn’t working, feel free to get in touch with our Customer Success team. We’re more than happy to help.

Avslutning

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

Once you’ve created a click-on-subscribe button for your site, you should check out our advanced segmentation rules.

Creating granular segments can help you personalize your push notifications to a great extent. This means more engagement, higher clicks, and more sales from your push notification campaigns.

And if you’re new to push notifications, you should try out PushEngage. PushEngage offers some of the most powerful and flexible push notification campaigns anywhere. So, if you’re serious about growing your business, get started with PushEngage today!