Skapa uppmaningar till handling (CTA)

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 locka nya besökare. Du kan också 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 välja att antingen aktivera en responsiv layout eller dölja CTA 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 din CTA:s prestanda.

Utforma 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å betraktarkategori. 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 kommer att innehålla följande typer:
     
     • Banner: en permanent banner som är fäst längst upp eller längst ner på sidan. Bannern kommer att finnas kvar när besökarna scrollar igenom din sida.
     • Popup-ruta: en popup-ruta som visas enligt ett visst schema.
     • Slide-In: en banner som glider in från ett hörn på din webbplats. Bannern ligger kvar när besökarna scrollar igenom din sida.
   • Inbäddade CTA:er och CTA:er i form av knappar 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 en mall baserat på vilken typ av CTA du vill skapa.
   • Varje CTA-mall kommer att ha anpassningsbara moduler som bilder och textfält.
   • Du kan t.ex. välja en Click to chat-mall för att starta en WhatsApp-länk, en Meeting Popup-mall för att visa en mötesbokningssida eller en Event-mall för att besökare ska kunna registrera sig för din konferens eller workshop,
5. I den vänstra panelen, på fliken Lägg till, lägger du till moduler och redigerar layouten för din CTA:

• • Om du vill lägga till mer innehåll i din CTA klickar du på och drar en ny modul direkt till den högra panelen i redigeraren.
    • Du kan bara lägga till en formulär- (Ny editor) eller mötesmodul i en CTA. En och samma CTA kan inte innehålla både en formulär- och en mötesmodul.
    • Vissa moduler kan bara läggas till en gång, t.ex. nedräkningstimern eller videomoduler.
    • 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.
  • Om du vill ändra din CTA:s layout håller du muspekaren över en modul och klickar och drar den till en ny position.
  • Om du vill duplicera modulen håller du muspekaren över modulen och klickar påklonikonen duplicate.
  • Om du vill ta bort modulen håller du muspekaren över modulen och klickar påikonen deletedelete.
    

.

• • Om du vill redigera en modul klickar du på modulen.
    • I den vänstra panelen kan du redigera modulens innehåll och design.
    • Om du vill stänga en popup-CTA efter att en besökare har skickat in formuläret kan du växla till knappen Stäng efter inlämning när du anpassar formulärmodulen.
      

7. I den vänstra panelen klickar du på fliken Innehåll för att hantera dina moduler.
   • Om du vill redigera en modul klickar du på modulens namn . I den vänstra panelen kan du redigera modulens innehåll och design. I rikstextmoduler kan du använda AI-assistenter för att skapa eller förfina ditt CTA-innehåll.
   • Om du vill ta bort en modul håller du muspekaren över modulen och klickar påikonen delete delete.
8. I den vänstra panelen klickar du på fliken Design för att anpassa och förhandsgranska din CTA.
   • Om du vill 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 CTA ska förhandsgranskas.

• • Om du vill anpassa utseendet på din CTA väljer du något av följande alternativ. Konfigurera sedan dina ändringar i den vänstra panelen.
    • Position: för CTA:er med sticky banner kan du välja en position upptill eller nedtill. 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.
    • Storlek: konfigurera höjden på din CTA, du kan växla till alternativet för att ställa in höjden automatiskt baserat på innehållet i din CTA.
    • Layout: konfigurera layouten för din CTA. Du kan lägga till utfyllnad i ditt CTA-innehåll. Du kan också växla till alternativet för att aktivera en responsiv layout. Med en responsiv layout kommer kolumnerna i din CTA att staplas vertikalt på små skärmar.
    • Stilar: ange stilarna för din CTA, till exempel det primära teckensnittet, ramen och droppskuggan från CTA. Du kan använda anpassade teckensnitt med din CTA, läs mer om hur du använder anpassade teckensnitt med ditt HubSpot-innehåll.
    • Bakgrund: ange en bakgrund för CTA, du kan välja att ange en bakgrundsfärg eller ladda upp en bakgrundsbild.
    • Stängningsalternativ: för CTA:er i popup-rutor kan du slå på alternativet för att låta besökare stänga CTA:n när de klickar någonstans utanför popup-rutan. När det här alternativet är avstängt kan besökare bara stänga CTA med hjälp av ikonen Stäng.

Utforma en HTML CTA

Så här skapar du en anpassad inbäddad HTML-CTA och använder dina egna 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. Navigera till Avancerat i menyn till vänster i sidofältet. 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. Om du vill öppna länken på en ny sida markerar du kryssrutan Öppna länken på en ny flik.
   • Filhämtning: 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änk i ny flik om du vill att besökare som klickar på knappens CTA 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. Om du vill öppna länken på en ny sida markerar du kryssrutan Öppna länken i en 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. Knappens CTA-länk kommer att knytas till sidans ID och eventuella ändringar i sidans URL kommer automatiskt att uppdatera knappens CTA-länk. Om du vill öppna länken på 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änk-URL anger du den webbadress som du vill hänvisa besökare till. Om du vill öppna länken på en ny sida markerar du kryssrutan Öppna länken i en ny flik.
   • CTA: använd den anpassade CTA:n för att utlösa en sticky banner, popup-ruta eller slide-in CTA.
6. I fältet Knappinnehåll anger du din CTA-text.
   

