Créer des calls-to-action (CTA)

Utilisez l'outil call-to-action (CTA) pour créer des boutons CTA, des bannières ou des fenêtres contextuelles à ajouter à vos pages HubSpot et attirer de nouveaux visiteurs. Vous pouvez également ajouter des CTA à des pages externes.

Avant d'ajouter un CTA à une page externe, vous devez installer le code de suivi HubSpot ou installer le plug-in HubSpot WordPress sur votre site WordPress. Après avoir ajouté un CTA, générez du trafic en redirigeant les visiteurs vers des pages spécifiques, des liens vers des réunions ou des URL externes. 

Sur les appareils mobiles, vous pouvez choisir entre activer une mise en page adaptable, ou masquer le CTA sur les petits écrans dans les options CTA. Après avoir publié votre CTA, apprenez comment analyser les performances de votre CTA. 

Si vous disposez de CTA existants hérités, il est recommandé de les migrer vers le nouvel éditeur. En savoir plus sur la migration des CTA (Version héritée).

Concevoir un CTA

Dans l'éditeur de CTA, personnalisez la conception de votre CTA pour attirer les visiteurs. 

• Dans votre compte HubSpot, accédez à Marketing > Capture de lead > CTA.
• Dans l'angle supérieur gauche, cliquez sur le menu déroulant et sélectionnez CTA.
• Dans l'angle supérieur droit, cliquez sur Créer.
• Vous pouvez créer un nouveau CTA à partir de zéro ou d'un modèle :
  • Pour créer un nouveau CTA à partir d'un modèle, dans le panneau de gauche, cliquez sur Modèles HubSpot. Ensuite, sélectionnez un modèle qui correspond à vos objectifs. 
  • Pour créer un nouveau CTA à partir de zéro, dans le panneau de gauche, cliquez sur Démarrer à partir de zéro. Sélectionnez ensuite un type de CTA :
    
    • Bannière autocollante : une bannière permanente fixée en haut ou en bas de votre page. La bannière restera en place lorsque les visiteurs feront défiler votre page. 
    • Fenêtre contextuelle : une fenêtre contextuelle qui s'affiche selon un calendrier défini. 
    • CTA coulissant : une bannière qui se glisse dans un coin de votre site web. La bannière restera en place lorsque les visiteurs feront défiler votre page. 
    • CTA intégré : une bannière, un call-to-action ou un bouton que vous pouvez utiliser sur votre contenu HubSpot pour conduire des clients potentiels vers des pages spécifiques.
    • Image intégrée : une image que vous pouvez utiliser sur vos pages HubSpot ou dans vos e-mails.
    • CTA Intégré : un bouton que vous pouvez utiliser sur vos pages HubSpot ou dans vos e-mails.
• Dans le panneau de gauche, à partir de l'onglet Ajouter, ajoutez des éléments et modifiez la mise en page de votre CTA : 

• • Pour ajouter plus de contenu à votre CTA, cliquez et faites glisser un nouvel élément directement dans le panneau de droite de l'éditeur. Vous pouvez également ajouter des éléments vidéo à votre CTA, il est indispensable d'en savoir plus sur les options si vous souhaitez ajouter des vidéos à vos CTA. 
  • Pour modifier la mise en page de votre CTA, passez le curseur sur un élément puis cliquez et faites-le glisser vers un nouvel emplacement.
  • Pour dupliquer l'élément, placez le curseur sur celui-ci et cliquez sur l'icône clonerduplicate.
  • Pour supprimer l'élément, placez le curseur sur celui-ci et cliquez sur l'icône de suppressiondelete. 
  • Pour modifier un élément, cliquez sur l'élément. Dans le panneau de gauche, vous pouvez modifier le contenu et la conception de l'élément.

• Dans le panneau de gauche, cliquez sur l'onglet Contenu pour gérer vos éléments. 
  • Pour modifier un élément, cliquez sur le nom de celui-ci. Dans le panneau de gauche, vous pouvez modifier le contenu et la conception de l'élément. Dans les éléments de texte riche vous pouvez utiliser des assistants IA pour créer ou affiner votre contenu CTA. 
  • Pour supprimer un élément, passez la souris sur celui-ci et cliquez sur l'icône de suppressiondelete . 
• Dans le panneau de gauche, cliquez sur l'onglet Conception pour personnaliser et prévisualiser votre CTA.
  • Pour prévisualiser votre CTA sur des pages spécifiques, cliquez en haut à droite sur Aperçu. Ensuite, cliquez sur le menu déroulant Prévisualiser sur une page spécifique et sélectionnez la page HubSpot pour prévisualiser le CTA. 

