---
title: "HTML/JS: Insert Custom HTML and JavaScript Code"
slug: "html-js-insert-custom-html-and-javascript-code"
description: "Learn to enhance your ClickFunnels pages by embedding custom HTML and JavaScript with the HTML/JS element for unique functionalities and styles."
tags: ["custom code", "editor", "html", "javascript"]
updated: 2025-06-13T13:25:47Z
published: 2025-06-13T13:25:47Z
canonical: "support.myclickfunnels.com/html-js-insert-custom-html-and-javascript-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.
# HTML/JS: Insert Custom HTML and JavaScript Code
The **HTML/JS** element in ClickFunnels allows users to embed custom HTML and JavaScript code directly within a funnel page. This feature is designed for advanced users who want to add unique functionalities or styles that go beyond what standard ClickFunnels elements offer. In this article, you’ll learn how to properly add HTML and JavaScript code in the HTML/JS element to enhance your funnel pages. .png)
---
## Requirements
- An active ClickFunnels account
- A page created in your workspace
> [!WARNING]
> Important:
>
> - **Advanced Feature**: The Custom HTML/JS element is an advanced feature. Using custom code requires a good understanding of HTML and JavaScript, as improper code can break page functionality. Use with caution.
> - **Support Limitations**: ClickFunnels Support does not troubleshoot custom code issues. Custom code can be complex and time-consuming to debug. If you encounter issues, consult a qualified developer.
---
## Adding an HTML/JS Element in the Page Editor
1. Inside the page editor, add a **Section** where you want to place the element.
2. Add a **Row** within that section.
3. Click the orange **+** **Plus** or **Add New Element** button inside the row to insert a new element.
4. From the **MISC (Miscellaneous)** category, select the **HTML/JS** element. 
Once the **HTML/JS** element is added, you can open the settings sidebar, select **Open Code Editor,** and enter your HTML and JavaScript code directly within the editor.
---
## Customizing the HTML/JS Element
When you hover over an element, its border will be highlighted in orange. To access an element's settings, click on the **gear** **⚙️ icon** or click directly on the element. 
### Top Margin
The **Top Margin** setting lets you control the space between the current container (section, row, flex, and element) and the container directly above it. If no previous container exists, the margin will be applied relative to the parent container. If no preceding container is added, the **Body** will be the parent. You can set top margin values independently for desktop and mobile by using the device icons (🖥️ & 📱 ). If no mobile value is specified, it will inherit the desktop setting by default. Use the slider or manually enter a value in pixels (`px`) or percentage (`%`) to create consistent spacing across screen sizes.
### Open Code Editor
Clicking on **Open Code Editor** opens a text editor for adding custom HTML and JavaScript code. This editor supports both HTML and JavaScript code. Refer to the **Adding HTML Code** and **Adding JavaScript Code** sections below to learn more about properly adding HTML and JavaScript code. .png)
### Control Panel
The **Control Panel** appears at the bottom of every container(Section, Row, Flex, and Element) in the page editor, offering quick access to essential settings and actions for that container. Here’s what each icon represents: .png)
- **ALL**: The container will be visible on all devices (desktop, tablet, and mobile).
- **Desktop (**🖥️**) Icon**: The container will only be visible in desktop view.
- **Mobile (**📱**) Icon**: The container will only be visible in mobile view.
- **Eye** **(👁️)** **Icon**: Use this to hide the container from the page. Once clicked, the container will be hidden in the editor but not deleted. You can click the **Layout** menu in the top navigation bar to find the hidden containers. Select All, Desktop, or Mobile icon to unhide in the editor.
- **Code** **()** **Icon**: This icon opens the code editor, where you can insert custom CSS or JavaScript code to modify the container's behavior or styling.
- **Trash (**🗑️**) Icon**: Removes the container from the page editor entirely.
### Advanced Settings
To further customize your container (section, row, column, and element), ClickFunnels provides **Advanced** settings that allow you to control style, advanced CSS, animation, and rendering logic. We’ve separated these advanced features into dedicated articles to avoid overwhelming you with too much content in one place and to keep our documentation concise. Explore the following resources for more details:
- [**Advanced Settings - Customize Styles**](/v1/docs/advanced-settings-customize-styles): Learn how to populate contents dynamically, position containers, and apply z-index.
- [**Advanced Settings - Customize Animation**](/v1/docs/advanced-settings-customize-animation): Learn how to add animations, control entry and exit effects, and adjust animation delay.
- [**Advanced Settings - Customize Logic**](/v1/docs/advanced-settings-customize-logic): Learn how to apply conditional logic to elements and add custom attributes.
---
## Adding HTML Code
To add HTML code within the Custom HTML/JS element:
1. Open the **Code Editor** by clicking on **Open Code Editor** in the settings.
2. Enter your **HTML** code directly into the editor. .png)
> [!CAUTION]
> Caution:
>
> Do not include `<html>` or `<body>` tags. The Custom HTML/JS element is already placed within the page's `<body>` section. Adding these tags could cause errors or conflicts with the page structure.
---
## Adding JavaScript Code
The Custom HTML/JS element also supports JavaScript, allowing for interactive functionality or dynamic behavior.
To add JavaScript code:
1. Open the **Code Editor** by clicking on **Open Code Editor** in the settings.
2. Add your JavaScript code, enclosed in `<script> </script>` tags. .png)
> [!NOTE]
> Note:
>
> jQuery is available for use within ClickFunnels pages, so you can add **jQuery** syntax directly within the Custom HTML/JS element without needing to import it from CDN separately.
---
## Troubleshooting Custom Code
If your code isn’t working as expected:
- **Check Console for Errors**: Open your browser's developer tools and review the console for error messages.
- **Review Code Structure**: Ensure your HTML and JavaScript syntax is correct and doesn’t conflict with existing elements.
- **Consult a Developer**: Consider consulting a professional developer for assistance with complex functionality.
## Related
- [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)