How to set a gated video with a form ?

With Webmecanik Automation, you can integrate gated video. A gated video is one that plays for a set amount of time then pauses the video in order to show a form that, when submitted, will capture the lead information then continue to play the video from where it was paused. It can be added on your website or landing pages.

Gated videos can be embedded in your landing page content or in your website that has the Mautic tracking javascript installed.

jQuery and Vimeo's Froogaloop javascript libraries are required for this feature to function. They will be automatically inserted into your landing page if videos are detected.

In this article, we will see how to add a gated video into an Automation landing page via a theme or the code mode. 

• Start by connecting on your Webmecanik Automation, then go on the "Components" section and click on "Landing pages".
• Create or edit a landing page and choose a theme or the code mode.

Via a theme

• Go on the builder.
• There are two different ways to insert a gated video.
• First one is with the video bloc.
• Just drag and drop the video bloc.

• Once the bloc added, click on it to display the settings on the right part.

• Insert the URL of the video.
• Gate time is the number of seconds before the video stops and the form displays.
• Select the form you want to display.
• Add a width and heights.

• Save and close and display the page.

The second way to add a gated video is to insert a text bloc. In this bloc, click on the video logo and add the required informations such as URL of the video, gate time and the form.

In code mode

• Go on the builder and paste this 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>

What are the tags?

data-form-id="X" corresponds to your Automation form. You need to add the ID of the form desired.

data-gate-time="X" correspond to the time before the video stops to display the form. The time is in seconds.

The type attribute on the source tag can be on of : video/youtube, video/vimeo or video/mp4.

When using video/youtube or video/vimeo, you can use the URL found in your browser address bar as the URL to place in the src attribute. When using video/mp4, you must use the full URL to the actual mp4 file location in order to use the gated video feature.

• Once you have placed the code,

• Close the builder, save and close and display the page.

Note : It is possible to directly embed this dynamic video in your website using this code as in the landing page.

Results

When contacts land on the page and start watching the video, it will stop after a certain amount of time (depends on what you set before)to display the form.

After filling the form, contact will be able to watch the video again from where it stopped.

You can double clic on the video to make it full screen and also clic on the title to land on the source (in our example, we'll land on the video in Youtube).

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