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 offers four different ways to embed Upviral in your site.
- 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.
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.
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.
Next, you have to set up the “Share Widget.” As you see, there are two options.
- The share widget is shown on the same page instead of the opt-in widget (refresh)
- 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.
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.
It offers two choices:
- Opt-in page hosted by Upviral
- 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.
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.
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.
- 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.
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>
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.
Popover widget script can be inserted just above the </body> tag because we want other content to load before the widget.
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.
Why does UpViral embedded widget not load?
There are two main reasons:
- UpViral script does not load prominently
- 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.
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.