• • Pour personnaliser l'apparence de votre CTA, sélectionnez l'une des options suivantes. Configurez ensuite vos modifications dans le panneau de gauche. 
    • Position :pour les bannières autocollantes CTA, vous pouvez sélectionner une position supérieure ou inférieure. Pour les CTA coulissants, vous pouvez positionner le CTA en haut à gauche, en bas à gauche, en haut à droite ou en bas à droite de la page. 
    • Dimensionnement : configurer la hauteur de votre CTA, vous pouvez activer l'option pour définir la hauteur automatiquement en fonction du contenu de votre CTA.
    • Mise en page : configure la mise en page de votre CTA. Vous pouvez ajouter du remplissage au contenu de votre CTA. Vous pouvez également activer l'option de mise en page adaptable. Avec une mise en page adaptable, les colonnes de votre CTA s'empileront verticalement sur les petits écrans.
    • Styles : définit les styles de votre CTA, tels que la police principale, la bordure et l'ombre portée du CTA. 
    • Arrière-plan : définit un arrière-plan pour le CTA. Vous pouvez choisir de définir une couleur d'arrière-plan ou de télécharger une image d'arrière-plan.
    • Option de fermeture : pour les fenêtres contextuelles CTA, vous pouvez activer l'option permettant aux visiteurs de fermer le CTA lorsqu'ils cliquent n'importe où en dehors de la fenêtre contextuelle. Lorsque cette option est désactivée, les visiteurs ne peuvent fermer le CTA qu'à l'aide de l'icône de fermeture. 

Concevoir un CTA en HTML

Pour créer un CTA HTML intégré personnalisé et appliquer vos thèmes ou CSS personnalisés :

• Dans le panneau de gauche, cliquez sur Commencer à partir de zéro. 
• Ensuite, cliquez pour développer Options avancées et sélectionnez HTML intégré.
• Cliquez sur le menu déroulant Lien vers et sélectionnez une option vers laquelle votre CTA doit être redirigé :
  • Adresse e-mail : créez un lien mailto.
  • Téléchargement de fichier : liez votre CTA à un fichier dans le gestionnaire de fichiers. Sélectionnez un fichier existant ou téléchargez un nouveau fichier, puis sélectionnez la case Ouvrir la page dans un nouvel onglet si vous souhaitez que l'image s'affiche sur une nouvelle fenêtre de navigateur lorsque les visiteurs cliquent sur le bouton du CTA. 
  • Lien de prise de rendez-vous : lier votre CTA à un lien de prise de rendez-vous HubSpot. Cliquez sur le menu déroulant Choisissez un lien de prise de rendez-vous, puis sélectionnez un lien de prise de rendez-vous. Pour ouvrir ce lien dans une nouvelle page, cochez la case Ouvrir la page dans un nouvel onglet. 
  • L'une de vos pages : liez votre CTA à l'une de vos pages ou articles de blog HubSpot. Cliquez sur le menu déroulant Page puis sélectionnez une page ou un post. Le bouton du CTA sera lié à l'ID de la page et toute modification de l'URL de la page mettra automatiquement à jour le lien du bouton du CTA.
  • URL : lier votre CTA à une page externe à HubSpot. Dans le champ Lien vers URL, saisissez l'URL du site web vers lequel vous souhaitez diriger les visiteurs.
  • CTA : Utilisez le CTA personnalisé pour déclencher une bannière autocollante, une fenêtre contextuelle ou un CTA coulissant.
• Dans le champ Contenu du bouton, entrez votre texte CTA. 
• Pour personnaliser davantage la conception de votre CTA, cliquez sur Avancé.
   

• Sur la page Avancé, vous pouvez ajouter des classes ou des règles CSS personnalisées :
  • Classes CSS personnalisées : entrez une classe personnalisée pour votre CTA. Utilisez des classes personnalisées pour appliquer des styles de conception, tels que des familles de polices, à plusieurs CTA de votre site web. Toute classe CSS personnalisée doit être incluse dans la feuille de style CSS utilisée dans vos pages HubSpot.
  • Règles CSS personnalisées : ajoute des règles personnalisées pour appliquer un style en ligne spécifique à votre CTA.
    • Pour ajouter une nouvelle règle CSS, cliquez sur Ajouter une ou + Ajouter et configurez votre sélecteur et votre style. 
      • Sélecteur : entrez un sélecteur CSS. Cette valeur est facultative et sera combinée avec le sélecteur du CTA. Par exemple, si le sélecteur saisi est:hover, le sélecteur combiné devient ${ctaSelector}:hover
      • Style : entrer une règle de style CSS personnalisée à appliquer au sélecteur configuré. Vous pouvez saisir un style sans saisir de sélecteur. Par exemple : color: yellow;.
         

• Pour modifier une règle CSS existante, passez la souris sur la règle et cliquez sur editl'icône modifier. 
• Pour cloner une règle CSS, survolez la règle et cliquez sur duplicatel'icône cloner. 

