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.

embed-upviral

UpViral Embeddable Options

UpViral offers 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 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 maintain 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.

edit-upviral-widget-editor

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 width from here. UpViral widgets are mobile responsive. However, you can specify a number to showcase as you want in desktop view.

standard-widget-embed-upviral

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

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 have to choose.

Tip:

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

Your thank you page web address will be similar to: https://upvir.al/1234567/thanks/CampaignName

The third step is defining where the referral traffic will be gone.

upviral-embed-campaign-widget-settings

It offers two choices:

  1. Opt-in page hosted by Upviral
  2. Website where the opt-in widget will be embedded

Both have their pros and cons. The first option allows you to split test Opt-in & Share pages and optimize the funnel easily. The second method is perfect if you want to send referral traffic to a specific page.

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

upviral-standard-widget-embed-code

Install

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="https://snippet.upviral.com/upviral.js"></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.

Pop-up

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.

pop-up-upviral-widget-opt-in-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

upviral-popup-code

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.

Popover

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-widget-optin-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.

Installation

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

upviral-popover-installation-script

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.

custom-field-data-transfer-convertful-optin

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

convertbox-html-form-integrations

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-code

Why does UpViral embedded 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 inserting 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.

upviral-referral-widget-example

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