Multiple Popups :: CF Pro Tools Add-On Features For ClickFunnels Pages




Description and Best Use Case For This Add-On:

Multiple Popups is a great add-on to use if you want your buyer (browser) to have numerous options in popup environments.    


This add-on was made famous by ClickFunnels' Traffic Secrets funnel where the order form was housed in the popup form, and the native popup was used as an exit pop with links to alternate resellers where the person can buy the book from.




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 Page w/2-Step Order Element (or customized one-step order form)

  • Add MULTIPLE SECTIONS to the page (each section will be a popup)

  • Customize The Sections To Your Needs

  • Name CSS TITLE for your image:   cf-multi-popup-1

  • A Button on the page with a link to:  #open-popup-1 will open the associated popup

  • Create and Install MULTIPLE POPUPS Add-on

  • Conflicts:  Works up to 9 popups, will not work with double numeric values, or anything past -9


You can use -1 through -9, but do not try using -10 or anything over -10 as it will only read the first digit and continue pulling up the first popup in most cases.



Step 1:   Add Your Domain To CFProTools 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 ANY Type Page


You can build out Multiple Popups on any type page.


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 a SECTION For Each Popup You Want


So what will happen is you need to create a section for each popup you'd like to use.


Most common is that you will only need one popup in addition to your native ClickFunnels popup.    


Should you find a need for additional popups, you can create a new section for each popup you would like to see.


Set the CSS TITLE for each section to:  cf-multi-popup-x



Click the "#" to set the CSS TITLE.   This will be in your SECTION SETTINGS.


The "x" represents any number from 1 to 9 and will be associated to the specific popup you have in place.


For example, you might set the first section's CSS TITLE to:  cf-multi-popup-1



If you want an order form to be in your popup form, you might set a 2-step order form element in the popup section along with any other content or headlines you want to use.



Step 4:  Add BUTTONS To Call Your Popup Section



To call your sections (your popups) you will need to create a button or text link anywhere on your page and set the button action (or the text hyperlink) to:   


#open-popup-x


The "x" of course represents the numeric value you assigned to the section's CSS TITLE in the previous step.


For example, the link:  #open-popup-1 will open the section you titled, cf-multi-popup-1



Step 5:  Create Your Add-on Script


For most add-on installations of the MULTIPLE POPUP script, you can simply click the CREATE NEW button:



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

You will have unique on-page configuration for each page, though.



... now do a keyword search for MULTIPLE POPUP


Once you have located the MULTIPLE POPUP 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:

MULTI POP (Test Funnel) or
MULTIPLE POPUP (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 you can easily identify later.


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




Step 6:  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.


Click SETTINGS --> TRACKING CODE




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



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



Known Conflicts:


  • Only accepts numeric values 1-9

  • Page will scroll to top of page when popup is called



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