Skapa uppmaningar till handling (CTA)

Använd verktyget för uppmaningar till handling (CTA) för att skapa knapp-CTA:er, banners eller popup-fönster som du kan lägga till på dina HubSpot-sidor och 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 HubSpot-spårningskoden eller installera HubSpot 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:n på små skärmar i CTA-alternativen. När du har publicerat din CTA kan du lära dig hur du analyserar CTA:ns prestanda.

Om du har befintliga äldre CTA:er rekommenderar vi att du migrerar dessa CTA:er till den nya redigeraren. Läs mer om att migrera CTA:er (äldre).

Utforma en CTA

I CTA-redigeraren kan du anpassa din CTA:s design för att locka besökare.

• I ditt HubSpot-konto navigerar du till Marknadsföring > Lead Capture > CTA.
• Klicka på rullgardinsmenyn längst upp till vänster och välj CTA.
• Klicka på Skapa längst upp till höger.
• Du kan skapa en ny CTA från grunden eller från en mall:
  • Om du vill skapa en ny CTA från en mall klickar du på HubSpot Templates i den vänstra panelen. Välj sedan en mall som matchar dina mål.
  • Om du vill skapa en ny CTA från grunden klickar du på Starta från grunden i den vänstra panelen. Välj sedan en CTA-typ:
    
    • Sticky Banner: en permanent banner som fästs längst upp eller längst ner på din sida. Bannern kommer att finnas kvar när besökare bläddrar igenom din sida.
    • Popup-ruta: en popup-ruta som visas enligt ett fastställt schema.
    • Slide-In: en banner som glider in från ett hörn på din webbplats. Bannern ligger kvar när besökaren scrollar genom sidan.
    • Inbäddad: en banner, call-to-action eller knapp som du kan använda i ditt HubSpot-innehåll för att leda potentiella kunder till specifika sidor.
    • Inbäddadbild: en bild som du kan använda på dina HubSpot-sidor eller i e-postmeddelanden.
    • Inbäddad: en knapp som du kan använda på dina HubSpot-sidor eller i dina e-postmeddelanden.
• I den vänstra panelen, på fliken Lägg till, kan du lägga till element och redigera layouten för din CTA:

• • Om du vill lägga till mer innehåll i din CTA klickar du och drar ett nytt element direkt till den högra panelen i redigeraren. Du kan också lägga till videoelement i din CTA, läs mer om vilka alternativ som krävs när du lägger till videor i dina CTA:er.
  • För att ändra din CTA:s layout, håll muspekaren över ett element och klicka och dra det till en ny position.
  • Duplicera elementet genom att hålla muspekaren över elementet och klicka påklonikonen duplicate.
  • Ta bort elementet genom att hålla muspekaren över elementet och klicka på ikonen deletedelete.
  • Klicka på ett element för att redigera det. I den vänstra panelen kan du redigera elementets innehåll och design.

• Klicka på fliken Innehåll i den vänstra panelen för att hantera dina element.
  • Om du vill redigera ett element klickar du på elementets namn . I den vänstra panelen kan du redigera elementets innehåll och design. I element med rik text kan du använda AI-assistenter för att skapa eller förfina ditt CTA-innehåll.
  • Om du vill ta bort ett element håller du muspekaren över elementet och klickar påikonen delete delete.
• Klicka på fliken Design i den vänstra panelen 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 CTA:n ska förhandsgranskas.

• • Anpassa utseendet på din CTA genom att välja ett av följande alternativ. Konfigurera sedan dina ändringar i den vänstra panelen.
    • Position: för sticky banner-CTA:er kan du välja en topp- eller bottenposition. För CTA:er som skjuts 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 på 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 till ditt CTA-innehåll. Du kan också växla till alternativet för att aktivera 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, t.ex. det primära teckensnittet, kanten och skuggan från CTA:n.
    • Bakgrund: Ange en bakgrund för CTA:n. Du kan välja att ange en bakgrundsfärg eller ladda upp en bakgrundsbild.
    • Stäng alternativ: för CTA:er i popup-rutor kan du växla till alternativet 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:n med hjälp av stäng-ikonen.

Designa en HTML-CTA

Skapa en anpassad inbäddad HTML-CTA och använd dina anpassade teman eller CSS:

• Klicka på Börja från början i den vänstra panelen.
• Klicka sedan för att expandera Avancerade alternativ och välj Inbäddad HTML.
• Klicka på rullgardinsmenyn Länk till och välj ett alternativ som din CTA ska omdirigeras till:
  • E-postadress: skapa en mailto-länk. Om du vill öppna länken på en ny sida markerar du kryssrutan Öppna länk 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ä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ötes länk och välj sedan en möteslänk. Om du vill öppna länken på en ny sida markerar du kryssrutan Öppna länk på 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änk på ny flik.
  • URL: länka din CTA till en extern sida utanför HubSpot. I fältet Länk-URL anger du den webbplats-URL som du vill dirigera besökare till. Om du vill öppna länken på en ny sida markerar du kryssrutan Öppna länk i ny f lik.
  • CTA: använd den anpassade CTA:n för att trigga en sticky banner, popup-ruta eller slide-in CTA.
• Ange din CTA-text i fältet Knappinnehåll.
• Om du vill anpassa CTA:ns design ytterligare klickar du på Avancerat
  

• 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 som teckensnittsfamiljer över flera CTA på din webbplats. Alla anpassade CSS-klasser bör inkluderas i CSS-formatmallen 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.
      • Väljare: ange en CSS-väljare. Detta värde är valfritt och kommer att kombineras med CTA:ns väljare. Om den angivna väljaren t.ex. är :hover blir den kombinerade väljaren ${ctaSelector}:hover
      • Stil: 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;.

