Hur man enkelt lägger till meddelanden i webbläsarfliken i WordPress

Webbläsarfliknotiser är en av de enkla men effektiva funktionerna som tyst håller besökare engagerade och uppmuntrar dem att komma tillbaka.

Till exempel använder WPForms detta för att försiktigt påminna användare att återvända och slutföra sitt köp när de byter flikar. Det är subtilt, icke-påträngande och kan öka konverteringsgraden på din webbplats.

I den här guiden visar vi hur du enkelt kan lägga till dessa uppseendeväckande fliknotiser till din WordPress-webbplats. 🙌

När du väl har provat det kommer du att se varför det är ett så användbart verktyg för att hålla besökarna fokuserade och återkommande.

Vad är en webbläsarfliksavisering?

En webbläsarfliksavisering är ett meddelande som visas i fliken för din webbplats när en av våra besökare tittar på en annan webbplats i sin webbläsare.

Genom att lägga till en funktion för webbläsarfliksaviseringar på din WordPress-webbplats kan du fånga användarens uppmärksamhet i samma ögonblick som de öppnar en annan flik för att lämna din sida.

Du kan till exempel ändra favicon på din webbplats, animera den, skriva ett anpassat meddelande eller bara blinka fliken.

Om du har en onlinebutik kan webbläsarfliksmeddelanden verkligen hjälpa dig. Dessa meddelanden kommer att locka tillbaka distraherade kunder, minska övergivna kundvagnar och öka kundengagemanget.

Med den här funktionen kan du varna dina kunder om övergivna kundvagnar eller till och med erbjuda en rabatt om de återfår sin uppmärksamhet till din webbplats.

Här är ett exempel på en webbläsarfliksavisering.

Med det sagt kommer vi att visa dig hur du enkelt lägger till olika typer av meddelanden i webbläsarfliken i WordPress.

Du kan använda länkarna nedan för att hoppa till den metod du väljer:

• Installera WPCode för att lägga till webbläsarfliksanmälningar
• Typ 1: Visa nya uppdateringar som en webbläsarfliksavisering
• Typ 2: Ändra favicons som en webbläsarfliksnots
• Typ 3: Ändra sidtiteln som en webbläsarfliksavisering
• Bonus: Lägg till webb-push-notiser till din WordPress-webbplats

Installera WPCode för att lägga till webbläsarfliksanmälningar

Du kan enkelt lägga till webbläsarfliksnots på din webbplats genom att lägga till anpassad kod i WordPress. Vanligtvis måste du redigera din temas functions.php-fil, men det kan bryta din webbplats med ett litet fel.

Därför rekommenderar vi att använda WPCode, som är det bästa WordPress kodsnuttar-pluginet på marknaden.

Vi har funnit att det är det säkraste och enklaste sättet att lägga till anpassad kod på din webbplats. För mer information, se vår WPCode-recension.

Först måste du installera och aktivera pluginet WPCode. För mer information kan du se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Gå efter aktivering till sidan Kodavsnitt » + Lägg till kodavsnitt från din WordPress admin-sidomeny.

Håll nu muspekaren över alternativet ‘Lägg till din anpassade kod (nytt kodavsnitt)’ och klicka på knappen ‘+ Lägg till anpassat kodavsnitt’ under den.

Välj sedan kodtyp från listan med alternativ som visas på skärmen.

Därefter kommer du att tas till sidan 'Skapa anpassat kodavsnitt'.

Oavsett vilken typ av webbläsarfliksnottis du använder, kommer du att ange koden här.

Typ 1: Visa nya uppdateringar som en webbläsarfliksavisering

Den här metoden är för dig om du vill att dina användare ska varnas om nya uppdateringar som publiceras på din webbplats. Ett nummer kommer att visas i fliken för att tala om för dem hur många nya objekt de saknar.

Till exempel, om du har en WooCommerce-butik och du precis har lagt till några nya produkter i lagret, kommer användaren att se ett nummer som anger hur många nya produkter som har lagts till i meddelandet i webbläsarfliken.

Du kan se detta i bilden nedan:

När du är på sidan ‘Skapa anpassad kodsnutt’ måste du namnge din kodsnutt. Du kan välja vad som helst som hjälper dig att identifiera koden.

