Skapa uppmaningar till handling (CTA:er)

Använd verktyget för uppmaningar till handling (CTA) för att skapa CTA-knappar, banners eller popup-fönster som du kan lägga till på dina HubSpot-sidor och därmed locka nya besökare. Du kan även lägga till CTA:er på externa sidor.

Innan du lägger till en CTA på en extern sida måste du installera HubSpots spårningskod eller installera HubSpots WordPress-plugin på din WordPress-webbplats. När du har lagt till en CTA kan du driva trafik genom att dirigera besökare till specifika sidor, möteslänkar eller externa webbadresser. 

På mobila enheter kan du i CTA-inställningarna välja att antingen aktivera en responsiv layout eller dölja CTA:n på små skärmar. När du har publicerat din CTA kan du lära dig hur du skapar ett A/B-test för din CTA och analyserar dess resultat. 

Utforma en CTA

I CTA-redigeraren kan du anpassa utseendet på din CTA för att locka besökare. När du skapar CTA:er kan du också använda smart innehåll för att visa olika versioner av din CTA beroende på besökarkategori. Läs mer om hur du använder smart innehåll i CTA:er. 

1. I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Marknadsföring > CTA:er. Om Mer inte visas i ditt konto navigerar du direkt till Marknadsföring > CTA:er.
2. Klicka på Skapa längst upp till höger.
3. Välj fliken Popup-fönster eller fliken Inbäddningar och knappar högst upp. 
   • Popup-CTA:er finns i följande typer: 
     
     • Banner: en permanent banner som är fastsatt längst upp eller längst ner på sidan. Bannern förblir synlig när besökarna bläddrar genom sidan. 
     • Popup-ruta: en popup-ruta som visas enligt ett fast schema. 
     • Slide-In: en banner som glider in från ett hörn av din webbplats. Bannern förblir synlig när besökarna bläddrar igenom din sida. 
   • Inbäddade och knappbaserade CTA:er omfattar följande typer: 
     • Inbäddad: en banner, en uppmaning till handling eller en knapp som du kan använda på din webbplats eller i HubSpot-e-postmeddelanden för att leda potentiella kunder till specifika sidor.
     • Inbäddad bild: en bild som du kan använda på dina HubSpot-sidor eller i e-postmeddelanden.
4. Välj enmall utifrån vilken typ av CTA du vill skapa.
   • Varje CTA-mall har anpassningsbara moduler, till exempel bilder och textfält.
   • Du kan till exempel välja en ”Klicka för att chatta”-mall för att öppna en WhatsApp-länk, en ”Mötespopup”-mall för att visa en sida för mötesbokning eller en ”Evenemang”-mall där besökare kan anmäla sig till din konferens eller workshop.
5. I den vänstra panelen, under fliken ”Lägg till ”, kan du lägga till moduler och redigera layouten för din CTA: 

• • För att lägga till mer innehåll i din CTA, klicka och dra en ny modul direkt till den högra panelen i redigeraren.
    • Du kan endast lägga till en formulärmodul (ny redigerare) eller mötesmodul till en CTA. En enskild CTA kan inte innehålla både en formulärmodul och en mötesmodul. 
    • Vissa moduler kan endast läggas till en gång, till exempel nedräkningstimern eller videomodulerna.
    • Du kan också lägga till videor i din CTA. Läs mer om kraven när du lägger till videor i dina CTA:er. 
  • För att ändra layouten på din CTA, håll muspekaren över en modul och klicka och dra den till en ny position.
  • För att duplicera modulen, håll muspekaren över modulen och klicka påikonen för duplicering/kloning.
  • För att ta bort modulen, håll muspekaren över modulen och klicka påikonen för borttagning. 
     

• • För att redigera en modul, klicka på modulen.
    • I panelen till vänster kan du redigera modulens innehåll och utformning.
    • För att stänga en popup-CTA efter att en besökare har skickat in formuläret kan du, när du anpassar din formulärmodul, aktivera alternativet Stäng efter inlämning . 
       

7. Klicka på fliken ”Innehåll” i den vänstra panelen för att hantera dina moduler. 
   • För att redigera en modul klickar du på modulens namn . I den vänstra panelen kan du redigera modulens innehåll och utformning. I rich text-moduler kan du använda AI-assistenterför att skapa eller finjustera ditt CTA-innehåll. 
   • För att ta bort en modul, håll muspekaren över modulen och klicka påikonen för borttagning. 
