Création de formulaires de prospect personnalisés pour HubSpot

Le module Audience permet de créer des formulaires de prospect personnalisés qui vous permettent de capturer des informations sur les spectateurs lorsque les vidéos sont jouées à l'intérieur des lecteurs Brightcove. Les données de prospect sont envoyées à HubSpot et traitées par lui.

La création d'un formulaire de clients potentiels passe par les étapes suivantes :

1. Créer un formulaire dans HubSpot
2. Copier et modifier le code d'intégration du formulaire
3. Créer un formulaire de prospecte personnalisé dans le module Audience
4. Attribuer le formulaire de prospection à un joueur
5. Valider les données du formulaire dans HubSpot

Création d'un formulaire dans HubSpot

Les formulaires HubSpot peuvent être utilisés pour générer des informations de prospect auprès des visiteurs du site Web. Ces formulaires peuvent également être affichés à l'intérieur des joueurs de Brightcove. Les étapes ci-dessous créeront un formulaire simple pour capturer les informations de l'utilisateur. Pour plus de détails sur les formulaires HubSpot, consultez la documentation HubSpot.

1. Connectez-vous à votre compte HubSpot.
2. Cliquez sur > Formulaires marketing. Si vous utilisez le menu Classique, cliquez sur > Formulaires Contacts.
3. Cliquez sur Créer un formulaire. Par défaut, le formulaire contiendra un champ E-mail et un bouton Envoyer .
4. Assurez-vous que le type de formulaire standard est sélectionné. Cliquez sur Next (Suivant).
5. Assurez-vous que le modèle vide est sélectionné. Cliquez sur Démarrer.
6. Cliquez sur le nom par défaut dans l'en-tête et nommez le formulaire. Appuyez sur Entrée pour enregistrer les modifications.
7. Cliquez sur le nom par défaut dans l'en-tête et nommez le formulaire. Appuyez sur Entrée pour enregistrer les modifications.

   

8. Le côté gauche de la page contient une liste de champs qui peuvent être ajoutés au formulaire. Faites glisser et déposez le Prénom et Nom de famille champs que vous voulez sur le formulaire sur le côté droit de la page.

   

9. Pour rendre un champ obligatoire, passez la souris dessus et cliquez sur Plus > Rendre obligatoire. Les champs obligatoires affichent un * en regard de l'étiquette du champ.

   

10. Cliquez sur le lien Options en haut de la page.
11. Pour ce qui se passe après l'envoi de ce formulaire par un visiteur, cliquez sur Afficher un message de remerciement. Conservez le message par défaut car il ne sera jamais affiché.

    

12. Cliquez sur le lien Style et aperçu en haut de la page. Par défaut, un aperçu du Bureau s'affiche.
13. Cliquez sur Publier en haut de la page pour publier les modifications apportées au formulaire.

Copie et modification du code d'intégration du formulaire

Pour utiliser le formulaire à l'intérieur du module Audience, vous devrez copier et modifier le code d'intégration du formulaire. En outre, vous voudrez peut-être faire un style de base au formulaire. Dans les étapes ci-dessous, nous allons copier le code d'intégration du formulaire dans un éditeur HTML, puis apporter quelques modifications de style au formulaire.

1. Cliquez sur Partager en haut à droite de la page et copiez le code d'intégration dans le Presse-papiers.

   

2. Collez le code d'intégration dans l'éditeur HTML de votre choix.
3. Le code d'intégration a besoin d'un petit changement afin que le public sache fermer le formulaire lorsqu'il est soumis. Localisez la ligne qui a formId: Ajouter une virgule à la fin de la ligne.
4. Ajoutez cette ligne sous la formId: ligne.

   onFormSubmit: bcLeadForm.submit

5. Par défaut, lorsque le formulaire est affiché à l'intérieur d'un lecteur Brightcove, le formulaire s'affiche sur un fond transparent au-dessus du lecteur. Ajoutez le CSS suivant au code d'intégration pour changer la couleur d'arrière-plan en gris.
   <style>
body {
background-color: rgba(204,204,204,0.9);
margin: 0;
padding: 20px;
height: 100%;
}
</style>

Création d'un formulaire personnalisé de clients potentiels dans le module Audience

Une fois que le code d'intégration du formulaire a été modifié, créez un formulaire de prospect personnalisé dans le module Audience et associez le formulaire prospect à un lecteur compatible Audience.

1. Ouvrez le module Audience.
2. Cliquez sur Formulaires de prospect dans la navigation de gauche. Si des formulaires de clients potentiels ont déjà été créés, ils s'afficheront ici.
3. Cliquez sur Create Lead Form.
4. Donnez au formulaire un nom descriptif.
5. Choisissez la langue dans Form Language.
6. Sélectionnez le moment d'affichage dans Form Timing. Cela permet de déterminer quand s'affichera le formulaire de clients potentiels.

   

7. Définissez le type de formulaire sur Custom Lead Form.
8. Coller dans le code d'intégration du formulaire.
9. ( Facultatif) Coller dans le code HTML de confirmation. La confirmation s'affichera pendant cinq secondes puis la lecture de la vidéo reprendra. Si la confirmation HTML n'est pas incluse, la lecture de la vidéo reprendra après l'envoi du formulaire.

   

10. (Facultatif) Cliquez sur Preview Form pour afficher un aperçu du formulaire.
11. Cliquez sur Save pour enregistrer le formulaire.

Affectation d'un formulaire de clients potentiels à un lecteur

Une fois le formulaire de client potentiel créé, vous devez l'affecter à un lecteur. Pour ce faire, procédez comme suit :

1. Cliquez sur Audience Lecteurs dans la navigation de gauche.
2. Localisez votre joueur et utilisez la liste déroulante Formulaire de prospect pour sélectionner le formulaire de prospect.

La configuration est désormais terminée ; vous êtes prêt à capturer les informations sur les clients potentiels. Lorsqu'une vidéo est publiée sur un lecteur Audience, le formulaire de clients potentiels s'affichera selon les paramètres de moment d'affichage.

Validation des données du formulaire dans HubSpot

Les prospects capturés à l'aide du formulaire de prospect personnalisé seront ajoutés en tant que contacts dans votre compte HubSpot. Un moyen facile de visualiser les données capturées par le formulaire de prospect consiste à créer une Smart List dans HubSpot.

1. Connectez-vous à votre compte HubSpot.
2. Cliquez sur > Formulaires de capture de > prospect marketing.
3. Lorsque vous survolez un formulaire, un menu Actions apparaît. Cliquez sur Actions > Afficher les soumissions. Une liste des soumissions de formulaires apparaîtra.

   

4. Lorsque vous survolez une ligne, cliquez sur Afficher la soumission pour afficher les données du formulaire.