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 plugin 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 d'activer une mise en page responsive ou de masquer le CTA sur les petits écrans dans les options CTA. Après avoir publié votre CTA, apprenez à analyser les performances de votre CTA. 

Concevoir un CTA

Dans l'éditeur de CTA, personnalisez la conception de votre CTA pour attirer les visiteurs. Lorsque vous créez des CTA, vous pouvez également utiliser du contenu intelligent pour afficher différentes versions de votre CTA en fonction de la catégorie du visiteur. Découvrez-en davantage sur l'utilisation de contenu intelligent dans les CTA. 

• Dans votre compte HubSpot, accédez à Marketing > CTA.
• Dans l'angle supérieur droit, cliquez sur Créer.
• En haut, sélectionnez l'onglet Fenêtres contextuelles ou l'onglet Intégrations et boutons. 
  • Les CTA contextuels comprendront les types suivants : 
    
    • Bannière : 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. 
  • Les CTA sous forme d'intégrations et de boutons incluent les éléments suivants : 
    • CTA intégré : une bannière, un call-to-action ou un bouton que vous pouvez utiliser sur votre site web ou vos e-mails 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.
• Sélectionnez un modèle en fonction du type de CTA que vous souhaitez créer.
  • Chaque modèle de CTA comprendra des modules personnalisables tels que des images et des champs de texte.
  • Par exemple, vous pouvez sélectionner un modèle Cliquer pour chatter pour lancer un lien WhatsApp, un modèle Fenêtre contextuelle de réunion pour afficher une page de réservation de réunion ou un modèle Événement pour que les visiteurs s’inscrivent à votre conférence ou atelier,

• Dans le panneau de gauche, dans l’onglet Ajouter, ajoutez des modules et modifiez la structure de votre CTA : 

• • Pour ajouter davantage de contenu à votre CTA, cliquez sur un nouveau module et faites-le glisser directement dans le panneau de droite de l’éditeur.
    • Vous ne pouvez ajouter qu’un seul module de formulaire (nouvel éditeur) ou de réunion à un CTA. Un seul CTA ne peut pas contenir à la fois un formulaire et un module de réunion. 
    • Certains modules ne peuvent être ajoutés qu’une seule fois, comme le compte à rebours ou les modules vidéo.
    • Vous pouvez également ajouter des vidéos à votre CTA. En savoir plus sur les exigences relatives à l’ajout de vidéos à vos CTA. 
  • Pour modifier la mise en page de votre CTA, passez le curseur sur un module, cliquez dessus et faites-le glisser vers une nouvelle position.
  • Pour dupliquer le module, placez le curseur sur le module et cliquez sur l’icône Clonerduplicate.
  • Pour supprimer le module, passez le curseur de la souris sur le module et cliquez sur l’icône deleteSupprimer.
     

. 

• • Pour modifier un module, cliquez sur le module.
    • Dans le panneau de gauche, vous pouvez modifier le contenu et la conception du module.
    • Pour fermer un CTA contextuel après qu'un visiteur a soumis le formulaire, lors de la personnalisation de votre module de formulaire, vous pouvez activer le bouton Fermer après la soumission.
       

• Dans le panneau de gauche, cliquez sur l’onglet Contenu pour gérer vos modules. 
  • Pour modifier un module, cliquez sur son nom . Dans le panneau de gauche, vous pouvez modifier le contenu et la conception du module. Dans les modules de texte enrichi, vous pouvez utiliser des assistants IA pour créer ou affiner votre contenu CTA.  
  • Pour supprimer un module, passez le curseur de la souris sur le module et cliquez sur l’icône delete Supprimer. 
• 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. Vous pouvez utiliser des polices personnalisées avec votre CTA, découvrez-en davantage sur l’utilisation de polices personnalisées avec votre contenu HubSpot. 
    • 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. Pour ouvrir ce lien dans une nouvelle lien, cochez la case Ouvrir le lien dans un nouvel onglet. 
  • 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 le lien 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 lien, cochez la case Ouvrir le lien 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. Pour ouvrir ce lien dans une nouvelle lien, cochez la case Ouvrir le lien dans un nouvel onglet. 
  • 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. Pour ouvrir ce lien dans une nouvelle lien, cochez la case Ouvrir le lien dans un nouvel onglet. 
  • 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. Découvrez-en davantage 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. Découvrez-en davantage 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 vos pop-up CTA pour qu'ils se déclenchent au clic du 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.
    • La fréquence définie ne s'appliquera pas à tous les sous-domaines du site web, même si le suivi inter-domaine est activé.
    • Par exemple, si un visiteur déclenche et rejette un CTA contextuel sur blog.hubspot.com mais accède ensuite à knowledge.hubspot.com, le même CTA contextuel apparaîtra à nouveau, même si la fréquence définie n'est pas dépassée. Après avoir rejeté le CTA contextuel, il n'apparaîtra sur chaque sous-domaine correspondant qu'une fois la fréquence définie passée pour ce sous-domaine.

• • 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. 
    • Cela ne s'applique pas à tous les sous-domaines de site web, même si le suivi inter-domaine est activé.
    • Par exemple, si un visiteur déclenche et rejette un CTA contextuel sur blog.hubspot.com mais accède ensuite à une page sur knowledge.hubspot.com, le même CTA contextuel apparaîtra toujours pour ce sous-domaine et tout autre sous-domaine où il n'est pas apparu auparavant. 

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 une 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.