Välj sedan ‘JavaScript-kodsnutt’ som ‘Kodtyp’ från rullgardinsmenyn till höger.

Sedan behöver du bara kopiera och klistra in följande kodavsnitt i rutan 'Kodförhandsgranskning':

let count = 0;
const title = document.title;
function changeTitle() {
    count++;
    var newTitle = '(' + count + ') ' + title;
    document.title = newTitle;
}
function newUpdate() {
    const update = setInterval(changeTitle, 2000);
}
document.addEventListener('DOMContentLoaded', newUpdate );

När du har gjort det, scrolla ner till avsnittet 'Infogning'. Du hittar två alternativ: 'Auto Infoga' och 'Kortkod'.

Välj helt enkelt alternativet ‘Infoga automatiskt’, så kommer din kod att infogas och köras automatiskt på din webbplats.

Du kan använda metoden 'Kortkod' om du bara vill visa nya uppdateringar på specifika sidor där du lägger till kortkoden.

Därefter, scrolla tillbaka till toppen av sidan och byt från 'Inaktiv' till 'Aktiv'.

Klicka slutligen på knappen ‘Spara utdrag’ för att lagra dina inställningar.

När det är klart kommer ditt anpassade kodavsnitt att läggas till på din webbplats och börja fungera.

Typ 2: Ändra favicons som en webbläsarfliksnots

Med den här metoden kommer du att visa en annan favicon i din webbplats webbläsarflik när användare navigerar bort till en annan flik.

En favicon är en liten bild som visas i webbläsare. De flesta företag använder en mindre version av sin logotyp.

För att ändra faviconer i din webbläsarflik kommer vi att använda WPCode-pluginet.

Gå först till sidan Kodavsnitt » + Lägg till kodavsnitt i din WordPress-adminpanel och klicka på knappen ‘Använd kodavsnitt’ under alternativet ‘Lägg till din anpassade kod (nytt kodavsnitt)’.

Detta tar dig till sidan 'Skapa anpassad kodsnutt', där du kan börja med att ange en titel för din kodsnutt.

Välj nu helt enkelt ‘HTML-avsnitt’ som ‘Kodtyp’ från rullgardinsmenyn till höger.

När du har gjort det, kopiera och klistra in följande kod i rutan 'Kodförhandsgranskning':

<link id="favicon" rel="icon" href="https://example.com/wp-content/uploads/2022/10/favicon.png"/>

<script>var iconNew = 'https://example.com/wp-content/uploads/2022/10/favicon-notification.png';

function changeFavicon() {
    document.getElementById('favicon').href = iconNew;
}
function faviconUpdate() {
    const update = setInterval(changeFavicon, 3000);
    setTimeout(function() { 
        clearInterval( update ); 
    }, 3100);
}

När du har klistrat in koden, ta helt enkelt bort exempel-favicon-länkarna från koden och ersätt dem med dina egna bildlänkar.

Du kan se länkarna markerade i vår kod nedan.

Kom ihåg att bilderna du väljer som favicons redan bör vara uppladdade till mediabiblioteket på din WordPress-webbplats.

Annars kommer koden inte att fungera, och din favicon kommer inte att ändras.

När du har gjort det, scrolla ner till avsnittet 'Infogning'.

Du kan välja alternativet 'Automatisk infogning' om du vill bädda in koden automatiskt på varje sida.

För att ändra favicon på endast specifika sidor, välj alternativet ‘Kortkod’ och klistra in den i ett område som stöder kortkoder, som sidofältswidgetar eller längst ner i innehållsredigeraren.

Gå sedan till toppen av sidan och växla omkopplaren från ‘Inaktiv’ till ‘Aktiv’ i det övre högra hörnet, och klicka sedan på knappen ‘Spara kodavsnitt’.

Efter det kommer din favicon att börja ändras som en webbläsarfliksnots.

Typ 3: Ändra sidtiteln som en webbläsarfliksavisering

Den här metoden är för dig om du vill ändra webbplatsens titel för att återfånga dina besökares uppmärksamhet.

