Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Så här lägger du enkelt till aviseringar för tabbar i webbläsaren i WordPress

Om du letar efter ett kreativt sätt att hålla besökarna engagerade i ditt innehåll, även när de byter karta, är det en utmärkt idé att lägga till aviseringar för webbläsarflikar i WordPress.

Notiser på webbläsarfliken är dynamiska meddelanden eller varningar som visas på själva kartan. De kan hjälpa till att fånga människors uppmärksamhet och få dem att återvända till din webbplats. Den här subtila funktionen kan öka engagemanget och hjälpa dig att uppnå dina mål.

Vi har använt aviseringar i webbläsarens karta i flera av våra partnervarumärken, som WPForms. Av erfarenhet har vi märkt att många användare som lämnar webbplatsen tenderar att återvända efter att ha sett ett meddelande i webbläsarens karta.

I den här artikeln visar vi hur du enkelt kan add to aviseringar av tabbar i webbläsaren i WordPress.

How to Add Browser Tab Notification in WordPress

Vad är en avisering av en tabs i webbläsaren?

En notification för en flik i webbläsaren är ett message som visas i tabben för din website när en av våra visitors tittar på en annan site i sin webbläsare.

Genom att lägga till en aviseringsfunktion för webbläsarflikar på din WordPress-webbplats kan du fånga användarens uppmärksamhet i det ögonblick de öppnar en annan karta för att lämna din sida.

You can for example change the favicon of your website, animate it, write a custom message, or just flash the tabs.

Om du har en butik på nätet kan aviseringar i webbläsarens tabs verkligen hjälpa dig. Dessa aviseringar kommer att få tillbaka distraherade kunder, sänka antalet övergivna cart och öka kundernas engagemang.

Med hjälp av den här funktionen kan du alerta dina kunder om att de överger sin cart eller till och med erbjuda en rabatt om de återvänder till din site.

Här är ett exempel på en notification för en tab i webbläsaren.

Browser tab notification example gif

Med detta sagt kommer vi att visa dig hur du enkelt kan add to olika typer av aviseringar av tabbar i webbläsaren i WordPress.

Du kan använda länkarna under för att hoppa till den metod du vill använda:

Installera WPCode för att add to aviseringar i webbläsarens tabs

Du kan enkelt lägga till aviseringar om flikar i webbläsaren på din site genom att lägga till custom code i WordPress. Vanligtvis måste du editera ditt temas functions.php-fil, men det kan förstöra din website även med ett litet error.

Det är därför vi rekommenderar att du använder WPCode, som är det bästa WordPress code snippets plugin på marknaden. Det är det säkraste och enklaste sättet att add to custom code till din site.

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

Note : WPCode har också en gratis version som du kan använda för denna tutorial. Men genom att upgrading till den betalda planen ger dig tillgång till fler funktioner.

Efter aktivering, besök Code Snippets ” + Add Snippet page från din WordPress admin sidebar.

Håll nu muspekaren över alternativet ”Add Your Custom Code (New Snippet)” och klicka på knappen ”Use Snippet” under den.

Add new snippet

Detta kommer att ta dig till ”Create Custom Snippet” page.

Oavsett vilken typ av notification av tabs i webbläsaren du använder, kommer du att enter koden här.

Create Custom Snippet page

Typ 1: Visa nya updates som aviseringar på en tabb i webbläsaren

Den här metoden är för dig om du vill att dina användare ska bli alerta om alla nya updates som publiceras på din site. Ett nummer kommer att visas i tabben för att berätta för dem hur många nya objekt de saknar.

Om du till exempel har en WooCommerce store och du just har lagt till några nya produkter i lagret, kommer användaren att se ett nummer som anger hur många nya produkter som lades till i webbläsarens tabs notification.

Du kan se detta på bilden under:

New Updates as browser tab notification

När du är på sidan ”Create Custom Snippet” måste du namnge ditt snippet. Du kan välja vad som helst som hjälper dig att identifiera koden.

Därefter väljer du ”JavaScript Snippet” som ”Code Type” i dropdown-menyn till höger.

Select JavaScript as Code Type

Sedan är allt du behöver göra att copy and paste följande code snippet i ”Code Preview” boxen:

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 rullar du ner till ”Insertion” section. Du hittar två alternativ: ”Auto Insert” och ”Shortcode”.

Välj bara alternativet ”Auto Insert” så infogas din kod automatiskt och körs på din site.

Du kan använda metoden ”Shortcode” om du bara vill visa nya updates på specifika pages där du addar shortcoden.

Choose an insertion method

Därefter rullar du tillbaka högst upp på sidan och togglar omkopplaren ”Inaktiverad” till ”Aktiv”.

Slutligen klickar du på knappen ”Save Snippet” för att lagra dina Settings.

Save your code snippet

När det är slutfört kommer ditt custom code snippet att addas till din site och börja fungera.

Typ 2: Changed Favicons som en aviseringar på webbläsarens tabs

Med den här metoden visar du en annan favicon på fliken i webbläsaren på din site när användarna navigerar till en annan tab.

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

Favicon as web browser notification

För att ändra favicons på din webbläsare tab, kommer vi att använda WPCode plugin.

Först besöker du sidan Code Snippets ” + Add Sn ippets i din adminpanel i WordPress och klickar på knappen ”Use Snippet” under alternativet ”Add Your Custom Code (New Snippet)”.

