How to add a Custom HTML element when using landing page builders

With our Custom HTML feature, you can hide specific content below your video and reveal it only after viewers reach a certain point in the playback. This is particularly useful for displaying important information—such as order forms or call-to-action buttons—at the right moment, ensuring your audience remains focused on your message until they are ready to take action.

How It Works

Custom HTML for CTA visibility will vary depending on the site editor being used. However, the overall process remains quite similar across platforms. As an example, we’ll walk you through the step-by-step process using ClickFunnels.

Setting Up Custom HTML in ClickFunnels

Step 1: Get the ID or Class of Your Element

To identify the element you want to reveal:

Select the section, row or element in ClickFunnels.
Navigate to Settings > Get CSS Info.
Copy the ID or Class of the element.

Step 2: Hide the Element Initially

By default, the element should be hidden when the page loads. To do this:

Go to Settings > Custom CSS.
Add the following CSS code, replacing #id-6Z-k8EXm-199 with your element’s actual ID:
```
#id-6Z-k8EXm-199 {display: none;}
```

Step 3: Configure Your Vidalytics Settings

Open your Vidalytics Dashboard.
Navigate to Vid Settings > Marketing > Call To Actions.
Create a New CTA if needed.
Select the Custom HTML placement option.
Paste the ID or Class of the element you want to reveal.

Step 4: Republish Your Video

Once you've completed the setup, be sure to republish your video to apply the changes.

Need Help?

For additional questions, feedback, or assistance, please feel free to reach out to our support team at [email protected]. 😊