Créer des CTA (appels à l'action)

Utilisez l'outil d'appels à l'action (CTA) pour créer des boutons CTA, des bannières ou des pop-ups à 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 dirigeant les visiteurs vers des pages spécifiques, des liens de réunion 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 le design de votre CTA pour attirer les visiteurs. 

• Dans votre compte HubSpot, accédez à Marketing > Capture de lead > CTA.
• En haut à gauche, cliquez sur le menu déroulant et sélectionnez CTAs.
• Dans le coin supérieur droit, cliquez sur Créer.
• Vous pouvez créer un nouveau workflow à partir de zéro ou d'un modèle :
  • Pour créer un nouvel ACC à 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 nouvel ACC à 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 adhésive : 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. 
    • Boîte contextuelle : une boîte contextuelle qui apparaît selon un calendrier défini. 
    • Slide-In : 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. 
    • Embedded : une bannière, un CTA 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.
    • Embedded : un bouton que vous pouvez utiliser sur vos pages HubSpot ou dans vos e-mails.
• Dans le panneau de gauche, sous l'onglet Ajouter , ajoutez des éléments et modifiez la mise en page de votre CTA : 

• • Pour ajouter du contenu à votre CTA, cliquez sur un nouvel élément et faites-le glisser directement dans le panneau droit de l'éditeur. Vous pouvez également ajouter des éléments vidéo à votre CTA, pour en savoir plus sur l'ajout de vidéos à vos CTA. 
  • Pour modifier la disposition de votre CTA, survolez un élément , puis cliquez et faites-le glisser vers une nouvelle position.
  • Pour dupliquer l'élément, survolez l'élément et cliquez sur l'icône duplicateicône de clonage.
  • Pour supprimer l'élément, survolez-le et cliquez sur l'icône de la deleteet cliquez sur l'icône dela corbeille. 
  • Pour modifier un élément, cliquez dessus. 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 son nom . 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 l'assistant de contenu pour créer ou affiner le contenu de votre CTA. 
  • Pour supprimer un élément, survolez-le et cliquez sur l'icône de suppression delete . 
• 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 sur Aperçuen haut à droite. 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. Ensuite, configurez vos modifications dans le panneau de gauche. 
    • Position : pour les CTA de type "sticky banner", vous pouvez sélectionner une position en haut ou en bas. Pour les CTA de type "slide-in", vous pouvez choisir de 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 permettant de 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 un remplissage au contenu de votre CTA. Vous pouvez également activer l'option de mise en page réactive. Avec une mise en page réactive, les colonnes de votre CTA s'empileront verticalement sur les petits écrans.
    • Styles : définit les styles de votre CTA, tels que la police primaire, 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.

Concevoir un CTA en HTML

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

• Dans le panneau de gauche, cliquez sur Start from scratch. 
• Ensuite, cliquez pour développer Advanced options et sélectionnez Embedded HTML.
• Cliquez sur le menu déroulant Link to et sélectionnez une option vers laquelle rediriger votre CTA :
  • Adresse e-mail : créez un lien mailto.
  • Téléchargement de fichier : lier votre CTA à un fichier dans votre gestionnaire de fichiers. Sélectionnez un fichier existant ou téléchargez un nouveau fichier, puis cochez la case Ouvrir la page dans un nouvel onglet si vous souhaitez que les visiteurs qui cliquent sur le bouton CTA visualisent l'image dans une nouvelle fenêtre du navigateur. 
  • Lien de réunion : lier votre CTA à un lien de réunion HubSpot. Cliquez sur le menu déroulant Choose a meeting link, puis sélectionnez un lien meeting link. 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 HubSpot ou à l'un de vos articles de blog. Cliquez sur le menu déroulant Page puis sélectionnez une page ou un message . Le lien du bouton CTA sera lié à l'ID de la page et toute modification de l'URL de la page mettra automatiquement à jour le lien du bouton CTA.
  • URL : lier votre CTA à une page externe à HubSpot. Dans le champ Link URL, entrez l'URL du site vers lequel vous souhaitez diriger les visiteurs.
  • CTA : utilisez le CTA personnalisé pour déclencher une bannière adhésive, une fenêtre contextuelle ou un CTA intégré.
• Dans le champ Button content, entrez votre texte CTA. 
• Pour personnaliser davantage le design de votre CTA, cliquez sur Advanced.
   

• Sur la page Advanced , 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 Add one ou + Add et pour configurer 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, survolez la règle et cliquez sur l'icône edit . 
• Pour cloner une règle CSS, survolez la règle et cliquez sur l'icône duplicate clone. 

• 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, survolez-la et cliquez sur l'icône de suppression delete . 

• Pour appliquer les mêmes HTML et classes aux CTA que les anciens CTA, cochez la case Use Legacy Markup. Si des feuilles de style CSS sont présentes sur les pages pour styliser les anciens CTA, cette case à cocher permettra au CTA HTML d'adopter les mêmes styles. 

• Pour terminer la configuration de votre CTA, cliquez sur Save & Apply.
   

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

Si vous avez mis en place une bannière adhésive, une fenêtre contextuelle ou un CTA à insérer, ciblez les visiteurs en choisissant le moment où vous souhaitez que ce CTA apparaisse sur votre site. Pour en savoir plus sur , ajoutez des CTA à vos pages. 

Vous pouvez utiliser des filtres pour combiner plusieurs ensembles de règles concernant les visiteurs qui voient votre CTA. Pour en savoir plus sur la configuration de vos 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 lorsque le premier déclencheur sélectionné sera atteint. 

• En haut, cliquez sur l'onglet Ciblage.
•  Dans la section Quand doit-elle être affichée, cliquez pour faire basculer le commutateur situé à 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 de 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éclenchement sur le défilement de la page : le CTA apparaît lorsque le visiteur a fait défiler un pourcentage spécifié de la page.
  • Déclenchement sur l'intention de sortie : le CTA apparaîtra lorsque le visiteur déplacera son curseur vers la barre supérieure de la fenêtre du navigateur.
  • Déclencher après le temps écoulé : l'annonce apparaît après le nombre de secondes spécifié.
  • Déclencher après l'inactivité : le CTA apparaîtra après que le visiteur ait été inactif pendant un certain nombre de secondes.

URL du site web

Vous pouvez ajouter une logique conditionnelle pour des URL de pages web spécifiques et/ou des valeurs de paramètres de requête dans le même onglet Targeting . Par défaut, le CTA apparaît sur toutes les pages.

• Pour afficher le CTA lorsqu'un visiteur se trouve sur l'URL d'un site web spécifique, dans la section URL du site web
  • Cliquez sur le premier menu déroulant et sélectionnez Website URL.
  • 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 de site web dont l'URL comprend des paramètres de requête spécifiques :
  • Cliquez sur le premier menu déroulant et sélectionnez Query parameter.
  • Dans le premier champ de texte, saisissez le nom du paramètre de requête.
  • Cliquez sur la liste déroulante 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 CTA de certaines pages (par exemple, une page de politique de confidentialité), cliquez sur Ajouter une règle d'exclusion.
  
  
  

Informations et comportement du visiteur (facultatif)

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

• Dans la section Informations et comportement des visiteurs (facultatif), cliquez sur le premier menu déroulant pour choisir la manière dont vous souhaitez filtrer vos visiteurs.

• Cliquez sur le menu déroulant suivant pour sélectionner vos règles de filtrage.
• Pour ajouter d'autres règles concernant l'affichage de votre CTA, cliquez sur Ajouter une règle et sélectionnez vos filtres.

• Sélectionnez le moment où vous souhaitez masquer le CTA :
  
  • Cliquez sur Ajouter une règle d'exclusion.
  • 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 d'autres règles afin de déterminer quand masquer votre CTA, 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 des règles de filtrage.

Fréquence d'affichage

Après qu'un visiteur a ignoré pour la première fois votre bannière collante, votre boîte pop-up ou votre CTA glissant, choisissez si le CTA doit s'afficher à nouveau, et à quelle fréquence il doit s'afficher. Dans l'onglet Targeting définissez la fréquence d'affichage de votre CTA : 

•  Dans la section Combien de fois sera-t-il montré, cliquez sur le menu déroulantMontrer à nouveau et sélectionnez une fréquence : 
  • Après une période donnée : configurez le temps qui doit s'écouler après qu'un visiteur a ignoré l'appel à témoins 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 le CTA qu'une seule fois aux visiteurs. Après l'affichage initial, n'affichez plus jamais le CTA.
     

Personnalisez vos options CTA

Dans les ongletsOptions , personnalisez les différentes options du CTA, telles que l'affichage ou non du CTA sur les petites tailles, les campagnes associées et la programmation du CTA. 

• Accédez à l'onglet Options en haut de la page.
• Pour associer le CTA à une campagne, cliquez sur le menu déroulant Campagne et sélectionnez une campagne à laquelle associer le CTA contextuel. 
• Configurez les options suivantes lors de l'utilisation de bannières autocollantes, de fenêtres contextuelles ou d'annonces temporaires coulissantes :
  • Pour masquer le CTA sur les écrans de petite taille, dans la section Small screen sizes, cochez la case Turn off on small screen sizes.
  • Pour programmer le moment où le CTA commence à s'afficher, activez l'option Programmer pour plus tard. Sélectionnez ensuite une date et une heure dedébut. 
  • Pour programmer l'arrêt de l'affichage du CTA, activez l'option Définir la date et l'heure de la dépublication . Sélectionnez ensuite une date et une heure de fin .
    
    
    

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 Réviser et publier.
• Dans le panneau de droite, révisez votre CTA, puis cliquez sur Publier maintenant. Le CTA sera automatiquement publié sur les pages ciblées.