How to Embed UpViral Widget Correctly (Step-by-Step Tutorial)

One of the key features of UpViral that it differentiates from other online giveaway software like Vyper, Viral Loops, Kingsumo, and Gleam is the extensiveness of available embeddable options.

In fact, there are many ways to embed the UpViral widget on a website. But, if you find it difficult to show up the UpViral giveaway on your website or if the UpViral widget is not loading as fast as you need, this tutorial will be helpful for you.


UpViral Embeddable Options

UpViral provides unique features for embedding a campaign.

UpViral campaign publishing options

Under the “Embed campaign into your web page” section, you can specify on which pages you will be embedding UpViral opt-in and share widgets.

UpViral campaign embed section

Click in the “Embed campaign on your website” box. Now you will see a screen similar to the one below.

Embed Upviral campaign settings

Enter your website URL where you will be installing the UpViral widget. In the second step, Opt-in widget settings, you can select the preferred UpViral widget type.

There are four different ways to embed Upviral in your site.

  1. Standard
  2. Pop-up
  3. Popover
  4. HTML Form

The Standard method is perfect if you want to use your landing pages instead of UpViral’s hosted pages. It’s the ideal option if you want to integrate your UpViral contest into an existing leads funnel.

Popup and Popovers are excellent options if you have created an evergreen rewards program and want to use your blog traffic to feed the contest funnel.

The HTML Form is used to integrate with existing landing pages and lead capture tools through the HTML Form integration method.

Standard Method

The very first and the most popular UpViral installation option is Standard. Now UpViral supports customizing the unique look of the Standard Widget from your editor. See the screenshot below for reference.


So you can change the widget and decide what to show up and hide on the widget. Once the widget design and campaign are completed, you can embed the UpViral widget on your site.

Set up

Select the “Standard” option from the list under “Opt-in widget settings.” You can define the Widget’s width from here. UpViral widgets are mobile responsive. However, you can specify a width percentage or specific pixel.


Next, you have to set up the “Share Widget.” As you see, there are two options.

  1. The share widget is shown on the same page instead of the opt-in widget (refresh)
  2. Redirect to the following URL where the share widget will be embedded
Standard Share widget settings - UpViral

Both options have their strengths. For example, the first method is useful if your funnel does not have a lead capture option. It’s particularly used in areas where the lead is already captured via other means. The second option is the most popular option out of the two. If your funnel has both lead capture and Thank you pages, it’s the option you must choose.


If you want to send participants to the share page hosted on UpViral servers, just enter the UpViral Share page URL under the field “Redirect to the following URL where the share widget will be embedded.

Your thank you page web address will be similar to:

On the fourth step, which is Installation, you will be provided two code snippets.

UpViral Standard widget installation codes


One of the main reasons why the UpViral widget fails to load on most sites is the UpViral script does not load. To fix it, you have to load the Upviral.js at the head of your web page.

Copy the main UpViral embed code.

<script language="javascript" src=""></script>

Insert it between the head tag of your site. You can use Google Tag Manager to install the script or a script manager plugin if you use WordPress.

Now paste the iframe HTML code and other script code where you want to display the Standard UpViral widget.


If you have a site that receives traffic, the Pop-up widget type could be a real game-changer for your business. Because, usually, Pop-ups has got a higher lead conversion rate. Therefore, if you can build a really good contest funnel on UpViral, Pop-up can make it go viral.

Set up Pop-up

UpViral lets you set up the Pop-up widget in several ways.

Upviral pop-up opt-in widget settings
  • Background Opacity allows you to control the transparency of the widget foreground.
  • Enable or disable the appearance of pop-ups on page load
  • Enable/disable the close icon of the pop-up
  • Define how many days the popup should stay hidden if it’s closed by a visitor

Share widget and referral traffic control options are as same as the Standard widget, where you can direct where to show the widget and send traffic.

Install Pop-up


You will be given an HTML code similar to the one below. It lets you convert a button or a link into a call-to-action where the pop-up will show up once it is clicked.

<a href="#uvembed123584">click here to open popup</a>

I recommend placing the UpViral external Javascript code inside the head tag to load the UpViral pop-up without any issues.


The recently added widget type is Popover. It lets you display a chat widget-style widget on your site.

Set up Popover

UpViral Popover settings let you customize the widget’s appearance and how it shows.

UpViral popover opt-in widget settings
  • Enter a compelling CTA text under the “Button title.” Ex: Click Here to Win a 5-Day Trip to Hawaii
  • Customize button CTA color and icon
  • Select the preferred popover mode. You can either set the popover to be displayed by default after some time or make it closed. If it’s set up to be closed, the user has to click on the widget to open it.


Popover widget script can be inserted just above the </body> tag because we want other content to load before the widget.

Upviral popover widget installation codes

HTML form

HTML form code lets you integrate UpViral with other platforms and online tools that UpViral does not have a native integration currently.

Here’s an example I use the HTML form integration inside Convertful form builder.


ConvertBox is another lead capture tool that lets you connect tools through the HTML form integration method.


UpViral’s HTML form uses the HTTPS POST method. If your form builder or landing page builder does not support UpViral, you can use the HTML code of the form to integrate easily.

Upviral HTML Form widget code

Why does UpViral embed widget not load?

There are two main reasons:

  1. UpViral script does not load prominently
  2. Other scripts or plugins conflict with the UpViral script

The best-case scenario is to insert the UpViral.js the script inside the <head> HTML element and loading the UpViral widget above the fold before other elements do.

Embeddable UpViral referral widget

Now you can let your contest participants display UpViral opt-in widgets on their sites and get referral credits whenever someone signs up through the widget installed on their sites. Contact Chamal from here for more details.


Have you got any issues?

In this tutorial, you learned how to embed UpViral widgets the right way. If you have any problems, drop a comment below, and I will help in any way I can.

Also read: Top UpViral Integrations to Boost Your Campaign Success

Leave a Comment