8. I den vänstra panelen klickar du på fliken Design för att anpassa och förhandsgranska din CTA.
   • För att förhandsgranska din CTA på specifika sidor klickar du på Förhandsgranska längst upp till höger. Klicka sedan på rullgardinsmenyn Förhandsgranska på specifik sida och välj den HubSpot-sida där du vill förhandsgranska CTA:n. 

• • För att anpassa utseendet på din CTA väljer du ett av följande alternativ. Konfigurera sedan dina ändringar i den vänstra panelen. 
    • Position: för CTA:er i form av fasta banners kan du välja en position högst upp eller längst ner. För CTA:er som glider in kan du placera CTA:n längst upp till vänster, längst ner till vänster, längst upp till höger eller längst ner till höger på sidan. Det rekommenderas att endast använda en CTA som glider in per sida. Att använda flera sådana CTA:er kan leda till konflikter och förhindra att CTA:erna visas.
    • Storlek: Konfigurera höjden på din CTA. Du kan aktivera alternativet för att ställa in höjden automatiskt utifrån innehållet i din CTA. Om detta alternativ inte är valt kan en rullningslist ibland visas på din CTA, beroende på din design. 
    • Layout: Konfigurera layouten för din CTA. Du kan lägga till avstånd runt innehållet i din CTA. Du kan också aktivera alternativet för att använda en responsiv layout. Med en responsiv layout staplas kolumnerna i din CTA vertikalt på små skärmar.
    • Stilar: Ställ in stilarna för din CTA, till exempel huvudtypsnitt, kantlinje och skugga. Du kan använda anpassade typsnitt i din CTA. Läs mer om hur du använder anpassade typsnitt i ditt HubSpot-innehåll. 
    • Bakgrund: Ställ in en bakgrund för CTA:n. Du kan välja att ange en bakgrundsfärg eller ladda upp en bakgrundsbild.
    • Stängningsalternativ: För popup-CTA:er kan du aktivera alternativet som gör att besökare kan stänga CTA:n genom att klicka var som helst utanför popup-rutan. När detta alternativ är inaktiverat kan besökare endast stänga CTA:n med hjälp av stängningsikonen. 

Designa en HTML-CTA

Så här skapar du en anpassad inbäddad HTML-CTA och tillämpar dina egna teman eller CSS:

1. I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Marknadsföring > CTA:er. Om Mer inte visas i ditt konto navigerar du direkt till Marknadsföring > CTA:er.
2. Klicka på Skapa längst upp till höger.
3. Klicka på fliken Inbäddningar och knappar högst upp.
4. I menyn i vänster sidfält navigerar du till Avancerat. Välj sedan Inbäddad HTML.
5. I den vänstra panelen klickar du på rullgardinsmenyn Länk till och väljer ett alternativ som din CTA ska omdirigera till:
   • E-postadress: skapa en mailto-länk. Markera kryssrutan Öppna länken i en ny flik om du vill att länken ska öppnas i en ny flik. 
   • Filnedladdning: länka din CTA till en fil i din filhanterare. Välj en befintlig fil eller ladda upp en ny fil, och markera sedan kryssrutan Öppna länken i en ny flik om du vill att besökare som klickar på CTA-knappen ska se bilden i ett nytt webbläsarfönster. 
   • Möteslänk: länka din CTA till en HubSpot-möteslänk. Klicka på rullgardinsmenyn Välj en möteslänk och välj sedan en möteslänk. För att öppna länken i en ny flik markerar du kryssrutan Öppna länken i ny flik. 
   • En av dina sidor: länka din CTA till en av dina HubSpot-sidor eller blogginlägg. Klicka på rullgardinsmenyn Sida och välj sedan en sida eller ett inlägg. CTA-knappens länk kopplas till sid-ID:t, och eventuella ändringar i sidans URL uppdaterar automatiskt CTA-knappens länk. För att öppna länken i en ny sida markerar du kryssrutan Öppna länken i en ny flik. 
   • URL: länka din CTA till en extern sida utanför HubSpot. I fältet Länka till URL anger du webbadressen till den webbplats du vill dirigera besökarna till. För att öppna länken i ett nytt fönster markerar du kryssrutan Öppna länken i en ny flik. 
   • CTA: Använd den anpassade CTA:n för att aktivera en fast banner, en popup-ruta eller en inglidande CTA.
6. I fältet Knappinnehåll anger du din CTA-text. 
   