Genom att använda detta kodavsnitt kommer din webbplatstitel att ändras för att visa ett iögonfallande meddelande när användare byter till en annan flik i webbläsaren.

Vi kommer att använda WPCode-pluginet för att ändra din webbplatstitel som en webbläsarfliksavisering.

För att komma till sidan 'Skapa anpassad snippet', besök sidan Kodsnuttar » +Lägg till snippet från admin sidofältet och klicka på '+ Lägg till anpassad snippet' under alternativet 'Lägg till din anpassade kod (Ny snippet)'.

Därefter måste du välja 'JavaScript-avsnitt' som kodtyp från listan över alternativ som visas på skärmen.

Nu när du är på sidan 'Skapa anpassat kodavsnitt', börja med att ange en titel för ditt kodavsnitt. Detta kan vara vad som helst för att hjälpa dig att komma ihåg vad koden är till för.

Kopiera sedan bara följande kodavsnitt och klistra in det i rutan 'Kodförhandsgranskning':

function changeTitleOnBlur() {
	var timer     = null;
	var	title     = document.title;
	var altTitle  = 'Return to this page!';
	window.onblur = function() {
		timer = window.setInterval( function() {
			document.title = altTitle === document.title ? title : altTitle;
		}, 1500 );
	}
	window.onfocus = function() {
		document.title = title;
		clearInterval(timer);
	}
}

changeTitleOnBlur();

När du har klistrat in koden kan du redigera den och helt enkelt skriva det meddelande du vill visa på din webbläsarflik i koden.

För att skriva ditt önskade meddelande, gå helt enkelt till raden var altTitle = 'Återgå till den här sidan!'; och ta bort platshållartexten med meddelandet för din webbläsarfliksnottis.

Rulla sedan ner till avsnittet ‘Infogning’ och välj läget ‘Automatisk infogning’ för att aktivera din webbläsarfliksanmälan på varje sida.

Men om du bara vill att ditt iögonfallande meddelande ska visas på specifika sidor kan du välja alternativet ‘Kortkod’.

Till exempel kanske du bara vill lägga till den här koden på sidan 'Lägg till i kundvagn' så att den kan minska övergivna kundvagnspriser på din webbplats.

Om så är fallet kan du välja alternativet Kortkod.

Skrolla sedan ner till alternativet 'Plats' och klicka på rullgardinsmenyn bredvid det.

Härifrån väljer du alternativet 'Webbplatsomfattande sidfot'.

Slutligen, skrolla tillbaka till toppen av sidan och växla omkopplaren från ‘Inaktiv’ till ‘Aktiv’.

Klicka sedan på knappen 'Spara snippet' för att lagra dina inställningar.

Det var allt! Nu kommer din webbläsarfliksavisering att varna användare som lämnar din webbplats.

Bonus: Lägg till webb-push-notiser till din WordPress-webbplats

Ett annat sätt att locka tillbaka besökare och minska övergivna varukorgar är att skicka webbpush-notiser till dina användare. Dessa notiser är klickbara korta meddelanden som skickas till dina besökare även när de inte är på din webbplats.

Du kan enkelt göra detta med PushEngage, som är den bästa programvaran för pushanmälningar på marknaden.

Det låter dig automatiskt skicka nya blogginläggsmeddelanden eller anpassade meddelanden och ställa in droppkampanjer utan någon kod. Vi använder det till och med på WPBeginner och har haft en utmärkt erfarenhet.

För detaljer, se vår PushEngage-recension.

Pluginet erbjuder också andra funktioner, såsom förgjorda mallar, A/B-testning, användarsegmentering, smarta påminnelser om opt-in, anpassade utlösta kampanjer och interaktiva meddelandealternativ.

Du kan använda alla dessa funktioner för att skapa övergivna kundvagnsnotiser, schemalägga meddelanden och skicka prisfallsvarningar, vilket leder till mer webbplatstrafik.

För mer information, se vår nybörjarguide om hur man lägger till webbpush-notiser i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till webbläsarfliknotiser i WordPress. Du kanske också vill se vår handledning om hur du lägger till funktionsrutor med ikoner i WordPress och kolla in vår lista över sätt att lägga till en mobilvänlig WordPress-webbplats.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.