Maak call-to-actions (CTA’s)

Gebruik de tool voor call-to-action (CTA) om CTA-knoppen, 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 opzetten 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 bezoeker. Lees meer over het gebruik van slimme content in CTA’s. 

1. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Marketing > CTA's. Als Meer niet in je account verschijnt, navigeer dan direct naar Marketing > CTA's.
2. Klik rechtsboven op 'Aanmaken'.
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 zichtbaar terwijl bezoekers door uw pagina scrollen. 
     • Pop-upvenster: een pop-upvenster dat volgens een vast schema verschijnt. 
     • Slide-in: een banner die vanuit een hoek van uw website naar voren schuift. De banner blijft zichtbaar terwijl bezoekers door uw pagina scrollen. 
   • Ingesloten en knop-CTA’s omvatten de volgende soorten: 
     • 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.
   • Je 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 je conferentie of workshop,
5. Voeg in het linkerpaneel, op het tabblad ‘Toevoegen’ , modules toe en bewerk de lay-out van je CTA: 

• • Om meer inhoud aan uw CTA toe te voegen, klikt u op een nieuwe module en sleept u deze 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 je CTA aan te passen, beweeg je de muisaanwijzer over een module en klik en sleep je 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 'verwijderen'. 
     

• • Om een module te bewerken, klik je 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 je 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-assistentengebruiken om uw CTA-inhoud te maken of te verfijnen. 
   • Om een module te verwijderen, beweeg je de muisaanwijzer 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 waarop je de CTA wilt bekijken. 

• • Om het uiterlijk van je CTA aan te passen, selecteer je een van de volgende opties. Configureer vervolgens je wijzigingen in het linkerpaneel. 
    • Positie: voor 'sticky banner'-CTA's kunt u kiezen voor een positie bovenaan of onderaan. 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: stel de hoogte van uw CTA in; u kunt de optie inschakelen om de hoogte automatisch aan te passen 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: stel de lay-out van je CTAin . Je kunt opvulling toevoegen aan de inhoud van je CTA. Je kunt ook de optie inschakelen om een responsieve lay-out te gebruiken. Met een responsieve lay-out worden de kolommen van je CTA op kleine schermen verticaal gestapeld.
    • 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-inhoud. 
    • Achtergrond: stel een achtergrond in voor de CTA; je kunt kiezen voor een achtergrondkleur of een achtergrondafbeelding uploaden.
    • Sluitoptie: voor pop-up-CTA’s kun je de optie inschakelen waarmee bezoekers de CTA kunnen sluiten door ergens buiten het pop-upvenster te klikken. Als deze optie is uitgeschakeld, kunnen bezoekers de CTA alleen sluiten via het sluitpictogram. 

Een HTML-CTA ontwerpen

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

1. Klik in je HubSpot-account op Meer en navigeer vervolgens naar Marketing > CTA's. Als Meer niet in je account verschijnt, navigeer dan direct naar Marketing > CTA's.
2. Klik rechtsboven op 'Maken'.
3. Klik bovenaan op het tabblad 'Inbeddingen 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 je CTA moet doorverwijzen:
   • E-mailadres: maak een 'mailto'-linkaan . Vink het selectievakje 'Link in nieuw tabblad openen ' aan om deze link in een nieuw tabblad te openen. 
   • Bestand downloaden: koppel je CTA aan een bestand in je bestandsbeheer. 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 tabblad 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 zorgen ervoor dat de link van de CTA-knop automatisch wordt bijgewerkt. Om deze link in een nieuw tabblad te openen, vink je het selectievakje ‘Link in nieuw tabblad openen’ 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 ‘Knoptekst’ de tekst van je CTA in. 
   

Let op:cross-domain-links worden niet ondersteund in CTA's, zelfs niet als de instelling voor cross-domain-links is ingeschakeld. 

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-opmaak toe te passen die specifiek is 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 die moet worden toegepast op de geconfigureerde selector. Je kunt een stijl invoeren zonder een selector op te geven. 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 duplicate ( klonen). 
11. Om de prioriteit van je CSS-regels te beheren, klik je op elke regel en sleep je deze 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 pictogram delete '. 
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 je CTA-ontwerp te voltooien .
     

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

Als je een sticky banner, pop-upvenster of slide-in CTA hebt ingesteld, kun je bezoekers targeten door te kiezen wanneer je wilt dat deze CTA op je site verschijnt. Lees meer over het toevoegen van CTA's aan je pagina's. 

U kunt filters gebruiken om meerdere sets regels te combineren die bepalen welke bezoekers uw CTA te zien krijgen. Lees meer over het configureren van uw targetingregels.

Activeringstriggers 