• Pour gérer la priorité de vos règles CSS, cliquez et faites glisser chaque règle pour les classer par ordre de priorité.
• Pour supprimer une règle CSS, passez la souris sur la règle et cliquez sur deletel'icône supprimer. 

• Pour appliquer au CTA les mêmes HTML et classes qu'aux anciens CTA, sélectionnez la case à cocher Utiliser le balisage hérité. Si des feuilles de style CSS sont présentes sur les pages pour styliser les CTA hérités, le fait de sélectionner cette case permettra au CTA HTML d'adopter les mêmes styles. 

• Pour terminer la configuration de la conception de votre CTA, cliquez sur Enregistrer et appliquer.
   

Personnalisez l'emplacement et le moment d'affichage de votre bannière autocollante, de votre fenêtre contextuelle ou de votre CTA coulissant

Si vous avez configuré une bannière autocollante, une fenêtre contextuelle ou un CTA coulissant, ciblez les visiteurs en choisissant le moment où vous souhaitez que ce CTA apparaisse sur votre site. En savoir plus sur l'ajout de CTA à vos pages. 

Vous pouvez utiliser des filtres pour combiner plusieurs ensembles de règles selon lesquels les visiteurs voient votre CTA. En savoir plus sur la configuration des règles de ciblage.

Déclencheurs d'activation 

Sélectionnez un déclencheur d'activation pour déterminer quand le CTA s'affichera sur votre page. Le CTA apparaîtra une fois que le premier déclencheur sélectionné sera atteint. 

• En haut, cliquez sur l'onglet Ciblage.
•  Dans la section Quand faut-il l'afficher, cliquez pour basculer entre les différentes options à côté des déclencheurs d'activation que vous souhaitez utiliser :
  • Déclenchement au clic sur le bouton : le CTA apparaît lorsqu'un visiteur clique sur un bouton. Apprenez comment Configurer des CTA de fenêtre contextuelle pour déclencher un clic sur le bouton. Par défaut, cette option est toujours activée. 
    • Configurez ceci dans vos pages HubSpot avec un module bouton par défaut ou sur vos pages externes en personnalisant la classe d'un bouton.
    • Pour activer ce déclencheur sur une page externe, le code de suivi HubSpot doit être installé. 
  • Déclencher sur le défilement de la page : le CTA apparaîtra lorsque le visiteur aura défilé au-delà d'un pourcentage spécifié de la page.
  • Déclencher sur l'intention de sortie : le CTA apparaîtra lorsque le visiteur dirigera le curseur de la souris vers la barre supérieure de la fenêtre du navigateur.
  • Déclencher après le temps écoulé : le CTA apparaîtra après le nombre de secondes spécifié.
  • Déclencher après inactivité : le CTA apparaîtra après que le visiteur a été inactif pendant un nombre de secondes spécifié.

URL du site web

Ajoutez une logique conditionnelle pour des URL de pages web spécifiques ou des valeurs de paramètres de requête dans le même onglet Ciblage. Par défaut, le CTA apparaîtra sur toutes les pages.

• Pour afficher le CTA lorsqu'un visiteur se trouve sur une URL de site web spécifique, dans la section URL du site web
  • Cliquez sur le premier menu déroulant et sélectionnez URL du site web.
  • Cliquez sur le deuxième menu déroulant et sélectionnez une règle de ciblage.
  • Saisissez les critères de votre règle dans le champ de texte.

• Pour afficher le CTA lorsqu'un visiteur se trouve sur une page web dont l'URL contient des paramètres de requête spécifiques :
  • Cliquez sur le premier menu déroulant et sélectionnez Paramètre de requête.
  • Dans le premier champ de texte, saisissez le nom du paramètre de requête.
  • Cliquez sur le deuxième menu déroulant et sélectionnez une règle de ciblage.
  • Dans le deuxième champ de texte, saisissez la valeur du paramètre de requête.

• Pour ajouter une autre règle, cliquez sur Ajouter une règle.
• Pour exclure les calls-to-action de certaines pages, cliquez sur Ajouter une règle d'exclusion. Par exemple, vous pourriez vouloir ajouter une exclusion pour une page portant sur la politique de confidentialité.
  
  
  

Informations et comportement du visiteur

Vous pouvez également cibler des contacts spécifiques en fonction des informations et du comportement des visiteurs connus dans l'onglet Ciblage. Le type de règles de filtrage que vous pouvez ajouter dépend des abonnements de votre compte. 

• Pour afficher le CTA à tous les visiteurs des sites web spécifiés, sélectionnez Tous les visiteurs. Cette option est sélectionnée par défaut. 
• Pour afficher vos CTA avec des visiteurs spécifiques, cliquez sur l'option Visiteurs filtrés. Ensuite, configurez vos filtres : 
  • Cliquez sur le premier menu déroulant pour choisir comment filtrer vos visiteurs.