Observera:länkar mellan domäner stöds inte i CTA:er, även om inställningen för länkar mellan domäner har aktiverats. 

7. För att ytterligare anpassa utformningen av din CTA klickar du på Avancerat
8. På sidan Avancerat kan du lägga till anpassade CSS-klasser eller regler:
   • Anpassade CSS-klasser: ange en anpassad klass för din CTA. Använd anpassade klasser för att tillämpa designstilar, till exempel typsnitt, på flera CTA:er på din webbplats. Alla anpassade CSS-klasser måste inkluderas i det CSS-stilark som används på dina HubSpot-sidor.
   • Anpassade CSS-regler: lägg till anpassade regler för att tillämpa inline-formatering som är specifik för din CTA.
     • För att lägga till en ny CSS-regel, klicka på ”Lägg till en” eller ”+ Lägg till” och konfigurera din selektor och stil. 
       • Selektor: ange en CSS-selektor. Detta värde är valfritt och kommer att kombineras med CTA:ns selektor. Om den angivna selektorn till exempel är :hover blir den kombinerade selektorn ${ctaSelector}:hover
       • Stil: ange en anpassad CSS-stilregel som ska tillämpas på den konfigurerade selektorn. Du kan ange en stil utan att ange en selektor. Till exempel color: yellow;.
         
         

9. För att redigera en befintlig CSS-regel, håll muspekaren över regeln och klicka på redigeringsikonen. 
10. För att klona en CSS-regel, håll muspekaren över regeln och klicka på ikonen för att duplicera. 
11. För att hantera prioriteten för dina CSS-regler, klicka och dra varje regel för att ordna dem efter prioritet.
12. För att ta bort en CSS-regel, håll muspekaren över regeln och klicka på ikonen för borttagning. 
13. För att tillämpa samma HTML och klasser på CTA:n som på äldre CTA:er, markera kryssrutan Använd äldre markering. Om du har CSS-stilmallar på sidor som formaterar äldre CTA:er kommer denna kryssruta att göra det möjligt för HTML-CTA:n att använda samma stilar. 
14. Klicka på Spara och tillämpa för att slutföra inställningarna för din CTA-design .
     

Anpassa var och när din fasta banner, popup-ruta eller in-slidande CTA ska visas

Om du har ställt in en fast banner, en popup-ruta eller en in-glidande CTA kan du rikta in dig på besökare genom att välja när du vill att denna CTA ska visas på din webbplats. Läs mer om hur du lägger till CTA:er på dina sidor. 

Du kan använda filter för att kombinera flera uppsättningar regler för vilka besökare som ska se din CTA. Läs mer om hur du konfigurerar dina målgruppsregler.

Aktiveringsutlösare 

Välj en aktiveringsutlösare för att bestämma när CTA:n ska visas på din sida. CTA:n visas så snart den första valda utlösaren uppfylls. 

1. Klicka på fliken Målgrupphögst upp.
2.  I avsnittet När ska den visas klickar du för att växla mellan aktiveringsutlösarna som du vill använda:
   • Utlös vid knappklick: CTA:n visas när en besökare klickar på en knapp. Läs mer om hur du ställer in dina popup-CTA:er så att de utlöses vid knappklick. Som standard är detta alternativ alltid aktiverat. 
     • Konfigurera detta på dina HubSpot-sidor med en standardknappmodul eller på dina externa sidor genom att anpassa en knapps klass.
     • För att ställa in denna utlösare på en extern sida måste HubSpot-spårningskoden vara installerad. 
   • Utlös vid sidorullning: CTA:n visas när besökaren har rullat förbi en angiven procentandel av sidan.
   • Utlös vid avsikt att lämna sidan: CTA:n visas när besökaren visar avsikt att lämna sidan. 
     • På datorn visas CTA:n när besökaren för muspekaren till den övre fältet i webbläsarfönstret.
     • På mobilen visas CTA:n när: 
       • Besökaren väljer bakåtknappen i webbläsaren när hen försöker navigera till en tidigare sida.
       • Besökaren minimerar webbläsarfönstret och återvänder senare till din webbplats i samma webbläsare.
   • Utlösning efter en viss tid: CTA:n visas efter det angivna antalet sekunder.
   • Utlös efter inaktivitet: CTA:n visas efter att besökaren har varit inaktiv i ett angivet antal sekunder.

Webbplatsens URL

