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 feature is only available on Advanced Plans. Click here to get more information about our plans.

Jump directly to:

How can I add custom HTML code?
Using placeholders and custom variables
Page navigation
HTML Use Cases: What can I embed with HTML code?

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. Select a Layout in your funnel
2. Click on the small blue "+" to add a new block

3. Select the HTML block to add it to your layout

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

5. Add your embed code here

6. You made it! Once you’ve added in your HTML code you will see a live preview in the editor

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

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

{{email}} : E-Mail from form
{{name}} : First and last name from form
{{firstName}} : First name from form
{{lastName}} : Last name from form
{{phone}} : Phone number from form
{{birthday}} : Birthday from form
{{datePicker}} : Picked date from form
{{dropdown}} : Picked time slot from form
{{website}} : Website URL from form
{{message}} : Message from form
{{file}} : ???
{{city}} : City from form
{{zip}} : ZIP code from form
{{country}} : 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: {{custom_field}}.

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 {{categor}} in your HTML code.

UTMs

UTM parameters can also be used as variables.

The following UTM parameters are supported

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

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

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. Like so:

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

Find additional information on the following topics in our Help Center: