Embedding Gleam in a Page or Blog Post

This is our demo contest embedded right on this page:

After you set up your competition you have the option to install in a way that suits your needs.

To embed Gleam within a page you need to select the Embed in a Page or Blog Post option, which looks like this:

This is the code you need to paste onto your page in order to load the Gleam widget. Depending on what CMS or blog platform you use where you add it may vary, we've added some instructions for common platforms below.

Wondering how wide the widget should be? See how to change the Competition widget's width.

You can also dynamically insert the embed code using JavaScript:

<div data-target="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('[data-target="gleam_competition"]'), embedCode);
</script>

An example can be seen here:

When writing a post in Wordpress you need to paste in the Gleam embed code in Text mode. The code is built in such a way that switching back to Visual mode after adding it shouldn't break the widget.

If you manually create a page you can paste in the embeddable widget code that you find on your installation options, you will need to make sure that you select the Show HTML editor to do this.

Using the Gleam app for Shopify? It can create the page for you. See Shopify.

To install to a WIX page you need to first Add > Embed > HTML iframe then add your Gleam embed code into WIX. Once you do that you can drag the frame to ensure the widget fits properly within your page /design.

To install to a post in Blogger you need to also select HTML mode, our script works in a way that you can freely move between HTML mode & Compose mode after you add it.

Add a Code Embed element where you want your Competition to appear, paste your Gleam embed code into it and save. The Designer shows a placeholder, so publish your site, or its .webflow.io staging domain, to see the widget.

Edit the page, click an insert point and add a Code block. Leave its type set to HTML, paste your Gleam embed code and save. If the widget doesn't show in the editor, check the live page in a private window.

Open the Insert menu, search for Embed and drag the Embed component onto your page. Choose HTML, paste your Gleam embed code, then size the component to fit the widget. Framer only runs scripts on the published site, so publish to check it.

If you'd rather not embed the widget, set the Embed component to URL and paste your Competition's landing page link.