Competition Installation Methods

Competition installation, Choose where to install your Gleam competition

Once you create your Competition you'll be taken to the final step called Installation Options, in this guide we'll explore each Installation Option one by one - then also offer some more best practice tips for installation.

Self Hosting

Self hosted options are things that you have control over, it may be your own site or your blog, or even the Gleam landing page.

On Your Own Site

By far the most effective place that you can install your campaign is on your own site. Why is this do you ask?

  • Users are more likely to browse or find the competition page
  • After users enter a competition it's more likely they'll continue to browse your site or check out your products
  • You can do a lot more tracking related things like tag users with retargeting pixels

Embed On A Dedicated Page

Gleam app on dedicated webpage

The first thing you can do is to create a dedicated page on your site which will always be used for your latest campaign.

http://www.yoursite.com/competition
http://www.yoursite.com/giveaway

Or if you wanted to have a dedicated page per contest you could do something like

http://www.yoursite.com/competition/4th-july

Then just grab your embed code from the Embed in a Page or Blog Post Installation Option:

Gleam interface showing embed in page or blog post options and code

Dynamically Inserting The Embed Code

You can also dynamically insert the embed code using JavaScript:

<div id="gleam_competition"></div>
<script>
  function embedCompetition(el, html) {
    el.innerHTML = html;

    Array.from(el.querySelectorAll("script")).forEach(oldScript => {
      const newScript = document.createElement("script");
      Array.from(oldScript.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
      newScript.appendChild(document.createTextNode(oldScript.innerHTML));
      oldScript.parentNode.replaceChild(newScript, oldScript);
    });
  }

  /* Replace with your embed code */
  const embedCode = '<a class="e-widget generic-loader" href="https://gleam.io/abcde/test" rel="nofollow">My Competition</a><script type="text/javascript" src="https://widget.gleamjs.io/e.js" async="true"><\/script>';

  embedCompetition(document.querySelector('#gleam_competition'), embedCode);
</script>

An example can be seen here:

View Dynamic Embed Example

Mirror The Gleam Landing Page On A Specific URL

Gleam competition shown on webpage

Gleam has an iFrame Full Page install method under Install Options > Landing Page > iFrame

Gleam interface showing landing page for IFrame options

This allows you to mirror the Gleam Hosted Landing page on your own site. This is useful if you don't have any design resources to help you build your own landing page.

In order to install you will need to embed the code in a completely blank HTML page which doesn't include any existing template elements. Unless of course you want these elements on the landing page.

http://www.yoursite.com/competition

See Demo

Run It In Floating Tab or Popup

Gleam competition popping up on website after call to action clicked

Gleam also has a few complimentary install options which you can use in parallel with any of the others.

This option allows you to install a button (or tab) which floats across all pages on your site. It will trigger when users click the call to action that you've created.

Gleam interface showing add a tab to your site options

This particular option also has a few extra features to:

  • Automatically open the contest when a user first visits your site
  • Automatically open the contest when users are about to leave your site.

Use Capture To Draw Attention To Your Campaign

Gleam offers a number of other products that can help you increase exposure to your contest. Creating a simple Capture campaign can allow you to popup a call to action to anyone browsing your site or blog.

Image Popup

The first example uses a Popup With Image template to drive Clicks to your contest landing page.

Gleam capture on website showing competition image

Sitewide Capture Bar

The second example uses a Floating Bar to popup a CTA on every page about the contest.

Gleam floating bar shown on website advertising contest

Create an Embedable Capture

Another technique is to use Capture as an ad inside your content or blog posts to promote a specific campaign. You can do this by creating an Embedded Capture.

Gleam capture embedded on website

To give you an idea of how effective these techniques are, here's how many additional users we sent through to our own contests using Capture:

Gleam interface showing additional users sent to contests using capture results

On Your Blog

Gleam competition shown on embedded on webpage

Gleam offers the ability to take the contest widget and embed it into any page. This allows you to write dedicated posts and have your readers enter the contest without ever leaving your site.

Mobile Behaviour

When you are grabbing the embed code for your page you have the ability to choose how Gleam responds when viewed on a mobile device.

By default users will see an Enter Competition button which will take them to a mobile optimised landing page when the div or screen width is 420px or less.

Enter competition

You can optionally disable the button by deselecting the option during setup. This will require you to copy and paste the new code onto your page.

Gleam interface showing embed in a page or blog post options

How the widget displays when you show it on mobile really depends on how your website is designed for mobile devices. Optimal screen scaling is 540px, however the widget will shrink all the way down to 320px if necessary.

Gleam widget shown on mobile device page

Install Campaigns On AMP Pages

If you want to embed your campaign on an AMP page, you will need to use an AMP-specific embed code.

You can find the AMP-specific embed code by going to your campaign's install tab and selecting Use AMP-specific embed code, required for embedding on AMP pages (experimental).

Gleam interface shown with embed in a page or blog post options

There is a single line of code that you will need to include in the <head> section of your AMP page, the rest of the embed code will need to be added to the <body> section of your page where you want the embed to appear.

Once your campaign is embedded on your AMP page it will be fully functional for users on mobile and desktop devices.

Please note that AMP page installs are still in an experimental phase, and may not work for sites built using plugins that auto-convert code into AMP code.

Widget Cookies (Experimental)

Note: This is an experimental feature so use at your own risk.

Gleam Competitions uses cookies to track information about contestants so there's no need to sign in each time they enter a Competition:

Competition widget with contestant logged in state

However, cookies may be disabled on some devices, which prevents contestants from entering your campaign until they click to re-enable a Competition that's embedded on your page.

This occurs frequently for contestants entering from Safari on iPhone, or if they were browsing a website that was linked from Facebook or Instagram:

Embedded Widget with Cookie Disabled

Gleam is experimenting with a cookieless entry method for contestants. This will allow contestants to login your Competition widget even when they have third-party cookies disabled.

To enable this option, simply toggle the following checkmark under Embed options:

Cookieless option is enabled for embedded Competition widgets

When cookieless mode is enabled, contestants may have to log in again each time they refresh the page.

Use Gleam's Landing Page

Gleam widget shown on gleam landing page

For every campaign we generate a landing page on the Gleam.io domain that you can use for your contest. This is great if you don't have a website, or don't have time to build a dedicated landing page for yourself.

Adding Your Logo

Your landing page pulls the logo from your site settings. Simply click the Settings tab in the left menu then add your logo. You will need to be on the Pro plan or above to do this.

Adding a Background Image

Background images get added during the installation phase of creation, simply drop down the Landing Page option & upload your background image of choice.

Gleam interface showing Landing page options

It is recommended to use background images around 1280x1280 or higher. Also try to keep the size under 2MB to ensure the page loads fast for all users.

Overriding Your Landing Page

By default your landing page is set to Automatic mode. This means that if someone is entering a competition that involves sharing, Tweeting or has a link back to the contest we try where possible to send the user back to the page the action is happening on.

Some examples:

  • Your contest is embedded on your blog with Automatic selected. We use the URL of the blog post as the URL in shares.
  • You send users to our landing page with Automatic selected, then users will always share our landing page.

Automatic does not function well when mobile users get redirected to our mobile landing pages. For this reason we give you the ability to override your landing page with a permanent URL.

Gleam interface showing Landing page options with override options

This ensure that any share URL's will always go to the correct page that you specify.

Social Install Options

You may also want to install or promote your contest across various social channels that you have an existing presence on. Each channel works quite differently so below we've broken down the best ways we've seen users run their campaigns.

On A Facebook Page

Gleam widget shown on Facebook page

Inside A Facebook Tab

This feature is being removed by Facebook and may not work on some pages. This is due to the deprecation of Page Tabs API by 14th December, 2022.

Facebook is one of of the only social platforms that allows you to natively install apps inside the social network. Gleam campaigns can currently be installed to Facebook Tabs using the Facebook install option.

There's no real benefit to running your campaign inside a Facebook Tab, other than it doesn't require you to make any changes to your website.

Gleam interface showing Facebook tab install link

Facebook Tab Install Guide

Running Gleam Inside A Facebook Post

The absolute best way to run a Gleam campaign is to put it inside an engaging step by step post. You are completely free to do all the things you might normally do on your timeline which includes asking users to Like or Comment on the post, then sending them to your Gleam contest to finish their entry.

The post below is a great example:

On An Instagram Page

Instagram offers no native way to install your contest to your profile. Nor do they allow clickable links inside posts.

So how do you get users entering and visitng your contest then? Simple, include a call to action in your Instagram bio then ask users to visit this link inside posts.

Instagram bio shown with competition call to action link

Here's the link included in the bio, and the accompanying post to enter. Bonus points for using Emojis to draw attention to your links 😎

On A Twitter Profile

Twitter works in a similar way to Instagram, but you do have the flexibility to include the live link to your contest inside any Tweet.

We highly recommend scheduling up anywhere from 1-4 Tweets per day mentioning the contest. Don't forget to test various images, wording and other calls to action to see what generates the best clickthrough rates.

On A YouTube Profile

In YouTube you typically link to the contest inside the description of your video. Check out the example below (you'll need to view on YouTube).

On A Pinterest Profile

On Pinterest you can pin a contest specific image and link it through to your landing page.

On Linktree

You can increase campaign traffic and entries by adding your Competition to your Linktree.

Gleam Competition on Linktree

When users interact with your Competition on Linktree, they will see a campaign preview which displays your entry methods and allows them to click through to your Hosted Landing Page.

Display Preview of Gleam Competition on Linktree

All you need to do is go to the Promote tab of your Competition and select Add This to My Linktree.

Add Competition to Linktree From Promote Tab

You will then be prompted to login to your Linktree account. Once you have done this your Competition will be added to your Linktree where you can change your link text and further customize the link.

Add Gleam Competitions to Linktree

The option to Display a preview of a Gleam campaign will be selected by default, but you can opt to skip the preview and send users directly to your campaign's Hosted Landing Page by selecting Go directly to URL.

You can also toggle the display of your campaign's feature image.

Using Gleam At Events

There are two primary ways you can run Gleam Competitions at events:

Running Your Competition In Event Mode

Gleam widget shown on iPad

If you are planning to use Gleam at an event you will need to enable Event Mode on the setup tab.

This will do a few things to make life easier at your event:

  • It will disable our fraud filter so users don't get invalidated or hit with CAPTCHA's
  • Refreshing the page will log the current user out
  • The page will timeout and refresh after 2 minutes of inactivity

It is not recommended to use social actions that require authentication or login at Events.

Directing Traffic To Your Competition Via QR Codes

You can also easily use Gleam at your event by displaying your Competition's unique QR code, which you can find under the Promote tab, at your event. Users who scan the code will be redirected to your Competition landing page where they can instantly enter from their mobile device.

Gleam interface showing actions and QR code