Vill du lägga till en anpassad HTML-popup på din webbplats, men är inte säker på var du ska börja?
Många webbplatsägare vill skapa en popup med funktioner som är unika för deras behov. Men de vill inte slösa bort dagar av sin tid på att koda en popup från grunden.
Så i den här artikeln kommer vi att visa dig hur du använder OptinMonster för att skapa en anpassad HTML-popup på några minuter.
Men först, låt oss prata om varför du skulle vilja lägga till HTML i dina OptinMonster-kampanjer i första hand.
Varför lägga till HTML i dina OptinMonster-popups?
OptinMonster erbjuder användare möjligheten att skapa fantastiska popup-fönster som är unika för deras varumärke, budskap och publik.
Men ibland kanske du vill använda cross-site HTML för att lägga till funktioner i din OptinMonster-popup. Det finns många anledningar till varför anpassad HTML är användbart, inklusive:
- Bädda in registreringsformulär från din e-postleverantör
- Skapa en anpassad inloggning
- Lägg till en undersökning i din popup
Och mycket mer. Här är ett exempel på en HTML-enkät som vi skapade med Google Forms och OptinMonster:
Hela kampanjen tog mindre än 10 minuter skapa.
Och den goda nyheten är att det är lika enkelt att lägga till anpassad HTML till din OptinMonster-popup som alla andra designändringar du vill göra. Detta gäller även om du inte har några kodningsförmåga till att börja med.
Det betyder att du kan skapa en anpassad HTML-popup på några minuter istället för att försöka koda en helt från början.
I slutändan får du exakt den popup du letar efter samtidigt som du sparar tid och energi för andra delar av ditt företag.
Redo att börja? Registrera dig för OptinMonster riskfritt idag!
Hur man lägger till anpassad HTML till din popup
Steg 1 – Välj din popup-design
Först måste du logga in på ditt OptinMonster-konto:
När du är i din OptinMonster-instrumentpanel, gå till det övre högra hörnet och klicka Skapa ny kampanj:
Därefter måste du välja din kampanjtyp. För dagens handledning kommer vi att gå med en Framträda Klocka:
Nu är det dags att välja din mall:
OptinMonster har över 50 fördesignade mallar att välja mellan. Du kan filtrera dina alternativ efter:
Den första är särskilt användbar om det mesta av din trafik kommer från smartphones. Du kan välja helt mobiloptimerade mallar från början:
Detta gör att du kan hitta rätt kampanj för din målgrupp. Och om du vill ha en helt anpassad popup kan du använda vår Duk mall:
de Duk Mallen låter dig skapa din popup helt från grunden. Men betyder det att du måste använda Duk mall för en anpassad HTML-popup?
Inte alls!
Som du kommer att se kan du lägga till HTML till valfri malldesign med bara dra och släpp. För dagens handledning kommer vi att välja Grundläggande mall:
Allt som återstår är att namnge din popup, tilldela den till din webbplats och klicka börja bygga:
Steg 2: Designa din popup-kampanj
OptinMonster låter dig enkelt göra alla ändringar du vill i din popup. På så sätt kan du skapa en kampanj som passar ditt varumärke, talar till din målgrupp och ökar din webbplatss konverteringar.
Vi kommer inte gå för djupt in på hur du ändrar din popup i den här handledningen. Om du behöver hjälp med att komma igång, kolla in den här resursen om hur du skapar och designar din första OptinMonster-kampanj.
För dagens syften är allt du behöver veta att våra kampanjer består av blockelement som vi kallar “block”.
För att ändra något av blocken i din mall, klicka helt enkelt på den i din editor. Det öppnar redigeringsverktygen på vänster sida.
Så om du till exempel vill ändra textblocket, klickar du på texten du vill ändra.
Du kan ändra vilket block som helst i din popup-kampanj på samma sätt. Och om du vill lägga till ett nytt block i din kampanj är det också enkelt.
Klick + Lägg till block högst upp i redigeringsmenyn:
Du kommer att se en lista över block som du kan lägga till i din popup, inklusive:
- Knapp
- chatbot
- Nedräkningsräknare
- Bild
- Video
- Html
- Och mer
När du hittar blocket du vill lägga till i din kampanj kan du flytta det genom att dra och släppa:
Och så här lägger vi till anpassad HTML till vår popup.
Steg 3 – Lägg till anpassad HTML till din kampanj
Som vi nyss såg kan du lägga till olika block till din OptinMonster popup-kampanj. Ett av blocken du kan lägga till är Html.
Klick + Lägg till block som vi gjorde för ett ögonblick sedan, scrolla ner i menyn till vänster och hitta Html blockera:
Dra och släpp sedan Html blockera i din OptinMonster-kampanj:
På vänster sida ser du fältrutan där du kan lägga till din anpassade HTML:
Du kan infoga anpassad HTML för alla dina behov här. För dagens handledning lade vi till ett Google-formulär som är otroligt enkelt.
När du har skapat ditt Google-formulär klickar du på Skicka i det övre högra hörnet:
Klicka sedan på HTML-koden för att infoga:
Och lägg till din Google Form HTML-inbäddningskod i din OptinMonster-popup:
Du kan sedan justera HTML-koden och ändra kampanjens utseende efter behov. Här är den sista kampanjen vi skapade med OptinMonster och den anpassade HTML-koden i vårt Google-formulär:
Och det är!
Som du kan se är det enkelt att lägga till anpassad HTML till din OptinMonster-kampanj. Du kan göra allt med bara dra och släpp. Sedan anger du helt enkelt din HTML och utformar din kampanj så att den ser ut som du vill.
För att vara tydlig är den här funktionen inte begränsad till Google Formulär. Det var bara dagens exempel. Du kan lägga till anpassad HTML som bäst passar dina behov.
När du har designat den perfekta anpassade HTML-popupen är det dags att bestämma när och var din kampanj kommer att visas på din webbplats.
Steg 4: Ställ in dina visningsregler
Nu när din HTML-popup är klar måste du bestämma var den ska visas på din webbplats.
OptinMonster gör det löjligt enkelt att rikta in sig på din målgrupp. Vi gör detta på 2 sätt:
Vägledningsregler hjälpa dig att visa din kampanj för personer som uppfyller vissa egenskaper. De kan vara personer som kommer från tredje parts webbplatser, var de finns eller vilken enhet de använder och mer.
Utlösare, å andra sidan, visar din kampanj baserat på hur din besökare interagerar med din webbplats. Det kan vara när de försöker lämna (Exit-Intent®), om de har slutat interagera med sidan (Inaktivitetssensor™), när de klickar på MonsterLink™ och mer.
Våra inriktningsregler och triggers hjälper dig att nå rätt personer vid rätt tidpunkt i deras kundresa. Detta leder till högre konverteringar för dig.
För att ställa in dina inriktnings- och aktiveringsregler, gå till Visa regler överst i din OptinMonster-redigerare:
Du kommer att se standardinställningarna som alla OptinMonster-kampanjer börjar med. Dessa är:
- Tiden på sidan är 5 sekunder
- Visas på varje sida
Vi har funnit att dessa två regler täcker en mängd olika behov för de flesta företagare. Men i vissa fall vill du ändra detta.
Idag sätter vi en Exit-Intent®-utlösare i vår anpassade HTML-kampanj.
Popup-fönster med exit-avsikter visas när användaren försöker lämna din webbplats. De är otroligt effektiva på att vinna tillbaka övergivna besökare.
Faktum är att fitnessföretaget Crossrope kunde öka sina omvandlingar med 900 % med hjälp av en popup med exit-avsikt.
För att göra din, klicka bara på det första villkoret, Tid på sidan, för att öppna rullgardinsmenyn. Klicka sedan Avsluta Intent®:
Välj de enheter du vill visa popup-fönstret för din exit-avsikt. Du kan välja:
Slutligen väljer du känslighetsnivån för din kampanj. Det är så snabbt din popup kommer att visas när din användare börjar gå till bakåtknappen på sin webbläsarsida. Du kan välja:
Det här är viktigt, särskilt om du skapar en popup-skärm för mobil exit-avsikt. Det beror på att känsligheten du väljer skapar en annan trigger på mobila enheter:
- Låg och Halv känslighet kommer att skapa en rullningsutlösare
- Hög känslighet kommer att skapa en tillbakaknappsutlösare
För att lära dig mer om hur det här fungerar, kolla in det här inlägget om hur du skapar en popup för mobil exit-avsikt som konverterar.
Om du vill kan du även ändra var din kampanj visas. Som standard kommer din kampanj att visas på alla sidor på din webbplats.
Men du kan ändra detta till specifika webbadresser, webbadressvägar eller någon annan sida som du tror skulle öka antalet omvandlingar:
När du har ställt in dina visningsregler är allt som återstår att trycka Spara och Posta.
Och det är! Din anpassade HTML-popup är redo att användas.
Vi hoppas att du tyckte att den här artikeln var användbar. Om så är fallet kanske du vill kolla in följande resurser för att se hur du kan använda popup-kampanjer för att växa och tjäna pengar på din e-postlista:
Dessa inlägg har allt du behöver för att optimera din e-postmarknadsföringsstrategi.
Redo att börja? Registrera dig för ditt riskfria OptinMonster-konto idag!
