Comment insérer une vidéo dynamique contenant un formulaire ?

Avec Webmecanik Automation, vous pouvez intégrer des vidéos dans vos landing pages. Ces vidéos peuvent être génératrice de leads car vous pouvez ajouter un formulaire à la vidéo pour la visualiser. C'est ce que l'on appelle les vidéos dynamiques ou "gated video".

Ces vidéos peuvent être intégrées sur votre site internet si le script de tracking est installé ou directement dans vos landing pages Webmecanik Automation.

Les libraries jQuery et Vimeo's Froogaloop sont nécessaires pour cette fonctionnalité. Elles seront automatiquement insérées dans vos pages d'atterrissage si une vidéo est détectée.

Dans cet article, nous allons voir comment ajouter une vidéo avec un formulaire dans une landing page Automation via un thème ou le code mode.

• Pour commencer, connectez-vous à votre instance Webmecanik Automation, allez dans la section "Composants" et cliquez sur "Landing pages".
• Créez ou éditez une landing page puis choisissez un thème ou le code mode.

Via un theme

• Allez dans le générateur.
• Il y a 2 manières différentes d'insérer une gated video.
• La première : via le bloc video.
• Glissez déposez le bloc video.

• Une fois le bloc ajouté, cliquez dessus pour que la fenêtre de configuration s'affiche dans la partie droite.

• Insérez l'URL de votre vidéo.
• Le champ "Gate time" correspond au nombre de secondes avant que le formulaire ne s'affiche.
• Ensuite, sélectionnez le formulaire souhaité.
• Ajoutez une largeur et une hauteur dans les champs "Width" et "Height".

• Enregistrez et fermer puis affichez la page.

La seconde manière pour ajouter une gated vidéo est d'insérer un bloc texte. Dans ce bloc texte, cliquez sur logo "Vidéo" et ajoutez les informations concernant l'URL, le nombre de secondes avant l'affichage du formulaire et le formulaire à afficher.

En code mode

• Allez dans le générateur et copiez ce code :

<video width="640" height="360" data-form-id="1" data-gate-time="15">
    <source type="video/youtube" src="https://www.youtube.com/example" />
</video>

A quoi correspondent les balises ?

data-form-id="X" correspond au formulaire Automation qui va s'afficher. Vous devez donc renseigner l'ID du formulaire.

data-gate-time="X" correspond au temps (en secondes) avant que la vidéo ne se mette en pause pour afficher le formulaire.

L'attribut type dans la source peut contenir les valeurs suivantes : video/youtube, video/vimeo ou video/mp4.

Si vous utilisez le type video/youtube ou video/vimeo, vous devez modifier l'attribut src par l'URL de la vidéo.

Si vous utilisez le type video/mp4, vous devez insérer l'URL complète du fichier du mp4.

• Une fois le code déposé dans votre landing page,

• Fermez le builder, enregistrez et fermez puis affichez la page. 

Remarque : Il est possible d’intégrer directement cette vidéo dynamique dans votre site internet en utilisant ce code comme dans la page d'atterrissage. 

Résultat 

Une fois le nombre de secondes passées, la vidéo s'arrête pour afficher le formulaire.

Dès que le contact a rempli le formulaire, la vidéo reprend où elle s'est arrêtée.

Il est possible de double cliquer sur la vidéo pour la mettre en plein écran mais également de cliquer sur le titre pour être redirigé vers la source de la vidéo (ici Youtube dans notre exemple).