Embedding Third Party Embed Code

  • Updated on Nov 20, 2024
  • Published on Nov 20, 2024
  • 3 minute(s) read

ClickFunnels allows you to enhance your pages by embedding third-party content such as forms, calendars, custom icons, and widgets. This guide will show you how to use the HTML/JS Element, Header Code, and Footer Code editors to embed external code into your page.

Requirements

  1. An active ClickFunnels account

  2. A page created in your workspace

  3. External embed code

What Can You Embed?

Here are some examples of third-party content you can embed into your ClickFunnels pages:

  • Appointment Schedulers: Embed tools like Calendly, Acuity Scheduling, or 1on1 to allow users to book appointments directly on your page.

  • Custom Forms: Add forms using services like JotForm, Google Forms, or Typeform for data collection.

  • Media Players: Embed external video and audio players like SoundCloud or Spotify playlists to enhance your page with multimedia.

  • Interactive Features: Add widgets such as maps from Google Maps, calculators from Calconic, or live chat tools like Tidio or Intercom.

Note:

These are just a few examples of popular tools. You can embed any service that provides an embed code, allowing you to fully customize your page’s functionality.

Using the HTML/JS Element

The HTML/JS Element in the page editor is the simplest way to embed third-party content. Follow these steps:

  1. Add the HTML/JS Element:

    • Drag and drop the HTML/JS Element into your page.

    • Place it inside a section and row to organize the layout.

  2. Paste Your Embed Code:

    • Click on the Open Code Editor option in the element settings.

    • Paste the external code into the editor.

    • Click Save.

Tips: Adjust Space for Your Embed

Ensure that the section and row where you’ve added the element have sufficient space for the widget to render correctly. For example, when embedding a calendar widget, use a one-column row inside a section to provide enough room for display. To ensure the widget displays correctly, check the widget’s minimum dimensions and adjust the Row and Column Widths in your ClickFunnels layout.

Using Header and Footer Code Editors

ClickFunnels provides two additional areas for adding custom code: the Header Code and Footer Code editors. These options allow you to insert code directly into specific parts of your page’s HTML structure.

  • Header Code is used to add code between the <head> and </head> tags of the page. This is ideal for adding meta tags, external stylesheets, tracking scripts, or structured data that needs to load before the page content.

  • Footer Code places your custom code within the <body> tags just before the closing </body> tag. This is typically used for JavaScript or other scripts that need to load after the page content.

Example: Embedding an External Calendar Widget

Here’s an example of embedding a Calendly widget on your page:

  1. Once a calendar event is created, copy the Inline Embed code.

  2. Inside the page editor in ClickFunnels, add a Section where you want to place the element.

  3. Add a Row within that section.

  4. Click the orange + Plus or Add New Element button inside the row to insert a new element.

  5. From the MISC (Miscellaneous) category, select the HTML/JS element.

  6. Open the Code Editor and paste the embed code.

  7. Click Save to save your changes.

Once the page is saved, click the Preview 👁️ icon to view the rendered widget.

Troubleshooting Embedded Code

If your widget doesn’t render as expected, follow these steps:

  1. Separate HTML and JavaScript

    • Place the HTML code inside the HTML/JS Element.

    • Paste the JavaScript code into the Footer Code editor.

    Important:

    The source where the embed code is provided often includes instructions on how to paste and configure the code. If you’re still facing issues, consider consulting a qualified developer for troubleshooting.

  2. Verify the Code
    Double-check the embed code to ensure it is accurate. Missing attributes, syntax errors, or improperly formatted code might cause it to fail.

  3. Inspect Page Layout
    Ensure the section or row where the widget is embedded has enough space to display the widget correctly. Resize or adjust the layout as needed to prevent clipping or improper rendering.

  4. Display Issue
    If the widget does not display as expected in the page preview, the code might need to be modified, or the widget's design may require adjustments. For example, to change the background color of a Calendly widget, you’ll need to configure this directly in your Calendly account under the calendar event settings.

    Tips:

    Always consult the documentation of the third-party tool for specific customization options.


Related articles