Content Toggler :: CF Pro Tools Add-On Features for ClickFunnels
Description and Best Use Case For This Add-On:
This add-on is to create toggling elements based on the click of a link or button. The presenter showcases its use on a page with an FAQ section, where clicking on elements reveals hidden paragraphs.
The Content Toggler can also toggle between different headlines and paragraphs, changing the layout dynamically.
Additionally, the video highlights a pop-up with a step-by-step process, featuring a link that reveals a hidden row when clicked.
We emphasizes the versatility of Content Toggler and encourages viewers to explore its various applications.
OVERVIEW (For Advanced Users)
For those of you ready to jump in and are familiar with CF Pro Tools, you can use this checklist:Add Domain to CF Pro Tools Whitelist
Create Your Order Page with Content
Assign CSS Titles As Notated in Steps Below
Generate Add-on Code in CF Pro Tools
Install Code on your Page
No known conflicts
Step 1: Set-up The Content Of Your Page
Here's a step-by-step guide on how to set up your page to use the Content Toggler add-on:
1. Install Content Toggler Add-on:
Ensure that the Content Toggler add-on is installed on your platform or website.
2. Identify Toggling Elements and Set Up Hidden Elements:
Examine your webpage and determine which elements you want to toggle (e.g., headlines, paragraphs, links).
Create hidden elements that you want to toggle. These could be paragraphs or rows, for instance.
3. Assign Unique CSS Names:
For each toggling element, assign a specific CSS title.
For paragraph elements, use the format 'cf-content-toggler-x' (replace X with a unique number).
For headlines, use 'cf-toggle-content-x' and 'cf-content-toggler-x' to indicate toggling relationships.
4. Set Your CSS title for toggling
For elements that toggle visibility, set the CSS title to 'cf-content-toggler-x'.
For links triggering toggling, set the link's URL to '#toggle-content-x' (replace X with the corresponding number).
5. Hide Initial State:
Go to the Settings of the element
Set the initial state of visible elements to hidden to ensure a closed starting position.
Save your page.
6.Test Toggling Functionality:
Preview the page and test the toggling functionality by clicking on the designated elements.
Verify that the add-on correctly toggles the visibility of the specified elements.
7. Repeat for Additional Elements:
If you have multiple sets of toggling elements, repeat the process by assigning unique CSS titles and configuring toggling logic.
8. Preview and Confirm:
Preview the page, navigate through different sections, and confirm that the Content Toggler add-on functions as intended.
For best overview of the steps above, watch this video tutorial from us:
By following these steps, you can effectively set up your page to utilize the Content Toggler add-on for toggling various elements based on user interactions.
Step 2: Create CONTENT TOGGLER ADD-ON and Install the Code In Your CF Page
Here's a step-by-step guide on how to set up your page to use the Content Toggler add-on based on the information provided:
1. Access CF Pro Tools:
Open CFProTools, then you can simply click the CREATE NEW button:
and navigate to the Content Toggler add-on section.
Observe any instructional videos available at the top of the page for additional guidance.
2. Assign a Unique Name:
Give your add-on a unique name to distinguish it. You can use the default name or customize it based on your preferences or the page's purpose.
3. Update/Add Add-on:
Click the "Create Add-on" button to finalize the creation of your Content Toggler add-on.
4. Copy Add-on Code:
Scroll down to the "Grab the Code" section, and click the "Copy Code" button to copy the generated code.
5. Access ClickFunnels Editor Settings And Add the Code:
Open the ClickFunnels Classic editor for the specific page where you want to install the add-on.
In the ClickFunnels editor, go to "Settings."
Within the Settings menu, select "Tracking Code."
Choose "Footer Code" to access the section where you can insert additional code.
Paste the copied Content Toggler add-on code into the Footer Code section.
6. Save Page:
Save your page to apply the changes.
Content Set-up Reminder: Remember to follow the content setup instructions explained in the video to define which elements should be toggled and configure their unique identifiers.Confirm Installation: Confirm that the add-on is successfully installed by testing the toggling functionality as per your set-up. For best overview of the steps above, watch this video tutorial from us:
Step : CF 2.0 Installation Instructions
Here's a step-by-step guide on how to set up the Content Toggler add-on with CF 2.0;
1. Watch Previous Videos:
Ensure you have watched previous videos for relevant information. The setup process discussed in those videos is still applicable.
2. Add Content Toggler Code:
Make sure the Content Toggler add-on code generated by CF Pro Tools is added to your page, and it is set in the footer code.
Whitelist your domain to ensure the add-on works on your live page.
4. Set Up FAQs:
Set up your Frequently Asked Questions (FAQs) following Jamie's previous instructions.
5. Choose Custom Attributes Level:
Decide whether to set custom attributes at the element level or the row level.
Go to the Advance settings of the row where you want toggling to occur.
6. Set Custom Attribute for Toggler:
Under the Advanced Settings tab, add a custom attribute.
Name: data-title
Value: cf-toggle-content-1 (or replace 1 with a unique number for different toggling elements).
7. Repeat for Other Rows:
If you have multiple rows for toggling, repeat the process for each, ensuring the custom attribute values are unique.
8. Hide Toggled Content:
Hide the content you want to be toggled by clicking on the visibility eye icon in the settings and saving the changes.
9. Preview the Page:
Click the preview button or go to the live page.
Click on the designated toggle area (e.g., "Click here to toggle another row") to see the toggled content.
Additional information: For links or toggling images, refer to previous instruction mentioned by Matthew.
Seek Assistance: If you have any questions or need further assistance, feel free to reach out.