Creëer oproepen tot actie (CTA's)

Gebruik de tool voor call-to-actions (CTA’s) om knop-CTA’s, banners of pop-ups te maken die je aan je HubSpot-pagina’s kunt toevoegen om nieuwe bezoekers aan te trekken. Je kunt ook CTA’s aan externe pagina’s toevoegen.

Voordat je een CTA aan een externe pagina toevoegt, moet je de HubSpot-trackingcode installeren of de HubSpot WordPress-plug-in op je WordPress-site installeren. Nadat je een CTA hebt toegevoegd, kun je verkeer genereren door bezoekers naar specifieke pagina's, vergaderlinks of externe URL's te leiden. 

Op mobiele apparaten kun je in de CTA-opties kiezen om een responsieve lay-out in te schakelen of de CTA op kleine schermen te verbergen. Leer na het publiceren van je CTA hoe je een A/B-test voor je CTA kunt maken en de prestaties van je CTA kunt analyseren. 

Een CTA ontwerpen

Pas in de CTA-editor het ontwerp van je CTA aan om bezoekers aan te trekken. Bij het maken van CTA's kun je ook slimme content gebruiken om verschillende versies van je CTA weer te geven op basis van de categorie van de kijker. Lees meer over het gebruik van slimme content in CTA's. 

1. Ga in je HubSpot-account naar Marketing > CTA's.
2. Klik rechtsboven op Maken.
3. Selecteer bovenaan het tabblad Pop-ups of het tabblad Inbeddingen en knoppen. 
   • Pop-up-CTA's omvatten de volgende typen: 
     
     • Banner: een permanente banner die bovenaan of onderaan uw pagina is vastgezet. De banner blijft staan terwijl bezoekers door uw pagina scrollen. 
     • Pop-upvenster: een pop-upvenster dat op een vast tijdstip verschijnt. 
     • Slide-in: een banner die vanuit een hoek van uw website naar voren schuift. De banner blijft staan terwijl bezoekers door uw pagina scrollen. 
   • CTA's voor insluiten en knoppen omvatten de volgende typen: 
     • Ingesloten: een banner, call-to-action of knop die u op uw website of in HubSpot-e-mails kunt gebruiken om potentiële klanten naar specifieke pagina's te leiden.
     • Ingesloten afbeelding: een afbeelding die u kunt gebruiken op uw HubSpot-pagina's of in e-mails.
4. Kies eensjabloon op basis van het type CTA dat u wilt maken.
   • Elke CTA-sjabloon bevat aanpasbare modules, zoals afbeeldingen en tekstvelden.
   • U kunt bijvoorbeeld een 'Klik om te chatten'-sjabloon selecteren om een WhatsApp-link te openen, een 'Vergaderingspop-up'-sjabloon om een pagina voor het boeken van vergaderingen weer te geven, of een 'Evenement '-sjabloon waarmee bezoekers zich kunnen aanmelden voor uw conferentie of workshop.
5. Voeg in het linkerpaneel, op het tabblad 'Toevoegen' , modules toe en bewerk de lay-out voor uw CTA: 

• • Om meer inhoud aan uw CTA toe te voegen, klikt en sleept u een nieuwe module rechtstreeks naar het rechterpaneel van de editor.
    • U kunt slechts één Formulier (Nieuwe Editor) of Vergaderingsmodule aan een CTA toevoegen. Een enkele CTA kan niet zowel een formulier- als een vergaderingsmodule bevatten. 
    • Bepaalde modules kunnen slechts één keer worden toegevoegd, zoals de afteltimer of videomodules.
    • U kunt ook video's aan uw CTA toevoegen. Lees meer over de vereisten voor het toevoegen van video's aan uw CTA's. 
  • Om de lay-out van uw CTA aan te passen, beweegt u de muisaanwijzer over een module en klikt en sleept u deze naar een nieuwe positie.
  • Om de module te dupliceren, beweeg je de muis over de module en klik je op hetpictogram voor dupliceren/klonen.
  • Om de module te verwijderen, beweeg je de muis over de module en klik je op hetpictogram voor verwijderen. 
     

. 

• • Om een module te bewerken, klikt u op de module.
    • In het linkerpaneel kunt u de inhoud en het ontwerp van de module bewerken.
    • Om een pop-up-CTA te sluiten nadat een bezoeker het formulier heeft verzonden, kunt u bij het aanpassen van uw formuliermodule de schakelaar 'Sluiten na verzending ' inschakelen. 
       

7. Klik in het linkerpaneel op het tabblad 'Inhoud' om uw modules te beheren. 
   • Om een module te bewerken, klikt u op de naam van de module. In het linkerpaneel kunt u de inhoud en het ontwerp van de module bewerken. In rich text-modules kunt u AI-assistenten gebruiken om uw CTA-inhoud te maken of te verfijnen. 
   • Om een module te verwijderen, beweeg je de muis over de module en klik je op hetverwijderpictogram. 
8. Klik in het linkerpaneel op het tabblad Ontwerp om je CTA aan te passen en een voorbeeld te bekijken.
   • Om een voorbeeld van je CTA op specifieke pagina's te bekijken, klik je rechtsboven op Voorbeeld. Klik vervolgens op het vervolgkeuzemenu Voorbeeld op specifieke pagina en selecteer de HubSpot-pagina om het voorbeeld van de CTA te bekijken. 

• • Om het uiterlijk van uw CTA aan te passen, selecteert u een van de volgende opties. Configureer vervolgens uw wijzigingen in het linkerpaneel. 
    • Positie: voor sticky banner-CTA's kunt u een positie bovenaan of onderaan selecteren. Voor slide-in CTA's kunt u de CTA linksboven, linksonder, rechtsboven of rechtsonder op de pagina plaatsen. Het wordt aanbevolen om slechts één slide-in CTA per pagina te gebruiken. Het gebruik van meerdere slide-in CTA's kan leiden tot conflicten en ervoor zorgen dat de CTA's niet worden weergegeven.
    • Afmetingen: configureer de hoogte van uw CTA. U kunt de optie inschakelen om de hoogte automatisch in te stellen op basis van de inhoud van uw CTA. Als deze optie niet is geselecteerd, verschijnt er soms een schuifbalk op uw CTA, afhankelijk van uw ontwerp. 
    • Lay-out: configureer de lay-out van je CTA. Je kunt opvulling toevoegen aan je CTA-inhoud. Je kunt ook de optie inschakelen om een responsieve lay-out in te schakelen. Met een responsieve lay-out worden de kolommen van je CTA verticaal gestapeld op kleine schermen.
    • Stijlen: stel de stijlen voor je CTAin , zoals het primaire lettertype, de rand en de slagschaduw van de CTA. Je kunt aangepaste lettertypen gebruiken voor je CTA. Lees meer over het gebruik van aangepaste lettertypen in je HubSpot-content. 
    • Achtergrond: stel een achtergrond in voor de CTA. U kunt een achtergrondkleur instellen of een achtergrondafbeelding uploaden.
    • Sluitoptie: voor pop-upbox-CTA's kun je de optie inschakelen waarmee bezoekers de CTA kunnen sluiten wanneer ze ergens buiten de pop-upbox klikken. Wanneer deze optie is uitgeschakeld, kunnen bezoekers de CTA alleen sluiten met het sluitpictogram. 

Een HTML-CTA ontwerpen

Om een aangepaste ingebedde HTML-CTA te maken en uw aangepaste thema's of CSS toe te passen:

1. Ga in je HubSpot-account naar Marketing > CTA's.
2. Klik rechtsboven op Maken.
3. Klik bovenaan op het tabblad Insluitingen en knoppen.
4. Ga in het menu in de linkerzijbalk naar Geavanceerd. Selecteer vervolgens Ingesloten HTML.
5. Klik in het linkerpaneel op het vervolgkeuzemenu Link naar en selecteer een optie waarnaar uw CTA moet doorverwijzen:
   • E-mailadres: maak een mailto-link. Om deze link in een nieuw venster te openen, vink je het vakje Link in nieuw tabblad openen aan. 
   • Bestand downloaden: koppel je CTA aan een bestand in je bestandsbeheerder. Selecteer een bestaand bestand of upload een nieuw bestand, en vink vervolgens het selectievakje Link openen in nieuw tabblad aan als je wilt dat bezoekers die op de CTA-knop klikken de afbeelding in een nieuw browservenster te zien krijgen. 
   • Vergaderlink: koppel je CTA aan een HubSpot-vergaderlink. Klik op de vervolgkeuzelijst 'Kies een vergaderlink' en selecteer vervolgens een vergaderlink. Om deze link in een nieuw venster te openen, vink je het selectievakje 'Link in nieuw tabblad openen' aan. 
   • Een van je pagina's: koppel je CTA aan een van je HubSpot-pagina's of blogberichten. Klik op het vervolgkeuzemenu Pagina en selecteer vervolgens een pagina of bericht. De link van de CTA-knop wordt gekoppeld aan de pagina-ID en eventuele wijzigingen in de URL van de pagina worden automatisch doorgevoerd in de link van de CTA-knop. Om deze link in een nieuw venster te openen, vink je het selectievakje 'Link openen in nieuw tabblad' aan. 
   • URL: koppel je CTA aan een externe pagina buiten HubSpot. Voer in het veld Link-URL de website-URL in waarnaar je bezoekers wilt leiden. Om deze link in een nieuw venster te openen, vink je het selectievakje Link in nieuw tabblad openen aan. 
   • CTA: gebruik de aangepaste CTA om een sticky banner, pop-upvenster of slide-in CTA te activeren.
6. Voer in het veld Knopinhoud de tekst van je CTA in. 
   

7. Klik op Geavanceerd om het ontwerp van je CTA verder aan te passen
8. Op de pagina Geavanceerd kun je aangepaste CSS-klassen of regels toevoegen:
   • Aangepaste CSS-klassen: voer een aangepaste klassein voor je CTA. Gebruik aangepaste klassen om ontwerpstijlen, zoals lettertypefamilies, toe te passen op meerdere CTA's op je website. Elke aangepaste CSS-klasse moet worden opgenomen in het CSS-stylesheet dat wordt gebruikt in je HubSpot-pagina's.
   • Aangepaste CSS-regels: voeg aangepaste regels toe om inline-stijlen toe te passen die specifiek zijn voor je CTA.
     • Om een nieuwe CSS-regel toe te voegen, klik je op 'Eén toevoegen ' of '+ Toevoegen ' en configureer je je selector en stijl via ' '. 
       • Selector: voer een CSS-selectorin . Deze waarde is optioneel en wordt gecombineerd met de selector van de CTA. Als de ingevoerde selector bijvoorbeeld :hover is, wordt de gecombineerde selector ${ctaSelector}:hover
       • Stijl: voer een aangepaste CSS-stijlregel in om toe te passen op de geconfigureerde selector. U kunt een stijl invoeren zonder een selector in te voeren. Bijvoorbeeld: color: yellow;.
         
         

9. Om een bestaande CSS-regel te bewerken, beweeg je de muis over de regel en klik je op het bewerkingspictogram. 
10. Om een CSS-regel te klonen, beweeg je de muis over de regel en klik je op het pictogram voor dupliceren. 
11. Om de prioriteit van uw CSS-regels te beheren, klikt en sleept u elke regel om ze in volgorde van prioriteit te rangschikken.
12. Om een CSS-regel te verwijderen, beweeg je de muis over de regel en klik je op het verwijderpictogram. 
13. Om dezelfde HTML en klassen toe te passen op de CTA als bij legacy CTA's, vink je het selectievakje 'Legacy-opmaak gebruiken' aan. Als je CSS-stylesheets op pagina's hebt die legacy CTA's opmaken, zorgt het aanvinken van dit selectievakje ervoor dat de HTML-CTA dezelfde stijlen overneemt. 
14. Klik op 'Opslaan en toepassen' om het instellen van uw CTA-ontwerp te voltooien .
     

Pas aan waar en wanneer uw sticky banner, pop-upvenster of slide-in CTA wordt weergegeven

1. Om de CTA weer te geven wanneer een bezoeker zich op een specifieke website-URL bevindt, gaat u naar het gedeelte ‘Website-URL’:
   • Klik op het eerstevervolgkeuzemenu enselecteerWebsite-URL.
   • Klik op het tweedevervolgkeuzemenu enselecteer een targetingregel.
   • Voer uw regelcriteria in het tekstveld in.
2. Om de CTA weer te geven wanneer een bezoeker zich op een webpagina bevindt waarvan de URL specifieke queryparameters bevat:
   • Klik op het eerstevervolgkeuzemenu enselecteerQueryparameter.
   • Voer in het eerste tekstveldde naam van dequeryparameter in.
   • Klik op het tweede vervolgkeuzemenu en selecteer een targetingregel.
   • Voer in het tweede tekstveldde waarde vande queryparameter in.
3. Klik opRegel toevoegen om nog een regel toe te voegen.
4. Om de call-to-actions van bepaalde pagina's uit te sluiten, klikt u opUitsluitingsregel toevoegen. U kunt bijvoorbeeld een uitsluiting toevoegen voor een pagina met het privacybeleid.

1. Stel in het gedeelte Aan wie wordt het getoond de doelgroep voor uw CTA in. U kunt kiezen uit het volgende:
   • Alle bezoekers: de CTA wordt aan alle bezoekers getoond. 
   • Gefilterde bezoekers: de CTA wordt alleen weergegeven aan de opgegeven bezoekers
2. Stel in het gedeelte Hoe vaak wordt deze getoond de frequentie voor uw CTA in. Klik op het vervolgkeuzemenu Opnieuw weergeven en maak een keuze uit het volgende:
   • Na een bepaalde periode:de CTA verschijnt opnieuw na de opgegeven tijd. 
   • Herhalen: de CTA verschijnt elke keer wanneer de bezoeker naar de geselecteerde webpagina's navigeert en de triggeractie uitvoert, zelfs als hij er eerder op heeft gereageerd.
   • Niet opnieuw weergeven: de CTA wordt nooit meer aan dezelfde bezoeker getoond. 
     
     

Pas uw CTA-opties aan

Pas op detabbladen Opties verschillende CTA-opties aan, zoals of de CTA op kleine formaten moet worden weergegeven, eventuele bijbehorende campagnes en de planning van de CTA. 

1. Klik bovenaan op het tabblad 'Opties '.
2. Voor sticky banners, pop-upvensters of slide-in CTA's kunt u de CTA verbergen op kleine schermformaten. Selecteer in het gedeelte Kleine schermformatenhet selectievakje Uitschakelen op kleine schermformaten.
3. Als u een Marketing Hub Professional- of Enterprise -abonnement hebt, kunt u de CTA koppelen aan een campagne:
   • Om uw CTA aan een bestaande campagne te koppelen, klikt u op het vervolgkeuzemenu 'Campagne' en selecteert u een campagne.
   • Om uw CTA aan een nieuwe campagne te koppelen, klikt u op het vervolgkeuzemenu 'Campagne' en vervolgens op 'Campagne maken'. Ga vervolgens verder met het instellen van uw campagne. 
   • Als u nog nooit een campagne hebt gemaakt, klikt u op 'Een campagne maken'. Ga vervolgens verder met het instellen van uw campagne. 
4. Configureer hoe u klikken met uw CTA wilt bijhouden. Kies uit de volgende opties: 
   • Klikken bijhouden via omleiding: houd klikken op uw CTA bij door bezoekers naar een eerste URL te leiden, die de klik aan de CTA koppelt, voordat ze naar de eindpagina worden omgeleid. Deze optie is standaard geselecteerd.
   • Klikken bijhouden via de browser: houdt klikken asynchroon bij via de browser van de bezoeker. Met deze optie kunt u anker-tags gebruiken, aangezien er geen omleidingen zijn; de CTA leidt bezoekers naar de ingestelde URL. 
5. Voor sticky banners, pop-upvensters of slide-in CTA's kunt u instellen wanneer een CTA wordt weergegeven:
   
   • Om in te stellen wanneer de CTA begint te worden weergegeven, zet u de schakelaar 'Inplannen voor later ' aan. Selecteer vervolgens een startdatum en -tijd. 
   • Om in te stellen wanneer de CTA niet meer wordt weergegeven, zet u de schakelaar 'Datum en tijd voor het verwijderen instellen' aan. Selecteer vervolgens een einddatum en -tijd. 
     
     

Publiceer uw CTA 

Zodra u klaar bent met het instellen van uw CTA, publiceert u deze om hem live te zetten. 

1. Klik rechtsboven op Controleren en publiceren.
2. Controleer je CTA in het rechterpaneel en klik vervolgens op Nu publiceren. De CTA wordt automatisch gepubliceerd op de beoogde pagina's.