7. Om du vill anpassa din CTA:s design ytterligare 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, t.ex. teckensnittsfamiljer, på flera CTA:er på din webbplats. Alla anpassade CSS-klasser bör inkluderas i den CSS-stilmall som används på dina HubSpot-sidor.
   • Anpassade CSS-regler: lägg till anpassade regler för att tillämpa inline-styling som är specifik för din CTA.
     • För att lägga till en ny CSS-regel klickar du på Lägg till en eller + Lägg till och konfigurerar din väljare och stil.
       • Selektor: ange en CSS-selektor. Det här värdet är valfritt och kommer att kombineras med CTA:s väljare. Om den angivna väljaren till exempel är :hover blir den kombinerade väljaren ${ctaSelector}:hover
       • Style: ange en anpassad CSS-stilregel som ska tillämpas på den konfigurerade väljaren. Du kan ange en stil utan att ange en väljare. Till exempel color: yellow;.
         
         

9. Om du vill redigera en befintlig CSS-regel håller du muspekaren över regeln och klickar på redigeringsikonen edit.
10. Om du vill klona en CSS-regel håller du muspekaren över regeln och klickar på ikonen duplicate clone.
11. För att hantera prioriteringen av dina CSS-regler klickar du på och drar varje regel för att ordna den i prioritetsordning.
12. Om du vill ta bort en CSS-regel håller du muspekaren över regeln och klickar på ikonen delete delete.
13. Om du vill använda samma HTML och klasser för CTA som för äldre CTA markerar du kryssrutan Använd äldre markering. Om du har CSS-stilmallar på sidor som utformar äldre CTA:er kommer HTML-CTA:n att använda samma stilar om du markerar den här kryssrutan.
14. Klicka på Spara och tillämpa för att slutföra konfigurationen av din CTA-design.
    

Anpassa var och när din sticky banner, popup-ruta eller slide-in CTA visas

1. För att visa CTA när en besökare befinner sig på en specifik webbadress, i avsnittet Webbadress :
   • Klicka på den första rullgardinsmenyn och välj Webbplats-URL.
   • Klicka på den andra rullgardinsmenyn och välj en inriktningsregel.
   • Ange dina regelkriterier i textfältet.
2. Så här visar du CTA när en besökare befinner sig på en webbplatssida vars URL innehåller specifika frågeparametrar:
   • Klicka på den första rullgardinsmenyn och välj Frågeparameter.
   • Ange namnet på frågeparametern i det första textfältet.
   • Klicka på den andra rullgardinsmenyn och välj en inriktningsregel.
   • I det andra textfältet anger du värdet för frågeparametern.
3. Om du vill lägga till en ny regel klickar du på Lägg till regel.
4. Om du vill utesluta uppmaningarna från vissa sidor klickar du på Lägg till uteslutningsregel. Du kanske till exempel vill lägga till en uteslutningsregel för en sida med sekretesspolicy.

1. I avsnittet Vem ska det visas för anger du målgruppen för din CTA. Du kan välja bland följande:
   • Alla besökare: CTA:t visas för alla besökare.
   • Filtrerade besökare: CTA visas bara för de angivna besökarna
2. I avsnittet Hur ofta kommer det att visas anger du frekvensen för din CTA. Klicka på rullgardinsmenyn Visa igen och välj bland följande:
   • Efter en viss tidsperiod: CTA:n visas igen efter den angivna tidsperioden.
   • Upprepa: CTA:n kommer att 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: CTA:n visas aldrig för samma besökare igen.
     
     

Anpassa dina CTA-alternativ

På flikarnaAlternativ kan du anpassa olika CTA-alternativ, till exempel om CTA ska visas i små storlekar, eventuella associerade kampanjer och CTA:s schemaläggning.

1. Klicka på fliken Alternativ högst upp.
2. För sticky banner, popup-box eller slide-in CTA kan du dölja CTA på små skärmstorlekar. I avsnittet Små skärm storlekar markerar du kryssrutan Stäng av på små skärmstorlekar.
3. Om du har en Marketing Hub Professional- eller Enterprise-prenumeration kan du koppla CTA till en kampanj:
   • Om du vill associera din CTA med en befintlig kampanj klickar du på rullgardinsmenyn Kampanj och väljer en kampanj.
   • Om du vill associera din CTA med en ny kampanj klickar du på rullgardinsmenyn Kampanj och klickar på Skapa kampanj. Fortsätt sedan att konfigurera din kampanj.
   • Om du aldrig har skapat en kampanj tidigare klickar du på Skapa en kampanj. Fortsätt sedan att konfigurera din kampanj.
4. Konfigurera hur du vill spåra klick med din CTA. Välj bland följande alternativ:
   • Spåraklick genom omdirigering: spåra klick till din CTA genom att dirigera besökare till en första URL, som associerar klicket med CTA, innan de omdirigeras till den slutliga sidan. Det här alternativet är valt som standard.
   • Spåraklick via webbläsaren: spårar klick asynkront via besökarens webbläsare. Med det här alternativet kan du använda ankartaggar eftersom det inte finns några omdirigeringar, CTA kommer att leda besökarna till den angivna URL:en.
5. För sticky banner, popup-box eller slide-in CTA kan du schemalägga när en CTA ska visas:
   
   • Om du vill schemalägga när CTA:n ska börja visas aktiverar du knappen Schemalägg för senare. Välj sedan ett startdatum och en starttid.
   • Om du vill schemalägga när CTA:n ska sluta visas aktiverar du knappen Ange datum och tid för avpublicering . Välj sedan ett slutdatum och en sluttid.
     
     

Publicera din CTA

När du är klar med att konfigurera din CTA kan du publicera den för att ta den live.

1. Klicka på Granska och publicera längst upp till höger.
2. I den högra panelen granskar du din CTA och klickar sedan på Publicera nu. CTA:n kommer automatiskt att publiceras på målsidorna.