--- title: "Embedding Third Party Embed Code" slug: "embedding-third-party-embed-code" description: "Learn how to embed third-party content like forms and calendars in ClickFunnels using HTML/JS, Header, and Footer Code editors for enhanced functionality." tags: ["navigation", "editor"] updated: 2025-06-24T13:11:49Z published: 2025-06-24T13:11:49Z canonical: "support.myclickfunnels.com/embedding-third-party-embed-code" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.myclickfunnels.com/llms.txt > Use this file to discover all available pages before exploring further. # Embedding Third Party Embed Code 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 - An active ClickFunnels account - A page created in your workspace - External embed code --- ## What You Can 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] > **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. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(357).png) - 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**. > [!TIP] > **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. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(372).png) - **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. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(371).png) 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. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(361).png) 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** > [!WARNING] > **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. - Place the **HTML code** inside the **HTML/JS Element**. - Paste the **JavaScript code** into the **Footer Code** editor. 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. > [!TIP] > **Tips:** > > Always consult the documentation of the third-party tool for specific customization options. ## Related - [Getting Started with Styles](/getting-started-with-styles.md) - [HTML/JS: Insert Custom HTML and JavaScript Code](/html-js-insert-custom-html-and-javascript-code.md) - [Adding Custom CSS Code to Your ClickFunnels Pages](/adding-custom-css-code-to-your-clickfunnels-pages.md) - [Adding JavaScript and Tracking Code for Advanced Features](/adding-javascript-and-tracking-code-for-advanced-features.md)