Toggle On Steps  :: CF Pro Tools Add-On Features for ClickFunnels




Description and Best Use Case For This Add-On:


This add-on is great for creating customized header steps for the 2-step order element from ClickFunnels. 


Out of the box, the step 1 and step 2 header is kind of basic and bland, but with this add-on and a little CSS (provided for you), you can swap your customize your header image that appears on step 1 and step 2, it's pretty awesome!





OVERVIEW (For Advanced Users)


For those of you ready to jump in and are familiar with CFProTools, you can use this checklist:


  • Add Your Domain To CFProTools DOMAINS TAB

  • Create An Order Type Page

  • Add a 2-Step Order Element

  • Create and Install TOGGLE ON STEPS

  • Create 2 Images (Or Use the Two Above) To Correspond with Step 1 and Step 2

  • Name the CSS TITLE for each of your images like this:

  • cf-show-on-step-1

  • cf-show-on-step-2

  • No Known Conflicts



Step 1:   Add Your Domain To CF Pro Tools DOMAINS TAB


Your first step will be to add your domain to the CFPT Domains Tab.

Here's a guide on how to do that:


https://cfprotools.freshdesk.com/support/solutions/articles/29000041078-how-to-add-a-domain-to-cf-pro-tools-online-installation-guides




Step 2:  Create Your ORDER Type Page


You will need an ORDER type page in your funnel on ClickFunnels in order for this add-on to work.


This specific add-on will require a 2-step Order Form Element as well.


Here's a quick tutorial on how to create funnel pages using ClickFunnels:


https://help.clickfunnels.com/hc/en-us/articles/360060380833-Creating-A-New-Funnel-Step



Step 3:  Create and Add Your Step 1 and Step 2 Images


If you are not familiar with Photoshop or Page layout skills to create your custom images, I recommend finding a designer on Fiverr.com to have your step 1 and 2 images designed and delivered.


For best image quality and results, I recommend dimensions of 3000 x 315 pixels and 72 DPI resolution.





You can use these images as examples.    Once you have your images, you can add them one right over the top of each other in the page editor just above your 2-step order element.


You will need to give your images CSS TITLES...


For each image, go into the settings for each one, and at the bottom of the page, click the "#" icon to bring up your CSS TITLES.





Image 1, the CSS TITLE will be:   cf-show-on-step-1


Image 2, the CSS TITLE will be:   cf-show-on-step-2




Step 4:  Create Your Add-on Script


For most add-on installations of the TOGGLE ON STEPS script, you can simply click the CREATE NEW button:



Please note:  You can use this script over and over for other OTO pages without having to create a new and unique script.




... now do a keyword search for TOGGLE ON STEPS




Once you have located the TOGGLE ON STEPS script, click the thumbnail image and create the add-on per the installation instructions.



You will need to name your script.   We recommend a naming convention like this:

TOS (Test Funnel) or
Toggle On Steps (Book Funnel)

It's best to name it with the name of the add-on and in parentheses make sure to name which funnel it belongs to so the script location can be identified later as needed.


Once you have completed this area, click the red button below to create your add-on script.




Step 5:  Install Your Add-on Script


You can now copy your newly generated script out by clicking the blue button where your script is located.

The button says, "COPY CODE", this will copy the script to your virtual clipboard.



You are now ready to paste the script into your FOOTER TRACKING CODE AREA.


This add-on script should specifically be installed on an ORDER type page.


Click SETTINGS --> TRACKING CODE




Now click the FOOTER CODE TAB, and paste your code in:



Now SAVE your page, you are ready to preview and test your new add-on!



Known Conflicts:


  • No known conflicts.


What To Do Next:


Here Are A Few Other Help Docs You May Wish To Check Out:


Chances are you already have a CF Pro Tools account and you can find all available resoureces, there: app.cfprotools.com


However, if you have do not yet have a CF Pro Tools account, you will need one in order to take the actions in this help doc.   You can sign up at any time here:   www.cfprotools.com

If you have questions, you can also hit us up in support at support@cfprotools.com