ClickFunnels 2.0 Secrets: How to Add Custom Code to Your Pages!
Channel: Dan Havey
Date: 2022-10-13

For More Training on ClickFunnels 1.0 and 2.0, Membership Sites, Courses and Custom Code Hacks - Go To https://CFninjas.com

Check out the One Funnel Away Challenge here… https://funneldesignmastery.com/ofa-challenge

Hey, it's Dan Havey here with CF Ninja Hacks, and today we're diving into the powerful features of ClickFunnels 2.0, specifically the custom code editor for CSS, HTML, and JavaScript. This upgrade is a game-changer for anyone looking to enhance their ClickFunnels pages with custom code. Let's get into it!

First, let's navigate to our main page, the home page of our site. Here, we'll access the site settings where we can add custom code. In ClickFunnels 2.0, you have two main places to input your code: the main page settings and the individual page settings. For site-wide code, you can add head tracking or footer tracking code. Remember, this code applies across all your pages within the workspace, including blog and funnel pages. So, be sure to verify if you want the code on your funnel pages or not.

Next, let's look at adding code directly to a specific page. Whether it's a regular page, funnel page, or course page, the process is the same. You can input your code at the top of the page settings, which affects the entire page. This is where you put your CSS, header, and footer code. If you need to add code to a specific section of the page, use the custom JavaScript/HTML box. This is perfect for adding elements like an iframe for booking appointments.

ClickFunnels 2.0 introduces a significant change from 1.0 regarding CSS ID selectors. In 1.0, every element had a unique CSS ID selector by default. In 2.0, most elements do not have an ID assigned by default because the platform is built on React JavaScript. React strips out inline CSS and instead uses unique class identifiers for each element. However, you can still generate an ID for any element by clicking the "generate ID" button.

Now, let’s dive into practical coding. In ClickFunnels 2.0, if you want to target a specific element with custom CSS, you’ll need to find its unique class and use it in your CSS file. Alternatively, generate an ID for the element to use it as a CSS selector. You can also add custom data attributes to elements, which can be useful for JavaScript targeting. This flexibility allows you to fine-tune the behavior and appearance of your pages with precision.

Finally, remember the layout title in ClickFunnels 2.0 is used for organizational purposes in the editor, not for CSS targeting. However, you can add custom attributes to any element, providing additional customization options. Whether you need to track clicks or apply specific styles, these custom attributes can be tailored to suit your needs.

That's a wrap on the custom code editor in ClickFunnels 2.0. If you have any questions or need further clarification, feel free to reach out. Happy coding!