How to Set Up a Video Lead Gate
[Note: This feature is available on the Pro / Agency / Convert/ Scale and Maximize Plans. If you need this feature and you would like to upgrade to a different plan please contact us at support@convertri.com]
Video Tutorial:
Article:
A video lead gate is just a fancy name for when the page plays part of a video and asks you to submit information - like your email address or a payment - to continue watching it.
In this walkthrough, we’ll set up a simple video lead gate that pauses the video after a certain time, displays a pop-up opt-in form, and only resumes the video after the form has been submitted.
First, we’ll add a video element to our page.
- In the Page Builder, click Media in the elements tray, and click or drag a video element onto your page.
- Enter your video source URL in the Properties panel. Or, if you’re a Pro, Agency, Scale, or Maximise user, you can click to choose from videos you’ve uploaded to Convertri. You can upload them back in the Dashboard. Here, you can configure options such as autoplay, and tap to fullscreen on mobile.
- Come out of Video Properties, and click on General Properties. Give your video element a name.
Next, we’ll add the pop-up layer.
- Click Layers in the top toolbar, then click New Layer. Give your layer a name (e.g. “pop-up”) and click OK. Make sure it’s set to start Hidden, and click Select to edit this layer.
- Click or drag a panel element onto the canvas. Drag the handles to resize: it doesn’t matter if it covers the entire video, or just a portion. You also have the option to change its background colour or make it semi-transparent in the Properties panel.
- Add some text, a form input element, and a Submit button, making sure everything is contained within the panel. At this point, you also want to set up your form. You can add a third party autoresponder, or just set up email notifications. Click Thank You Page URL, and enter any URL you like - it’s necessary to set up the form, but the user won’t see this page on form submit because the video will resume instead.
Finally, it’s time to set things in motion with actions and events.
With your layer still active, click your Submit button on the pop-up form, and go to Properties Panel > Actions and Events. Click Add New Action, and configure the action as follows:
Event Type - Click (On Form Submit Click) Action - Hide Target - (pop-up layer)
Click Done. Then, click Add New Action, and configure the action as follows:
Event Type - Click (On Form Submit Click) Action - Video Player (Start Video) Target - (video element name)
Click Done. Then, click the three dot menu next to your layer name, click Add New Action, and configure the action as follows:
Event Type - Time, on Time Passed After Layer is Shown, 1 second (this creates a short buffer between the layer showing and the video pausing) Action - Video Player (Pause Video) Target - (video element name)
Click Done. Then, click to Unselect your layer and edit the main page. Click your video element, and go to Properties Panel > Actions and Events. Click Add New Action, and configure the action as follows:
Event Type - Video Time, Video Passes Time Marker (enter the number of hours, minutes and seconds you want the video to play before the popup is shown) Action - Show Target - (pop-up layer)
- Click Done, then Save and Preview your page.
Once the video passes the time you specify, the video should pause and your layer should fade in. Once you submit the form successfully, the pop-up should fade out, and your video will resume.