Lägg till villkorslogik för specifika webbadresser eller värden på sökparametrar på samma flik ”Målgrupp ”. Som standard visas CTA:n på alla sidor.

1. För att visa CTA:n när en besökare befinner sig på en specifik webbadress, gör så här i avsnittet ”Webbadress”:
   • Klicka på den förstarullgardinsmenyn ochväljWebbplats-URL.
   • Klicka på den andrarullgardinsmenyn ochvälj en målgruppsregel.
   • Ange dina regelkriterier i textfältet.
2. För att visa CTA när en besökare befinner sig på en webbsida vars URL innehåller specifika sökparametrar:
   • Klicka på den förstarullgardinsmenyn ochväljFrågeparameter.
   • Angenamnet påsökparametern i det första textfältet.
   • Klicka på den andra rullgardinsmenyn och välj en målgruppsregel.
   • Angevärdet försökparametern i det andra textfältet.
3. Om du vill lägga till en ytterligare regel klickar du påLägg till regel.
4. Om du vill exkludera uppmaningar från vissa sidor klickar du påLägg till exkluderingsregel. Du kanske till exempel vill lägga till en exkludering för en sida med integritetspolicy.

1. I avsnittet Vem ska den visas för anger du målgruppen för din CTA. Du kan välja mellan följande alternativ:
   • Alla besökare: CTA:n visas för alla besökare. 
   • Filtrerade besökare: uppmaningen visas endast för de angivna besökarna
2. I avsnittet ”Hur ofta ska den visas ” anger du frekvensen för din CTA. Klicka på rullgardinsmenyn ”Visa igen ” och välj något av följande:
   • Efter en angiven tidsperiod:CTA:n visas igen efter den angivna tidsperioden. 
   • Upprepa: CTA:n visas varje gång besökaren navigerar till de valda webbsidorna och utför den utlösande åtgärden, även om de tidigare har interagerat med den.
   • Visa inte igen: visa aldrig CTA:n för samma besökare igen. 
     
     

Anpassa dina CTA-alternativ

Påfliken Alternativ kan du anpassa olika CTA-alternativ, till exempel om CTA:n ska visas på små skärmar, eventuella kopplade kampanjer och CTA:ns schemaläggning. 

1. Klicka på fliken Alternativ högst upp.
2. För CTA-knappar av typen fast banner, popup-ruta eller slide-in kan du dölja CTA-knappen på små skärmstorlekar. I avsnittet Små skärmstorlekarmarkerar du kryssrutan Stäng av på små skärmstorlekar.
3. Om du har ett Marketing Hub Professional - eller Enterprise -abonnemang kan du koppla CTA:n till en kampanj:
   • För att koppla din CTA till en befintlig kampanj klickar du på rullgardinsmenyn Kampanj och väljer en kampanj.
   • Om du vill koppla din CTA till en ny kampanj klickar du på rullgardinsmenyn Kampanj och sedan på Skapa kampanj. Fortsätt sedan med att konfigurera din kampanj. 
   • Om du aldrig har skapat en kampanj tidigare klickar du på Skapa en kampanj. Fortsätt sedan med att konfigurera din kampanj. 
4. Konfigurera hur du vill spåra klick med din CTA. Välj bland följande alternativ: 
   • Spåra klick via omdirigering: spåra klick på din CTA genom att dirigera besökare till en initial URL, som kopplar klicket till CTA:n, innan de omdirigeras till den slutliga sidan. Detta alternativ är valt som standard.
   • Spåra klick via webbläsaren: spårar klick asynkront via besökarens webbläsare. Det här alternativet gör att du kan använda ankartaggar eftersom det inte sker några omdirigeringar – CTA:n leder besökarna direkt till den angivna URL:en. 
5. För fast banner, popup-ruta eller inglidande CTA kan du schemalägga när en CTA ska visas:
   
   • För att schemalägga när CTA:n ska börja visas, slå på knappen Schemalägg för senare. Välj sedan ett startdatum och en starttid. 
   • För att schemalägga när CTA:n slutar visas, slå på knappen Ställ in datum och tid för borttagning . Välj sedan ett slutdatum och en sluttid. 
     
     

Publicera din CTA 

När du är klar med inställningarna för din CTA publicerar du den för att aktivera den. 

1. Klicka på ”Granska och publicera” längst upp till höger.
2. Granska din CTA i den högra panelen och klicka sedan på ”Publicera nu”. CTA:n publiceras automatiskt på de sidor som den är riktad mot.