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.
2. Choose the funnel you want to edit by clicking on the Funnel Name.
3. Select the desired funnel step.
4. Click on the Edit Page button of your funnel page to access the Page Editor.
5. Navigate to Elements and click on Add Element.
You can also hover over any other element on your page and click on the plus sign to add a new element.
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.
2. Click on the Open Code Editor button to add your JS/HTML code.
3. Installation & Embedding Your Campaign
On the SETUP page, click Embed from the left-hand panel. Then click on + Create embed
STEP 1
In the Where will you embed the campaign field, type the URL of the website where you want the campaign to appear.
STEP 2
Select Your Opt-In Form
Choose UpViral opt-in form to use the built-in UpViral widget.
Alternatively, choose Connect your own form if you prefer to use your site’s existing form.
For this guide, we’ll select the Connect your own form.
STEP 3
Embed the Tracking Code
Copy the code shown under Embed this code to your site.
Paste it inside the <body> section of the page where your form is located.
⚠️ Important Notes:
Make sure no other UpViral code from a different campaign exists on the same page.
Do not place this code in the <header> or <footer>, as it should only be embedded on specific form pages.
Test the Embed
Refresh your page.
Click Test embedding to ensure the code is working correctly.
If an error message appears (e.g., detecting another UpViral code), remove the old code and add the new one.
STEP 4
Connect Your Data Fields
To ensure leads flow into your campaign, you’ll need to map your form fields:
Match each field in your form with the correct UpViral field.
Example:
Form field: Email → UpViral field: Email
Form field: Your Name → UpViral field: Name
Continue mapping all form fields until all are connected.
✅ Tip: You must map all fields correctly before moving to the next step.
STEP 5
Where to display your Share Page
Enter the URL where the Share Page will be embedded.
Click Save.
Repeat the embedding steps for the Share Page:
Specify Where to Display the Share Page
Enter the URL (e.g., www.UVcampaigntest.com).Adjust Alignment & Size
Alignment: Left, Center, or Right
Widget Width: e.g., 80%
Embed the Code
Copy the snippet provided.
Paste it into the <body> of your page.
⚠️ Important Notes:
Do not embed in the <header> or <footer>.
Avoid embedding multiple UpViral codes on the same page.
Test the Embed: Click Test embedding to verify correct display.
STEP 6
Add the embed code to your website
1. Copy the code shown under Embed this code to your site.
2. Paste it inside the <body> section of the page where your form is located.
⚠️ Important Notes:
Make sure no other UpViral code from a different campaign exists on the same page.
Do not place this code in the <header> or <footer>, as it should only be embedded on specific form pages.
Test the Embed
Refresh your page.
Click Test embedding to ensure the code is working correctly.
If an error message appears (e.g., detecting another UpViral code), remove the old code and add the new one.
FINAL STEP
Redirect Referral Users
Decide where referral leads (users who join via a shared link) will be sent:
Redirect referral users to this embed – Sends all referral traffic to this specific embedded version of your campaign.
Switch off – Referral traffic is sent to:
The UpViral-hosted campaign page, or
Any other website where this campaign was previously embedded.
A. You’ll see a confirmation message: “Your campaign has been embedded successfully!” ?
B. Click on Save and Exit to preview your live campaign.
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.
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)
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.
8. Click the Save button to save your changes.
9. Go to your Thank You page from your funnel overview in ClickuFnnels and click edit. Navigate to Elements and click on Add Element.
You can also hover over any other element on your page and click on the plus sign to add a new element.
10. 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.
11. Hover over your Custom JS/HTML element and click on the gear icon to access the element’s Settings.
12. Now go back to Upviral, select the second option, and paste the URL of your thank you page on the field provided. You may adjust the widget's width and alignment from here.
17. Then, the Installation page will show you what codes you need to copy and paste into the code editor.
18. Click on the X or outside of the code field to exit.
19. Click the Save button to save your changes.
20. Make sure you test or preview your design by clicking the preview button.
How to get your support tickets resolved faster
Statistics have shown us that the more you tell us when you report an issue, the faster we solve that ticket. So...
1 - If you have screengrabs, please include them. A picture is worth a thousand words.
2 - If you have recorded a video showing the issue you're having, please include that as well. A video is worth a million words.
We recommend a free service called Loom for creating these videos. (this is a link to https://www.useloom.com/)
3 - To speed up ticket resolution, follow these useful tips How to Write the Perfect Support Ticket (That Gets Results Fast)