Skapa uppmaningar till handling (CTA)

Använd verktyget för uppmaningar till handling (CTA) för att skapa 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 URL:er. 

På mobila enheter kan du välja att antingen aktivera en responsiv layout eller dölja CTA:n på små skärmar i CTA-alternativen. 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 prestanda. 

Designa en CTA

I CTA-redigeraren kan du anpassa din CTA:s design 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 baserat på besökarkategori. Läs mer om hur du använder smart innehåll i CTA:er. 

1. I ditt HubSpot-konto navigerar du 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 igenom 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ökare bläddrar igenom din sida. 
   • Inbäddade och knappbaserade CTA:er omfattar följande typer: 
     • Inbäddad: en banner, uppmaning eller 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, såsom bilder och textfält.
   • Du kan till exempel välja en mall för ”Klicka för att chatta” för att öppna en WhatsApp-länk, en mall för mötespopup för att visa en sida för mötesbokning eller en evenemangsmall där besökare kan anmäla sig till din konferens eller workshop.
5. I vänsterpanelen, under fliken Lägg till , lägger du till moduler och redigerar layouten för din CTA: 

• • För att lägga till mer innehåll till din CTA, klicka och dra en ny modul direkt till den högra panelen i redigeraren.
    • Du kan bara lägga till en formulär- (ny redigerare) eller mötesmodul till en CTA. En enskild CTA kan inte innehålla både en formulär- 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 för att lägga 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 den vänstra panelen 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 vänsterpanelen 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-assistenter fö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 fasta banner-CTA:er kan du välja en position upptill eller nedtill. För in-slidande CTA:er kan du placera CTA:n uppe till vänster, nere till vänster, uppe till höger eller nere till höger på sidan. Det rekommenderas att endast använda en in-slidande CTA per sida. Att använda flera in-slidande 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 baserat på innehållet i din CTA. Om detta alternativ inte är valt kommer en rullningslist ibland att visas på din CTA, beroende på din design. 
    • Layout: konfigurera layouten för din CTA. Du kan lägga till utfyllnad till 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 primärt typsnitt, kantlinje och skugga från CTA:n. Du kan använda anpassade typsnitt med din CTA. Läs mer om hur du använder anpassade typsnitt med ditt HubSpot-innehåll. 
    • Bakgrund: ställ in en bakgrund för CTA:n, du kan välja att ställa in en bakgrundsfärg eller ladda upp en bakgrundsbild.
    • Stängningsalternativ: för popup-rutor med CTA kan du aktivera alternativet som gör att besökare kan stänga CTA:n när de klickar någonstans 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 anpassade teman eller CSS:

1. I ditt HubSpot-konto navigerar du 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. För att öppna den här länken i en ny sida markerar du kryssrutan Öppna länken i 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 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 den här länken i en ny sida 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 denna länk 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 URL anger du webbadressen till den webbplats du vill dirigera besökarna till. För att öppna denna länk i en ny flik markerar du kryssrutan Öppna länken i ny flik. 
   • CTA: använd den anpassade CTA:n för att aktivera en fast banner, en popup-ruta eller en slide-in-CTA.
6. I fältet Knappinnehåll anger du din CTA-text. 
   

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 teckensnittsfamiljer, på flera CTA:er på din webbplats. Alla anpassade CSS-klasser ska inkluderas i det CSS-stilmall som används på dina HubSpot-sidor.
   • Anpassade CSS-regler: lägg till anpassade regler för att tillämpa inline-styling specifikt 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 i prioritetsordning.
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 anta samma stilar. 
14. För att slutföra inställningarna för din CTA-design klickar du på Spara och tillämpa.
     

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

1. För att visa CTA-knappen när en besökare befinner sig på en specifik webbadress, gör du följande i avsnittet ”Webbadress”:
   • Klicka på den förstarullgardinsmenyn ochväljWebbplats-URL.
   • Klicka på den andrarullgardinsmenyn ochvälj en inriktningsregel.
   • 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.
   • I det första textfältet anger dunamnet påsökparametern.
   • Klicka på den andra rullgardinsmenyn och välj en riktningsregel.
   • I det andra textfältet anger duvärdet försökparametern.
3. Om du vill lägga till en annan 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 sekretesspolicy.

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: CTA 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 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å storlekar, eventuella associerade kampanjer och CTA:ns schemaläggning. 

1. Klicka på fliken Alternativ högst upp.
2. För fast banner, popup-ruta eller slide-in-CTA kan du dölja CTA:n 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 genom 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. Detta alternativ gör att du kan använda ankartaggar eftersom det inte sker några omdirigeringar, utan CTA:n dirigerar besökarna till den angivna URL:en. 
5. För fast banner, popup-ruta eller slide-in-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.