How can I add custom HTML to my funnel?

The HTML Block allows you to insert custom elements in your Funnels with HTML, beyond our native blocks.

If you’d like to add a Google Sheet, or display a PDF, or embed any third party application; the HTML block lets you do it. The possibilities are endless.

ℹ️ This custom HTML feature is available from the Business Plan (Legacy) / Grow Plan (New) onwards. It can also be added via the Premium Block Suite.

How can I add the HTML Code?

To add HTML code to your funnel, you first need to add the HTML block into your funnel:

1. Click on the the "+" icon to add a new block to your funnel page and select the HTML block.

2. Click on the HTML icon to edit the embed code.

3. Add your embed code in the pop-up and click Save.

4. Once you’ve added in your HTML code, you will see a live preview in the editor.

5. Publish your changes, and you’ll have great new interactive content on your Funnel.

Why is a cookie banner shown on my HTML block?

Since the HTML Block contains external content, your funnel visitors need to accept cookies, to see it. The content will stay hidden behind an overlay until your funnel visitor accepts cookies.

You can disable a cookie banner for an HTML block in the settings of the block by toggling the GDPR sensitive setting off.

Use placeholders and custom variables

You can also use visitor data/inputs from e.g. forms in your HTML code.

Therefore, you can add variables to your code. All variables start and end with two curly braces, like so: {{variable}}

Standard variables

You can use the following standard form inputs/variables

: E-Mail from form
: First and last name from form
: First name from form
: Last name from form
: Phone number from form
: Birthday from form
: Picked date from form
: Picked time slot from form
: Website URL from form
: Message from form
: Link to uploaded file
: City from form
: ZIP code from form
: Country from form

Custom variables

You can also use custom inputs. Therefore

add a custom input to your form,
tweak to match your requirements
and – very important – assign a Tracking ID

Now you can use it in your HTML code by using the Tracking ID as the variable name: .

URL-Variables

In case you have created URL variables that start with ps_, you can use these as well.

Let’s assume you have added the URL variable ps_category. Then you can use the variable in your HTML code.

UTMs

UTM parameters can also be used as variables.

The following UTM parameters are supported

→ Value of UTM parameter utm_campaign
→ Value of UTM parameter utm_content
→ Value of UTM parameter utm_medium
→ Value of UTM parameter utm_source
→ Value of UTM parameter utm_term

In case a funnel is opened without a certain UTM parameter, corresponding variables are replaced by empty text.

CSS

The HTML Block supports CSS — both via a <style> tag and as inline styles.

If your embed doesn't look right, try pasting the code into an AI Block and ask it to style the code for you.

Page Navigation

In the HTML code you can also initiate Funnel page navigation via special JavaScript functions.

Navigate to next page

For that, call the function window.perspective.navigateToNextPage(). Example:

<button id="navigate"> Navigieren </button> <script> document.getElementById('navigate').addEventListener('click', () => { window.perspective.navigateToNextPage(); }); </script>

Navigate to first result page

To navigate to the first result page, call window.perspective.navigateToResultPage(). Example:

<button id="navigate"> Navigieren </button> <script> document.getElementById('navigate').addEventListener('click', () => { window.perspective.navigateToResultPage(); }); </script>

Navigate to a specific page

For that you will need the slug of the specific page. To find the slug, go to the page and click the page option “Edit URL”:

Copy the value from there. Now, to navigate to a specific page, call window.perspective.navigateToPageBySlug(pageSlug) with the copied value.

<button id="navigate"> Navigieren </button> <script> document.getElementById('navigate').addEventListener('click', () => { window.perspective.navigateToPageBySlug('page_6htyyt'); }); </script>

What can I embed via HTML Code?

In theory the possibilities are endless, but here are some examples:

Note 💡

You can also use ChatGPT to generate a suitable HTML widget. Simply adapt this prompt for your project:

Write me HTML code without `html`, `head` or `body` tags.

The HTML code shall achieve the following:

- ...

Here you can add your specs, like for example:

Show a countdown until the 24th of December 2024.
Show the remaining days, hours, and seconds.
...