Hur du enkelt lägger till webbläsarfliksnotsifieringar 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
• Vanliga frågor om att lägga till aviseringar i webbläsarfliken

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

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

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 kodtypen från listan med alternativ 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 utmärkt om du vill fånga användarens uppmärksamhet genom att simulera aktivitet på din webbplats. Ett nummer kommer att visas i flikens titel, vilket gör att det ser ut som om ett nytt meddelande eller en uppdatering väntar på användaren.

Till exempel använder webbplatser som Facebook och LinkedIn detta för att visa olästa aviseringar. Du kan använda denna psykologiska utlösare för att uppmuntra användare att byta tillbaka till din flik för att se vad de missar.

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 Snippet” som ”Code Type” från menyn.

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

Den här koden talar om för webbläsaren att börja räkna när användaren byter till en annan flik. Så fort de återvänder till din webbplats återställs titeln till det normala.

När du har gjort det, scrolla ner till avsnittet 'Insertion'. Välj helt enkelt alternativet 'Auto Insert' och lämna platsen som 'Site Wide Header'.

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 webbläsarfliken när användare navigerar till en annan flik. Detta är ett subtilt sätt att påminna dem om att din webbplats fortfarande är öppen.

För att göra detta kommer vi att använda ett JavaScript-utdrag som byter bild när användaren lämnar sidan.

Besök först sidan Code Snippets » + Add Snippet och klicka på '+ Add Custom Snippet'.

På skapar-sidan, välj 'JavaScript Snippet' som 'Code Type' från menyn.

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

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

Efter att ha klistrat in koden måste du ersätta URL:en på raden Favicon med länken till din egen notifikationsbild.

Ladda helt enkelt upp din nya favicon till WordPress mediabibliotek och kopiera filnamnet (i mitt exempel är det daisy.jpeg). Klistra sedan in det inom citattecknen i koden.

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å 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 webbplats titel till en webbläsarfliksnotifikation.

För att komma till sidan 'Create Custom Snippet', besök sidan Code Snippets » + Add Snippet från administratörs-sidofältet.

Klicka här på '+ Add Custom Snippet' under alternativet 'Add Your Custom Code (New 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 'Create Custom Snippet', börja med att ange en titel för ditt kodutdrag.

Detta kan vara vad som helst för att hjälpa dig att komma ihåg vad koden är till för.

Sedan behöver du bara kopiera och klistra in följande kodavsnitt 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 i varukorg’ för att minska övergivna varukorgar 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 kodsnutt’ 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

Aviseringar i webbläsarfliken är effektiva, men de har en stor begränsning. De fungerar bara om användaren har din flik öppen.

Om du vill nå besökare även efter att de har stängt din webbplats behöver du webb-pushnotiser. Till skillnad från flikvarningar är detta aktiva meddelanden som skickas direkt till användarens enhet eller webbläsare.

Det enklaste sättet att ställa in detta är med PushEngage. Det är den bästa programvaran för pushnotiser på marknaden.

PushEngage låter dig skicka automatiska uppdateringar för nya blogginlägg, prissänkningar eller övergivna kundvagnar. Vi använder det här på WPBeginner för att meddela våra prenumeranter om nya handledningar, och det är en toppkälla till återkommande trafik för oss.

För att lära dig mer om det, se vår fullständiga PushEngage-recension.

Den innehåller kraftfulla funktioner som A/B-testning, automatiska pushar, användarsegmentering och smarta påminnelser om opt-in. Dessa verktyg hjälper dig att bygga en lojal publik som fortsätter att komma tillbaka.

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

Vanliga frågor om att lägga till aviseringar i webbläsarfliken

Här är några frågor som våra läsare ofta ställer relaterat till att lägga till flikvarningar i webbläsaren i WordPress:

Hur lägger jag till en meddelandefält i WordPress?

Det enklaste sättet att lägga till ett meddelandefält är att använda ett plugin som OptinMonster. Det låter dig skapa klistriga fält som sitter längst upp eller längst ner på din webbplats för att visa uppdateringar, reor eller varningar utan att skriva någon kod.

För mer information, se vår handledning om att skapa en varningsfält i WordPress.

Hur lägger jag till aviseringar i WordPress?

För att lägga till aviseringar på webbplatsen kan du använda ett plugin som PushEngage eller WPCode.

PushEngage hanterar aktiva webbpush-aviseringar som skickas till webbläsare, medan WPCode låter dig lägga till anpassade skript för passiva flikrubriksvarningar, som de i den här guiden.

Hur aktiverar jag webbläsaraviseringar?

Du måste registrera dig för en webbpush-aviserings-tjänst som PushEngage.

När du har installerat deras WordPress-plugin kan din webbplats automatiskt be besökare om tillstånd att skicka varningar till deras webbläsare/enhet, även när de inte är på din webbplats just nu.

Hur lägger jag till ett meddelande i WordPress?

Du kan lägga till ett enkelt meddelande i ett inlägg med hjälp av standardblocket Grupp med en bakgrundsfärg i WordPress-redigeraren.

För meddelanden som visas på hela webbplatsen, på varje sida, rekommenderar vi att du använder ett plugin för flytande fält som OptinMonster eller SeedProd.

Hur lägger jag till ett popup-banner i WordPress?

Det bästa verktyget för att lägga till popup-banners är OptinMonster.

Det ger en dra-och-släpp-byggare för att skapa lightboxes, slide-ins och flytande banners som triggas baserat på specifika användarbeteenden, såsom tid på sidan eller avsikt att lämna.

För att komma igång, se vår handledning om att lägga till en popup 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.