Detta tar dig till sidan ”Create Custom Snippet”, där du kan börja med att enter en titel för din code snippet.

Nu väljer du helt enkelt ”HTML Snippet” som ”Code type” i dropdown-menyn till höger.

Choose HTML as your Code Type

När du har gjort det, copy and paste följande kod i boxen ”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);
}

När du har klistrat in koden tar du helt enkelt bort exemplets favicon-länkar från koden och ersätter dem med dina egna images-länkar.

Du kan se de länkar som är markerade i vår kod under.

Paste the HTML code and remove the example favicon image links

Kom ihåg att de images du väljer som favicons redan ska vara uppladdade i mediabiblioteket på din site WordPress.

Annars fungerar inte koden och din favicon kommer inte att ändras.

Change favicon image links

När du har gjort det rullar du ner till ”Insertion” section.

Du kan välja alternativet ”Auto Insert” om du vill att koden automatiskt ska embedas på varje page.

Choose an insertion method

Om du bara vill ändra favicon på vissa pages väljer du alternativet ”Shortcode” och klistrar in det i ett område som aktiverats med shortcode, t.ex. widgets i sidebar eller längst ner i content editor.

Gå sedan högst upp på sidan och toggle omkopplaren från ”Inaktiverad” till ”Aktiv” i det övre högra hörnet och klicka sedan på knappen ”Save Snippet”.

Efter det kommer din favicon att börja ändras som en webbläsare tab notification.

Typ 3: Ändra webbplatsens rubrik som en aviseringar på webbläsarens tab

Den här metoden är för dig om du vill ändra titeln på webbplatsen för att Recapture din besökares uppmärksamhet.

Genom att använda detta code snippet kommer titeln på din site att ändras för att visa ett iögonfallande message när användare byter till en annan tabs i webbläsaren.

Changing site title in a browser

Vi kommer att använda WPCode tillägg för att ändra din site titel som en webbläsare tab notification.

För att komma till sidan ’Create Custom Snippet’, besök Code Snippets ” +Add Sn ippets page från admin sidebar och klicka på ’Use Snippet’ under alternativet ’Add Your Custom Code (New Snippet)’.

Add new snippet

Nu när du är på sidan ”Create Custom Snippet” börjar du med att ange en titel för ditt code snippet.

Därefter väljer du ”JavaScript” som ”Code Type” i dropdown-menyn till höger.

Select JavaScript as Code Type

Sedan är allt du behöver göra att copy and paste följande code snippet i ”Code Preview” boxen:

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 editera den och helt enkelt skriva in det message du vill visa på din webbläsares tabs i koden.

För att skriva önskat meddelande går du helt enkelt till raden var altTitle = "Gå tillbaka till den här sidan!"; och tar bort texten med placeholder med meddelandet för notifikationen för webbläsarens tabs.

Type a sentence of your choosing

Därefter rullar du ner till ”Insertion” -sektionen och väljer ”Auto Insert” -läget för att aktivera notifieringen på webbläsarens tabb på varje page.

Men om du bara vill ha ditt iögonfallande message på specifika pages kan du välja alternativet ”Shortcode”.

Till exempel kanske du bara vill add to koden på ”Add to Cart” page så att den kan minska antalet övergivna cart på din website.

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

Choose an insertion mode

Därefter rullar du ner till alternativet ”Location” och klickar på rullgardinsmenyn bredvid den.

Härifrån väljer du alternativet ”Site Wide Footer”.

Choose Site Wide Footer as location

Slutligen rullar du tillbaka högst upp på sidan och togglar omkopplaren från ”Inaktiverad” till ”Aktiv”.

Sedan klickar du på knappen ”Save Snippet” för att spara dina settings.

Click on the Save Snippet button

Nu är det klart! Nu kommer din webbläsare tabs notification att alerta användare som lämnar din site.

Bonus: Add Web Push Notifications till din site i WordPress

Ett annat sätt att få tillbaka besökare och minska antalet övergivna cart är att skicka web push notifications till dina användare. Dessa aviseringar är klickbara korta meddelanden som skickas till dina besökare även när de inte är på din website.

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

PushEngage

Det låter dig automatiskt skicka meddelanden om nya blogginlägg eller anpassade meddelanden och ställa in drip-kampanjer utan någon kod.

Tillägget erbjuder också andra funktioner, såsom förgjorda templates, A/B-testning, segmentering av användare, smarta påminnelser om att tacka ja, custom-triggerade kampanjer och interaktiva alternativ för meddelanden.

You can use all these features to create abandoned cart notifications, schedule messages, and send price drop alerts, leading to more site traffic.

Toggle auto push switch

För mer information, se vår guide för nybörjare om hur du lägger till web push notifications i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till meddelanden om webbläsarens karta i WordPress. Du kanske också vill se vår poradnik om hur du lägger till funktionsrutor med ikoner i WordPress och kolla in våra toppval för de bästa WordPress jQuery-pluginsen för att få din webbplats att växa.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

2 kommentarerLämna ett svar

  1. Carole

    Is it possible to make the alternate tabs have a longer time between changes? I think that constant flashing would get annoying and people might just close out the tab.

    • WPBeginner Support

      Yes, it would depend on the methods you were using, you would change the numbers that are in the thousands for the code snippets as those determine how many milliseconds to wait for the code.

      Administratör

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.