• • Cliquez sur le menu déroulant suivant pour sélectionner vos règles de filtrage.
  • Pour ajouter plus de règles concernant le moment où le CTA doit s'afficher, cliquez sur Ajouter une règle et sélectionnez vos filtres.

• • Sélectionnez le moment auquel masquer le CTA :
    
    • Cliquez sur Ajouter une règle d'exclusion.
    • Cliquez sur le premier menu déroulant pour choisir quand le CTA doit être caché. 
    • Cliquez sur le menu déroulant suivant pour sélectionner vos règles de filtrage.
    • Pour ajouter plus de règles concernant l'instant où le CTA doit être masqué, cliquez sur Ajouter une règle d'exclusion et sélectionnez vos filtres.

• • Pour créer un autre ensemble de règles de filtrage, cliquez sur Ajouter un groupe de filtres et sélectionnez vos règles de filtrage.

Fréquence d'affichage 

Après qu'un visiteur a ignoré pour la première fois votre bannière autocollante, votre fenêtre contextuelle ou votre CTA coulissant, choisissez si le CTA doit être réaffiché et à quelle fréquence. Dans l'onglet Ciblage, configurez la fréquence d'affichage de votre CTA : 

•  Dans la section À quelle fréquence sera-t-il affiché, cliquez sur le menu déroulant Montrer à nouveau et sélectionnez une fréquence : 
  • Après une période déterminée : définit la période qui doit s'écouler après qu'un visiteur a rejeté le CTA, avant qu'il ne s'affiche à nouveau.
  • Répéter : afficher le CTA chaque fois que les internautes visitent les pages web sélectionnées et effectuent l'action déclenchante, même s'ils ont déjà interagi avec elle.
  • Ne pas afficher à nouveau : n'affiche qu'une seule fois le CTA aux visiteurs. Après l'affichage initial, n'affiche plus jamais le CTA. 

Remarque : ceci ne s'applique pas aux CTA lorsque Déclencher sur le clic du bouton est utilisé comme déclencheur d'activation.

 

Personnaliser vos options CTA

Dans les onglets Options, personnalisez différentes options du CTA, telles que l'affichage ou non du CTA sur les petits formats, les éventuelles campagnes associées et la programmation du CTA. 

• Accédez à l'onglet Options en haut de la page.
• Pour les bannières autocollantes, les fenêtres contextuelles ou les CTA coulissants, vous pouvez masquer le CTA sur les écrans de petite taille. Dans la section Écrans de petite taille, cochez la case Désactiver sur les petits écrans.

• Si vous disposez d'un abonnement Marketing Hub Pro ou Entreprise, vous pouvez associer le CTA à une campagne :
  • Pour associer votre CTA à une campagne existante, cliquez sur le menu déroulant Campagne et sélectionnez une campagne.
  • Pour associer votre CTA à une nouvelle campagne, cliquez sur le menu déroulant Campagne et cliquez sur Créer une campagne. Puis, continuez à configurer votre campagne. 

• • Si vous n'avez jamais créé de campagne auparavant, cliquez sur Créer une campagne. Puis, continuez à configurer votre campagne. 
• Configurez la façon dont vous souhaitez suivre les clics avec votre CTA. Choisissez parmi les options suivantes : 
  • Suivre les clics par le biais d'une redirection : suit les clics de votre CTA en redirigeant les visiteurs vers une URL initiale qui associe le clic au CTA, avant de les rediriger vers la dernière page. Cette option est sélectionnée par défaut.
  • Suivi des clics via le navigateur : suit les clics de manière asynchrone via le navigateur du visiteur. Cette option vous permet d'utiliser des balises d'ancrage, car il n'y a pas de redirections, le CTA dirigera les visiteurs vers l'URL définie. 

• Pour les bannières autocollantes, les fenêtres contextuelles ou les CTA coulissants, vous pouvez programmer l'affichage d'un CTA :
  
  • Pour programmer le début de l'affichage du CTA, activez l'option Programmer pour plus tard. Puis, sélectionnez une Date de début et une Heure. 
  • Pour programmer l'arrêt de l'affichage du CTA, activez l'option Définir la date et l'heure de l'annulation de la publication. Ensuite, sélectionnez une Date de fin et Heure. 
     

Publier votre CTA 

Une fois que vous avez fini de configurer votre CTA, publiez-le pour le mettre en ligne. 

• En haut à droite, cliquez sur Vérifier et publier.
• Dans le panneau de droite, vérifiez votre CTA, puis cliquez sur Publier maintenant. Le CTA sera automatiquement publié sur les pages ciblées.