UpViral

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. Copy the Upviral Standard 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.

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. Make sure you test or preview your design by clicking the preview button.

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 UpViral opt-in form.)
  
  
  
  
  
  

STEP 3

Under How you want to display your campaign, select SLIDE IN.
 ✅ This option shows a floating widget that expands when clicked.

Configure Slide In Settings

Once you select Popover, adjust these options:

• Form Alignment – Choose where the popover widget button appears (Left, Center, or Right).
  
  

• Form width – Set the maximum width of the popover window (between 250–750px).
  
  

• Widget height – Set the maximum height (default: 600px).
  
  

• Button title – Customize the call-to-action text (e.g., “Unlock Rewards”).
  
  

• Button design – Choose button color and icon to match your site’s style.
  
  

• Popover mode:
  
  

  • Popover closed upon page load – The button shows first, popover expands when clicked.
    
    

  • Popover opens upon page load – The popover is open by default when the page loads.
    
    
    

Step 4:  Add and Test the Embed Code

1. Add the embed code to your website, then click “Test Embedding” once you’re done.
   
   

2. A pop-up message will appear saying “Keep the tab or popup open for proper testing.”
   
   

   • Simply click “Run Test” to proceed.
     
     

3. If you encounter any issues during the test, try removing and reintegrating the code before testing again.

Step 5: Choose Where to Redirect Users

Choose where participants will access their Share Page after signing up.

You have two options:

Option 1: UpViral’s Share Page

If you select UpViral’s Share Page, participants will be redirected to the default UpViral-hosted Share Page.

Once this option is selected, proceed to the next step:

Step 6: Redirect Referral Users

Choose where to send referral traffic after signup.

• Redirect referral users to this embed:
   Enable this option if you want referral visitors to be directed to the embedded version of your campaign (on your website).
  
  

• If this option is disabled, referral traffic will be redirected to the Upviral-hosted campaign and not to your website

Option 2: Custom URL Page

If you select Custom URL Page, participants will be redirected to your own page where the UpViral share widget is embedded.

Once this option is selected, proceed to the next step:

Step 6: Where to Display Your Share Page

Specify where and how the Share Page should appear on your site.

• Website or Page URL:
   Enter the exact URL where you’ve embedded the UpViral share widget.
  
  

• Alignment within the Page:
   Choose how the widget should appear on the page: Left, Center, or Right.
  
  

• Form Width:
   Adjust the width of the form (e.g., 80%) to fit your page layout.
  
  

Embed and Test the Code

(This step applies if you selected Option 2: Custom URL Page in the previous step.)

1. Add the embed code to your website where you want the Share Page to appear.
   
   

2. Once added, click “Test Embedding.”
   
   

3. A pop-up message will appear saying “Keep the tab or popup open for proper testing.”
   
   

   • Click “Run Test” to verify the integration.
     
     

If you encounter any issues during the test, try removing and reintegrating the code, then run the test again.

Step 7: Redirect Referral Users

After embedding and testing, choose where referral traffic will be redirected after signup.

• Redirect referral users to this embed:
   Enable this option if you want referral visitors to be directed to your embedded version of the campaign (the custom URL page).
  
  

• If this option is disabled, referral traffic will be redirected to the default UpViral-hosted version of your campaign or to a previously embedded site, depending on your setup.

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)