Magic Mover :: CF Pro Tools Add-On Features for ClickFunnels




Description and Best Use Case For This Add-On:

The best use of this add-on is to allow the ability of moving multi-column rows into another row.   


This is something ClickFunnels does not allow for natively, so we created a way for you to do it.


One of the most common places you'll have seen this is in the Traffic Secrets funnel on the order form page.

This is where the new Add / Remove bump rows (3 column rows) have been inserted into the order form column of a 2-step order form.


A 1 column row that's actually a hard element.    (don't worry we'll give you all the codes you need).


Use your imagination on this one and you'll do great things....



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 Your Domain To CFProTools DOMAINS TAB

  • Create Any Type Page (Order Pages Are Common, Though)

  • Create a SECTION with CSS TITLE:  CF PRO TOOLS MAGIC

  • Create a ROW inside the SECTION that you would like to move

  • Give the ROW a CSS TITLE:   cf-move-after{{.elCreditCardForm}}

  • Create Install MAGIC MOVER Add-on Script

  • Install Script to Footer Tracking Code Settings

  • No Known Conflicts



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 Your ORDER Page


You can create any type page really, but ORDER type pages are common for the MAGIC MOVER add-on.


If creating your page like Traffic Secrets, make sure to use a 2-step order form - you can use Multiple Popups if you'd like as well and put your 2-step order form inside the popup section.


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



Other add-ons may be necessary depending on how you are using this add-on.



Step 3:  Install Additional Add-Ons


No other add-ons are necessary for MAGIC MOVER, but if you are using it with other add-ons or creating a Traffic Secrets "like" page, you may need other add-ons.   

Commons ones are:




Step 4:  Create Your Add-on Script


For most add-on installations of the MAGIC MOVER 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.



... now do a keyword search for MAGIC MOVER


Once you have located the MAGIC MOVER 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:

MM (Test Funnel) or
MAGIC MOVER (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 5:  On-Page Configuration


Create a SECTION you can hide at the bottom of the page. 

   

Everything you put in this SECTION will be used for MAGIC MOVER and can be moved elsewhere on the page via an update to the CSS TITLE of the ROW.


Update the CSS TITLE for this row by clicking the "#" in the bottom right of the SECTION SETTINGS:




The CSS TITLE will be:  CF PRO TOOLS MAGIC



Please Note:  CF PRO TOOLS MAGIC should be in all caps.  This is the only add-on that requires all caps and allows for spaces in the CSS TITLE.


Create a ROW that you would like to move into another row.

   

Common uses are the ADD / REMOVE PRODUCTS add-on which is commonly a 3 COLUMN ROW that you would move into a 1 COLUMN ROW.




Give your ROW a title like this to move it before or after another row.   


Please reference the row to see where you can find the CSS ID SELECTOR to be able to move items before or after.


You will set your CSS TITLE to:   cf-move-after{{.elCreditCardForm}}



The Magic Mover Section CSS Title should be:   CF PRO TOOLS MAGIC

NOTE:   If you want to move an element into the 2-step order form, you can use in your CSS TITLE:    cf-move-after{{.elCreditCardForm}}

NOTE 2:  If you are using Magic Mover to move custom CF elements near your PayPal Payment Container WHEN USING PAYPAL PLUS, use this CSS Title for your Add/Remove rows:    

cf-move-after{{.cfpt-payment-options-container}}

NOTE 3:  PayPal Plus and Add/Remove Products will not work together, please do not use Magic Mover to move add/remove bump products into the 2-step if using the PayPal Plus Add-on


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 CODE TAB, and paste your code in:



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



Known Conflicts:


The following add-ons do not work with MAGIC MOVER:


PayPal Plus and Add/Remove Products will not work together, please do not use Magic Mover to move add/remove bump products into the 2-step if using the PayPal Plus Add-on



This may not be an all-inclusive list, if you find any conflicting add-ons with this add-on, please let us know at support@cfprotools.com



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