Participating in a contest? Visit this resource

Put it on your site

Embed a contest on your website

Show your contest on any website: your blog, portfolio, link-in-bio page or online shop. Copy two snippets, paste them in, and you're live.

You can show the contest two ways:

Embedded

The widget renders in place, where you put the tag. Great for a dedicated giveaway page or a section of your homepage.

Modal

A launch button renders where you put the tag and opens the widget over the page. Great for dropping into existing pages.

On Shopify? Use the Winzos Contest theme block instead. There's no code to paste.

Get your embed code

  1. Open the Widget Builder. In your dashboard sidebar, go to Stylization → Widget Builder.
  2. Click Add to site. It's in the top bar, and opens the Add the widget to your site dialog.
  3. Pick the contest. Choose it under Contest. Only live contests are listed.
  4. Choose how to show it. Under Show as, pick Embedded or Modal.
  5. Copy both snippets. Use the Copy buttons next to each one.
The Add the widget to your site dialog
The embed code dialog in the Widget Builder
Don't see your contest? The list only shows live contests. If it's scheduled, come back once it has started. If you see "You don't have a live contest to embed right now", create one first.

The two snippets

1. Add the SDK script. It's the same for everyone and loads the widget. Add it once per page, either in your page's <head> or just before </body>:

HTML
<script src="https://cdn.winzos.io/sdk/winzos-sdk.js" async></script>

2. Add the widget mount point. Put this exactly where you want the widget (or the launch button) to appear. Yours will have your own numbers:

HTML
<div data-winzos-contest="123" data-winzos-creator="456" data-winzos-presentation="inline"></div>
Always copy the snippets from your dashboard rather than typing them. The contest and creator numbers must match your account, or the widget won't load.
AttributeWhat it does
data-winzos-contestWhich contest to show.
data-winzos-creatorYour creator ID, so the widget uses your styling.
data-winzos-presentationinline for Embedded, modal for Modal.

Optional: open the modal automatically

Want the contest to pop up as soon as someone lands on the page? Add data-winzos-open="true" to a modal mount point:

HTML
<div data-winzos-contest="123" data-winzos-creator="456" data-winzos-presentation="modal" data-winzos-open="true"></div>

Visitors can still close it, and the launch button stays on the page so they can reopen it.

Where to paste it

Most website builders have a block for custom code. Look for one called Custom HTML, Embed or Code:

  • WordPress: add a Custom HTML block.
  • Squarespace: add a Code block.
  • Webflow: add an Embed element.
  • Hand-coded sites: paste straight into your HTML.

You can paste both snippets into the same block. If your builder has a site-wide "header code" setting, you can put the script there once and use just the <div> on each page.

Some builders put custom code inside a small sandboxed frame. If the modal looks cramped there, switch to Embedded, or put the script in the site-wide header code instead.

Running more than one contest? Add a <div> for each. One script tag covers them all.

Every contest has its own page on app.winzos.io. Grab the link from Share in your contest's menu (see Manage your contests) and post it anywhere: your bio, stories, videos, newsletter or community.

What's next?

Customize the widget so it looks right at home on your site.