• Om du vill redigera en befintlig CSS-regel håller du muspekaren över regeln och klickar på redigeringsikonen edit.
• Klona en CSS-regel genom att hålla muspekaren över regeln och klicka på klonikonen duplicate.

• Om du vill hantera prioriteten för dina CSS-regler klickar du och drar varje regel för att ordna dem i prioritetsordning.
• Om du vill ta bort en CSS-regel håller du muspekaren över regeln och klickar på ikonen delete delete.

• Om du vill använda samma HTML och klasser för CTA som för äldre CTA:er markerar du kryssrutan Använd äldre uppmär kning. Om du har CSS-stilmallar på sidor som stylar äldre CTA:er kan du markera den här kryssrutan så att HTML-CTA:n använder samma stilar.

• Klicka på Spara och tillämpa för att avsluta konfigurationen av din CTA-design.
  

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

Om du har skapat en CTA i form av en sticky banner, popup-ruta eller slide-in 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 om vilka besökare som ser 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 när den första valda triggern har uppfyllts.

• Klicka på fliken Inriktning högst upp.
• I avsnittet När ska den visas klickar du för att växla reglaget bredvid de aktiveringsutlösare som du vill använda:
  • Utlösare vid knappklick: CTA:n visas när en besökare klickar på en knapp. Lär dig 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 trigger på en extern sida måste HubSpot-spårningskoden vara installerad.
  • Trigger vid sidrullning: CTA: n visas när besökaren har rullat förbi en angiven procentandel av sidan.
  • Trigger vidavsikt att lämna sidan: CTA:n visas när besökaren flyttar markören till webbläsarfönstrets övre fält.
  • Trigger efter förfluten tid: CTA: n visas efter det angivna antalet sekunder.
  • Trigger efterinaktivitet: CTA: n visas när besökaren har varit inaktiv under ett angivet antal sekunder.

Webbplatsens URL

Lägg till villkorlig logik för specifika webbadresser eller frågeparametervärden på samma flik Målinriktning . Som standard visas CTA på alla sidor.

• 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 riktningsregel.
  • Ange dina regelkriterier i textfältet.
• Så här visar du CTA när en besökare är 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 riktningsregel.
  • I det andra textfältet anger du värdet för frågeparametern.
• Klicka på Lägg till regel om du vill lägga till en annan regel.
• Om du vill utesluta uppmaningarna från vissa sidor klickar du på Lägg till uteslutningsregel. Du kanske till exempel vill lägga till ett undantag för en sida med sekretesspolicy.

Besökarinformation och beteende

Du kan också rikta in dig på specifika kontakter baserat på känd besökarinformation och beteende på fliken Inriktning . Vilken typ av filtreringsregler du kan lägga till beror på ditt kontos prenumerationer.

• Om du vill visa CTA för alla besökare på de angivna webbplatserna väljer du Alla besökare. Det här alternativet är valt som standard.
• Om du vill visa dina CTA:er för specifika besökare klickar du på alternativet Filtrerade besökare . Ställ sedan in dina filter:
  • Klicka på den första rullgardinsmenyn för att välja hur du vill filtrera dina besökare.

• • Klicka på nästa rullgardinsmeny för att välja dina filtreringsregler.
  • Om du vill lägga till fler regler för när du ska visa din CTA klickar du på Lägg till regel och väljer dina filter.

• • Välj när du vill dölja CTA:
    
    • Klicka på Lägg till uteslutningsregel.
    • Klicka på den första rullgardinsmenyn för att välja när CTA ska döljas.
    • Klicka på nästa rullgardinsmeny för att välja dina filtreringsregler.
    • Om du vill lägga till fler regler för när du ska dölja din CTA klickar du på Lägg till uteslut ningsregel och väljer dina filter.

• • Om du vill skapa ytterligare en uppsättning filtreringsregler klickar du på Lägg till filtergrupp och väljer dina filtreringsregler.

Visa frekvens

När en besökare har avfärdat din sticky banner, popup-ruta eller slide-in CTA för första gången kan du välja om CTA:n ska visas igen och hur ofta den ska visas. På fliken Inriktning ställer du in visningsfrekvensen för din CTA:

• I avsnittet Hur ofta ska den visas klickar du på rullgardinsmenynVisa igen och väljer en frekvens:
  • Efter en viss tidsperiod: Ange hur lång tid som ska gå efter att en besökare har avfärdat CTA:n innan den visas igen.
  • Upprepa: visa CTA: n varje gång de besöker de valda webbsidorna och utför den utlösande åtgärden, även om de tidigare har interagerat med den.
  • Visa inte igen: visa CTA:n för besökarna endast en gång. Efter den första visningen ska CTA:n aldrig visas igen.

Observera: detta gäller inte för CTA:er när du använder Trigger vid knappklick som en aktiveringstrigger för .

Anpassa dina CTA-alternativ

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

• Klicka på fliken Alternativ högst upp.
• För sticky banner, popup-box eller slide-in CTA kan du dölja CTA:n på små skärmstorlekar. I avsnittet Små skärm storlekar markerar du kryssrutan Stäng av på små skärmstorlekar.

• Om du har en Marketing Hub Professional- eller Enterprise-prenumeration kan du associera CTA med 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 med 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.
• 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 första URL, som associerar klicket med CTA, innan du omdirigerar dem 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ökare till den angivna webbadressen.

• För sticky banner, pop-up box 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 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 publicerar du din CTA för att ta den live.

• Klicka på Granska och publicera längst upp till höger.
• Granska din CTA i den högra panelen och klicka sedan på Publicera nu. CTA:n kommer automatiskt att publiceras på målsidorna.