Letar du efter ett sätt att skapa en lightbox-popup för din webbplats?
En lightbox-popup kan vara otroligt effektiv för att samla in leads. De är utformade för att övertyga och konvertera.
Men att behöva koda en från grunden är ett verkligt bekymmer. För det första måste du kunna tillräckligt med HTML, CSS och Javascript för att skapa popupen tillsammans med utlösande regler för när den ska visas. Sedan måste du skapa en manuell integration med din e-postleverantör. Och slutligen måste du hantera eventuella integritets- och säkerhetsfrågor.
Goda nyheter: det finns ett mycket enklare sätt.
I den här artikeln kommer vi att visa dig hur du lanserar en lightbox-popup utan kodning på mindre än 10 minuter.
Låt oss dyka in.
Vad är en Lightbox-popup?
En lightbox-popup är ett opt-in-formulär som dyker upp med en filmisk effekt. När en lightbox dyker upp, suddas resten av webbplatsen ut i bakgrunden. På så sätt är hela ditt fokus på popupen.
Ursprungligen kommer konceptet med lightboxes från utomhusreklam:
Och sedan tänkte några utvecklare att detta var en riktigt cool effekt och skapade ett Javascript-bibliotek för att återskapa samma effekt på webbtillgångar. Senare kom idén att använda lightbox-popups in i bilden.
Varför Lightbox-popups fungerar
Lightbox-popups samlar in fler e-postadresser än ett traditionellt opt-in-formulär.
Men varför fungerar de?
Låt oss ta en snabb titt på de främsta anledningarna till varför lightbox-popups fungerar så bra.
#1. Lightbox-popups har en tydlig uppmaning till handling
De flesta tror att det är bra att ge sina kunder många alternativ.
Men det stämmer inte riktigt.
Om du siktar på direkta konverteringar vill du ha en enda, tydlig uppmaning till handling som din publik kan fokusera på. På så sätt tar du bort alla distraktioner från användarens sinne. Och lightbox-popups gör ett utmärkt jobb med att lyfta fram ditt kärnerbjudande och få folk att fokusera på din uppmaning till handling.
Så naturligtvis är konverteringsgraderna ganska bra.
#2. Lightbox-popups går inte att ignorera
Lightbox-popups tar upp hela skärmen och suddar ut allt annat. Så det är praktiskt taget omöjligt att ignorera dem.
Detta gäller särskilt om de är animerade:
Naturligtvis måste du se till att dina popups inte är påträngande. Och det kan du göra genom att anpassa när olika popups ska utlösas på din webbplats. Så länge din publik inte störs av avbrottet kan du mycket enkelt övertyga och konvertera dem.
#3. Lightbox-popups har personliga utlösare
Du bör inte visa samma erbjudande för alla dina webbesökare. Om du driver en e-handelsbutik behöver du mycket olika erbjudanden för nya och återkommande kunder.
För en ny kund kan du utlösa en välkomstkampanj:
Men för en återkommande kund kanske du vill skicka dem ett annat erbjudande:
Lägg märke till hur rabattbeloppen för båda erbjudandena är exakt desamma. Men sättet som erbjudandet presenteras på är drastiskt annorlunda. Och detta är superviktigt eftersom lightbox-popups är byggda för teaterliknande effekter. Så ett mer personligt tillvägagångssätt kommer säkert att ge dig mycket bättre resultat.
Du kan till och med anpassa erbjudandet baserat på dina användares innehållspreferenser. Om de läser en artikel om middagsrecept är det mer meningsfullt att visa dem ett erbjudande relaterat till middagsrecept snarare än att visa dem ett erbjudande om bilar.
#4. Ljusbox-popup-fönster kan fånga besökare som lämnar
Ljusboxar är bara en metod för att visa din popup. Så det finns egentligen inget som hindrar dig från att anpassa utlösaren i vilken utsträckning du vill. Vi rekommenderar att skapa ljusbox-popup-fönster med avsikt att lämna.
Popup-fönster med avsikt att lämna utlöses när dina besökare försöker lämna din webbplats. Som ett resultat behåller du ett stort antal besökare som annars skulle ha övergett din webbplats. Så om du lider av webbplatsövergivenhet bör du definitivt skapa ett ljusbox-popup-fönster med avsikt att lämna.
Hur man skapar ett ljusbox-popup-fönster
Nu när du förstår vad ett ljusbox-popup-fönster är och varför du vill skapa ett, hur skapar man ett ljusbox-popup-fönster? Vi rekommenderar att använda OptinMonster för att skapa dina popup-fönster.
OptinMonster är världens främsta verktyg för konvertering och vi har använt det själva. OptinMonster gör det superenkelt att skapa kraftfulla popup-fönster som konverterar. Och du behöver aldrig använda någon kod alls.
Vi skrev till och med en fullständig recension av OptinMonster.
Du kan kolla in det, eller börja med din kampanj direkt. Allt du behöver göra är att registrera dig för OptinMonster och följa med resten av den här artikeln.
Steg #1: Skapa en kampanj
Gå till din OptinMonster-instrumentpanel och klicka på knappen Skapa:
Välj kampanjtypen Ljusbox-popup :
Välj sedan en kampanjmall. Du kan välja vilken mall du vill, men vi kommer att använda kampanjtypen Enkel för den här handledningen.
Ge nu din kampanj ett namn. Kom ihåg att detta kampanjnamn är för dig och du kommer troligen att skapa en hel del av dessa popup-fönster med olika målinställningar. Så ge kampanjen ett meningsfullt namn, annars kommer du att bli riktigt förvirrad senare.
Beroende på din plan kan du också använda OptinMonster på flera webbplatser. Välj därför den webbplats där du vill visa din kampanj också.
Tryck på Börja bygga när du är klar.
Steg #2: Redigera ditt ljusbox-popup-fönster
Med OptinMonster får du en visuell dra-och-släpp-popup-byggare. När du är klar med att skapa din kampanj kommer du att kunna redigera även de minsta detaljerna om din popup. Börja med att redigera din popup-rubrik:
Det mest fantastiska här är att du bara klickar på den text du vill redigera och ändrar den direkt. Det finns inget behov av att fylla i ett formulär eller redigera någon HTML-kod i popup-fönstret.
Justera sedan din knapptext och utseende för att skapa en tydlig uppmaning till handling:
När du är nöjd med din popups utseende kan du gå vidare till mer avancerade inställningar.
Steg #3: Ställ in visningsregler
Visningsregler är avsedda att definiera när din kampanj visas på din webbplats och vem som ser den.
Vår rekommendation är att du ändrar utlösarvillkoret till avsikt att lämna:
Klicka på Nästa steg för att välja Åtgärd. Här rekommenderar vi att du ställer in Visa kampanjvyn till Optin View, ställer in visa med MonsterEffect till valfri inkommande animation du vill ha, och spela ljudeffekt till valfri ljudeffekt för din popup.
Klicka sedan på knappen Nästa steg. Du kan se hela omfattningen av dina inställningar i fliken Sammanfattning.
Steg #4: Konfigurera din e-postintegration
Nästa steg är att konfigurera din e-postintegration. Klicka på Lägg till ny integration från fliken Integrationer och välj din e-postleverantör:
Vi rekommenderar att använda Drip för din e-postmarknadsföring om du inte redan har en e-postleverantör.
Steg #5: Publicera ditt lightbox-popupfönster
När du skapar en ny kampanj är den Pausad som standard.
Gå till fliken Publicera i toppmenyn för att se Publiceringsalternativ. Ställ sedan in statusen till Publicera och välj webbplattformen:
Om du driver en WordPress-webbplats hanterar OptinMonster-pluginet resten av installationen automatiskt. Det är samma för Shopify och BigCommerce. För alla andra webbplatser, klicka på Valfri webbplats och klistra in inbäddningskoden i webbplatsens head:
Och du är klar!
BONUS: Samla prenumeranter på push-notiser från ditt popupfönster
Push-notiser hjälper dig att öka din webbplatstrafik och engagemang automatiskt. Webb-push-notiser är ett effektivt sätt att få tillbaka användare som kan ha övergett sin session eller lämnat webbplatsen. Det hjälper till att återengagera användare genom att meddela dem om nytt innehåll, erbjudanden eller händelser.
Push-notiser inkluderar också tydliga och handlingsbara meddelanden och knappar med uppmaning till handling, som uppmuntrar användare att vidta specifika åtgärder, som att läsa en artikel, slutföra ett köp eller delta i ett evenemang.
Du kan skräddarsy push-notiser baserat på användarnas preferenser, beteende och intressen, för att säkerställa att meddelandena är relevanta och värdefulla för varje användare. Användare måste godkänna att få web push-notiser. Detta säkerställer att meddelandena inte ses som skräppost och att de skickas med användarnas tillstånd.
Det coolaste är att du kan samla prenumeranter på push-notiser från ditt e-postpopupfönster. Så, om dina webbplatsbesökare inte vill lämna ut sin e-postadress, kan du fortfarande få dem att prenumerera med hjälp av webb-push-notiser.
Och det är vad vi ska arbeta med.
Steg #1: Välj en push-notistjänst
Vi rekommenderar att använda PushEngage för att skicka webb-push-notiser.
Här är en snabb överblick över vad du får med PushEngage:
- Högkonverterande automatiserade kampanjer
- Flera målgruppsinställningar och alternativ för kampanjplanering
- Målspårning och avancerad analys
- Smart A/B-testning
- En dedikerad framgångschef
Du kan komma igång gratis, men om du menar allvar med att växa ditt företag bör du köpa en betald plan. Innan du köper någon pushmeddelandetjänst bör du också kolla in den här guiden till kostnader för pushmeddelanden.
Och om du driver en onlinebutik, hjälper PushEngage dig också att öka din försäljning genom att hjälpa dig att skapa automatiserade e-handels-push-notiser.
Du kommer att se att PushEngage är utan tvekan det bästa valet om du vill bygga trafik, engagemang och försäljning för ditt företag. Och om du har en budget kan du alltid vara lite kreativ med dina pushmeddelanden.
Steg #2: Lägg till ett HTML-block i ditt popupfönster
Lägg först till ett HTML-block i ditt popupfönster från sidofältet i OptinMonster.
Det här är där vi kommer att lägga till koden för att samla prenumeranter på push-notiser. Klistra först in följande kod för att skapa en klickbar knapp:
<button onclick="subscribeOnClickButton()" style="border: none; width: 100%; padding-left: 15%; padding-right:15%; text-align: center; display: inline-block; color: white;">Get Updates via Push Notifications Instead</button>Klistra in koden där det står att du kan lägga till HTML:
Vid det här laget bör du se en ny knapp i ditt popupfönster som säger "Få uppdateringar via push-notiser istället" precis under knappen för e-postprenumeration:
Naturligtvis kan du leka med stilarna för att göra det mer tilltalande. Därefter ska vi göra knappen för att samla prenumeranter på push-notiser när den klickas på.
Steg #3: Hämta prenumerationskod från PushEngage
Gå till PushEngage 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.
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 kan inte kopiera koden i bilden och samla prenumeranter på push-notiser.
När du har koden i din PushEngage-instrumentpanel, ta det andra skriptet och lägg till lite extra kod. 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 || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
}]);
}
</script>Steg #4: Lägg till din prenumerationskod i HTML-blocket i ditt popupfönster
Lägg till denna kod i HTML-blocket i OptinMonster och du är klar!
När du är klar, tryck bara på knapparna Spara och Publicera.
Om du tittar på din webbplats bör du nu se lightbox-popupfönstret som samlar både e-post- och push-notisprenumeranter:
Och precis så samlar du push-prenumeranter från ditt popupfönster. Push-notiser kommer med sina egna popup-modaler. Men de är lite svåra att anpassa. Så, du kan skapa vackra popupfönster med OptinMonster och sedan använda dem som dina push-notis-popupfönster.
Vad du ska göra efter att du skapat ett lightbox-popupfönster
Det var allt för den här gången, gott folk!
Låt oss veta om den här artikeln hjälpte. Att skapa popupfönster på din webbplats kan hjälpa dig att konvertera din trafik till e-postprenumeranter och genuina affärsledningar. Och vi rekommenderar starkt att du börjar skapa lightbox-popupfönster genast.
Och om du letar efter ett prisvärt sätt att öka din trafik, rekommenderar vi att använda push-notiser. Push-notiser kan hjälpa dig att få mer återkommande trafik och webbplatsengagemang. Du kan också skapa automatiserade push-notiskampanjer som genererar försäljning.
Inte övertygad? Kolla in dessa resurser:
- 7 smarta strategier för att öka kundengagemanget
- Är push-notiser effektiva? 7 statistik + 3 experttips
- Hur du ställer in pushmeddelanden för övergivna kundvagnar (Enkel handledning)
Vi rekommenderar att använda PushEngage för att skapa dina push-notiskampanjer. PushEngage är den främsta push-notisprogramvaran i världen. Så om du inte redan har gjort det, kom igång med PushEngage idag!