Selecteer een activeringstrigger om te bepalen wanneer de CTA op je pagina wordt weergegeven. De CTA verschijnt zodra aan de eerste geselecteerde trigger is voldaan. 

1. Klik bovenaan op het tabblad ‘Doelgroep’.
2.  Klik in het gedeelte ‘Wanneer moet deze worden weergegeven ’ op de schakelaar naast de activeringstriggers die je wilt gebruiken:
   • Trigger bij klik op knop: de CTA verschijnt wanneer een bezoeker op een knop klikt. Lees hoe je je pop-up-CTA’s zo instelt dat ze worden geactiveerd bij een klik op een knop. Standaard is deze optie altijd ingeschakeld. 
     • Configureer dit in je HubSpot-pagina’s met een standaardknopmodule of op je externe pagina’s door de klasse van een knop aan te passen.
     • Om deze trigger op een externe pagina in te stellen, moet de HubSpot-trackingcode zijn geïnstalleerd. 
   • Trigger bij scrollen op de pagina: de CTA verschijnt wanneer de bezoeker een bepaald percentage van de pagina heeft gescrolld.
   • Trigger bij exit-intentie: de CTA verschijnt wanneer de bezoeker de intentie toont om de pagina te verlaten. 
     • Op een desktop verschijnt de CTA wanneer de bezoeker de cursor naar de bovenste balk van het browservenster verplaatst.
     • Op mobiele apparaten verschijnt de CTA wanneer: 
       • de bezoeker de terugknop in de browser selecteert bij een poging om naar een vorige pagina te gaan.
       • de bezoeker zijn of haar browserscherm minimaliseert en later in dezelfde browser terugkeert naar uw website.
   • Trigger na verstreken tijd: de CTA verschijnt na het opgegeven aantal seconden.
   • Trigger na inactiviteit: de CTA verschijnt nadat de bezoeker een opgegeven aantal seconden inactief is geweest.

Website-URL

Voeg in hetzelfde tabblad ‘Targeting’ voorwaardelijke logica toe voor specifieke webpagina-URL’s of waarden van queryparameters. Standaard wordt de CTA op alle pagina’s weergegeven.

1. Om de CTA weer te geven wanneer een bezoeker zich op een specifieke website-URL bevindt, gaat u in het gedeelte ‘Website-URL’als volgt te werk:
   • Klik op het eerstevervolgkeuzemenu enselecteer'Website-URL'.
   • Klik op het tweedevervolgkeuzemenu enselecteer een targetingregel.
   • Voer de criteria voor uw regel 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. Klikop 'Regel toevoegen' om nog eenregel toe te voegen.
4. Om de call-to-actions van bepaalde pagina's uit te sluiten, klikt u op'Uitsluitingsregel 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 je CTA in. Klik op het vervolgkeuzemenu 'Opnieuw weergeven' en maak een keuze uit de volgende opties:
   • Na een bepaalde periode:de CTA wordt na de opgegeventijdopnieuw weergegeven. 
   • Herhalen: de CTA wordt elke keer weergegeven 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 gekoppelde campagnes en de planning van de CTA. 

1. Klik bovenaan op het tabblad 'Opties '.
2. Voor een sticky banner, pop-upvenster of slide-in CTA kunt u de CTA verbergen op kleine schermformaten. Vink in het gedeelte 'Kleine schermformaten'het selectievakje 'Uitschakelen op kleine schermformaten' aan.
3. Als u een Marketing Hub Professional- of Enterprise -abonnement hebt, kunt u de CTA aan een campagne koppelen:
   • Om je CTA aan een bestaande campagne te koppelen, klik je op het vervolgkeuzemenu 'Campagne' en selecteer je een campagne.
   • Om uw CTA aan een nieuwe campagne te koppelen, klikt u op het vervolgkeuzemenu ‘Campagne ’ en vervolgens op ‘Campagne aanmaken’. Ga daarna verder met het instellen van uw campagne. 
   • Als u nog nooit een campagne hebt aangemaakt, klikt u op 'Een campagne aanmaken'. Ga vervolgens verder met het instellen van uw campagne. 
4. Stel in hoe u klikken op uw CTA wilt bijhouden. Kies uit de volgende opties: 
   • Klikken bijhouden via omleiding: houd klikken op uw CTA bij door bezoekers eerst 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 kun je anker-tags gebruiken, aangezien er geen omleidingen plaatsvinden; de CTA leidt bezoekers rechtstreeks naar de ingestelde URL. 
5. Voor een sticky banner, pop-upvenster of slide-in CTA kunt u instellen wanneer een CTA wordt weergegeven:
   
   • Om in te stellen wanneer de CTA voor het eerst wordt weergegeven, zet je 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 je CTA 

Zodra je klaar bent met het instellen van je CTA, publiceer je 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.