The Display Component feature allows you to display a specific page element at the desired moment in the video, providing greater interactivity and integration between the player and the page content.

Starting editing

• To start editing your VSL controls, simply select the VSL you want and click on the "Edit VSL" option.

• Then click on Display Component to start editing.

---

How the Display Component feature works

The Display Component feature allows a page element to be displayed automatically when the video reaches a certain time or event. In this way, you can synchronize buttons, forms or any other relevant content with the video playback, creating a more efficient flow for user conversion.

Available Settings

Display Page Component?

Enables or disables the display of the defined component.

Component identifier

This field defines which element of the page will be displayed.

The component identifier must be the ID of the element in the HTML code of the page. The format uses the # symbol before the ID name, as in the example #my-component. This ID must correspond exactly to the name of the element in the HTML so that the system can find it and display it at the correct time.

Example of use in HTML:

<div id="my-component" style="display: none;">

<h2>Sign up here</h2>

</div>

➡ The style="display: none;" ensures that the video is hidden until the VSL displays it at the right time.

Video Time (seconds)

Defines the exact moment when the component will be displayed, measured in seconds.

If set to 5, this means that the component will appear automatically when the video reaches 5 seconds of playback. This time can be adjusted as necessary to synchronize the display with the video content.

Enable Automatic Scrolling

When enabled, the page will automatically scroll to the position of the displayed component.

This ensures that the user sees the component as soon as it is shown, without having to scroll manually.

Scrolling behavior

Defines how automatic scrolling will be performed when the functionality is activated. There are two options:

• Instant

The page scrolls immediately to the position of the component without a smooth transition.

The user sees the position change abruptly.

• Smooth

The page scrolls gradually to the component, creating a more natural effect.

This option improves the user experience by avoiding abrupt changes.

Still have questions?

We're happy to help! Contact us and we'll be happy to answer your questions. 😊

**

Updated on: 05/12/2025