Adding The Custom JS/HTML Element:

1. Access the Funnels Page by hovering over the ClickFunnels drop-down menu from your dashboard and clicking on Funnels.


Adding_A_Custom_JS_HTML_Element_To_Your_Funnel_Page_1.png


2. Choose the funnel you want to edit by clicking on the Funnel Name.


Adding_A_Custom_JS_HTML_Element_To_Your_Funnel_Page_2.png



3. Select the desired funnel step.


Adding_A_Custom_JS_HTML_Element_To_Your_Funnel_Page_3.png



4. Click on the Edit Page button of your funnel page to access the Page Editor.


Adding_A_Custom_JS_HTML_Element_To_Your_Funnel_Page_4.png



5. Navigate to Elements and click on Add Element.


Adding_A_Custom_JS_HTML_Element_To_Your_Funnel_Page_5.png



You can also hover over any other element on your page and click on the plus sign to add a new element.


Adding_A_Custom_JS_HTML_Element_To_Your_Funnel_Page_6.png



6. Scroll all the way down and click on the Custom JS/HTML element under the Misc Elements section. You can also drag the element and drop it on your page as needed.


Adding_A_Custom_JS_HTML_Element_To_Your_Funnel_Page_7.png




6. Scroll all the way down and click on the Custom JS/HTML element under the Misc Elements section. You can also drag the element and drop it on your page as needed.


Editing The Custom JS/HTML Element:

1. Hover over your Custom JS/HTML element and click on the gear icon to access the element’s Settings.


Adding_A_Custom_JS_HTML_Element_To_Your_Funnel_Page_8.png

2. Click on the Open Code Editor button to add your JS/HTML code.

Adding_A_Custom_JS_HTML_Element_To_Your_Funnel_Page_9.png

3. Copy the Upviral Popup widget code in the Custom JavaScript / HTML field





4. Click on the X or outside of the code field to exit.

5. Choose code type from the Custom Code Type drop-down menu.

Regular HTML/JS Code - Use the HTML and JavaScript that you write inside of the custom code editor.


Adding_A_Custom_JS_HTML_Element_To_Your_Funnel_Page_11.png


3rd Party Embed Code - Use this option when you are using a 3rd party widget that is printed to the page.

Important Note: Due to the custom and varying nature of custom coding, our support team is unable to provide support for writing or troubleshooting any code added to your ClickFunnels pages.

6. Adjust the general settings in the Settings tab. (optional)


Adding_A_Custom_JS_HTML_Element_To_Your_Funnel_Page_12.png


7. Click on Advanced to adjust the advanced settings. (optional)
Animation.
  • Timed Delay - Fade in or fade in with scale.
  • Type - On page load or on page scroll for the delay that you have set.

Adding_A_Custom_JS_HTML_Element_To_Your_Funnel_Page_13.png


8. Select the element or text where you want the link to appear. Click on the element or text to edit it. In the text editor or element settings, locate the option to add a hyperlink. Click on the chain link icon to open the hyperlink settings.

In the hyperlink settings, enter your campaign ID with a hashtag in front of it as the URL or destination. For example #uvembed145973
You can find this information here:





9. Click the Save button to save your changes.



Adding_A_Custom_JS_HTML_Element_To_Your_Funnel_Page_14.png


10. Make sure you test or preview your design by clicking the preview button.




Additional Information:

  • To embed the Upviral pop-up widget to your call to action button, simply click on the action button and select "Set Action" on the right.



  • Then select "Go to website URL" and type in "#"  and then your campaign ID. For example:



  • Once you've saved your settings, go back to the previous page. In the future, whenever someone clicks on the action button, your campaign will open in a pop-up window.