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 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’s Widget Embeddable Options

UpViral provides unique features for embedding a campaign.

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.

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

In the first step, under “Opt-in Embed Type”, you will find two options:

1. Embed UpViral opt-in widget – Uses UpViral’s Opt-in widget that you can customize on the signup page editor.
2. Use opt-in form of my website – Uses data from any opt-in form embedded onto your website, such as Elfsight’s Form Builder.

Using UpViral’s Opt-in widget

This method is very easy to implement, and you do not need to use any form builder software. 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 three different ways to embed Upviral in your site.

1. Standard
2. Pop-up
3. Popover

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.

Standard Method

The very first and the most popular UpViral installation option is Standard. 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

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.

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

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

• 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="#uvembed129111">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.

• 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.

Using the Opt-in form on your website

Universal Capture

Universal Capture lets you use existing forms on your website to add data to UpViral.

Embed the JavaScript code into the body section of your website where the form widget is embedded. Next, click on the “Test Embedding” and then the “Refresh” button under the second phase to fetch available form field data.

Once the form fields are provided, designate accurate form fields in your UpViral campaign to the form field values of your HTML form.

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 the 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.

Here’s an example HTML code for UpViral Opt-in form:

<form name='upviralForm129111' id='' method='post'
 action='https://app.upviral.com/site/parse_new_users/call/ajax/campId/129111/snippet_id/64ec828b07ff2'>
<div class='form-group'>
<label>Name</label>
<input type='text' name='name'  class='form-control' value=''>
</div>
<div class='form-group'>
<label>Email Id</label>
<input type='text' name='email' class='form-control' value=''>
</div>
<div class='form-group'>
<label></label>
<input type='submit' name='upviralsubmit'  value='Submit'>
<input type='hidden' name='reflink' value=''>
</div>
</form>

Why does the UpViral 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