---
title: "Embeddable sign-up widget"
description: "Add a webinar or challenge sign-up popup to any website with a button or your own link."
---

> Documentation Index
> Fetch the complete documentation index at: https://docs.meetfullhouse.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embeddable sign-up widget

The widget lets people sign up from your own site or funnel. You paste a short piece of code, and a button opens your sign-up form in a popup on top of the page. It works for webinars and challenges.

Use it when you already have a landing page you like and don't want to send visitors to a separate registration page. If you're happy with the page FullHouse gives you, share that link instead.

## Get your code

| For a | Go to |
| --- | --- |
| **Webinar** | **Webinars → your webinar → Set up → Registration page → Embed code** |
| **Challenge** | **Challenges → your challenge → Sign-up page → Embed** |

Each place offers two snippets, ready to copy:

- **Drop-in button**: paste it where you want the button. Type your wording in **Button label** first and the snippet updates. The label starts as "Save my seat" on webinars and as your form's **Button** wording on challenges.
- **Use your own button**: for making something already on your page open the form.

The event needs to be [published](/webinars/go-live) for visitors to use the form. [Challenges publish](/challenges/publish-manage) as a whole, so always use the challenge's snippet, not a day's.

:::caution
Copy the snippet from FullHouse rather than typing it. If you change a webinar's address in [Details](/webinars/details), snippets using the old address keep working, so you only need the new one for pages you add from then on.
:::

## Add a button to your page

The script draws a button exactly where you paste it.

### Webinar

```html
<script src="https://showtell.live/embed.js"
    data-webinar="your-webinar"
    data-button-text="Save my seat"></script>
```
### Challenge

```html
<script src="https://showtell.live/embed.js"
    data-challenge="your-challenge"
    data-button-text="Join the challenge"></script>
```

Replace `your-webinar` or `your-challenge` with the value from your own snippet.

## Use your own button

Add `data-mode="manual"` to stop the script drawing a button, then mark any button or link on your page. This suits pages where you've already designed the call to action, or want several buttons for the same event.

### Webinar

```html
<script src="https://showtell.live/embed.js"
    data-webinar="your-webinar"
    data-mode="manual"></script>

<a href="#" data-showtell-register>Reserve your spot</a>
```
### Challenge

```html
<script src="https://showtell.live/embed.js"
    data-challenge="your-challenge"
    data-mode="manual"></script>

<button data-showtell-challenge="your-challenge">Join the challenge</button>
```

You can mark as many elements as you like. The script only needs to be on the page once, anywhere, and it also works for buttons that appear later, such as inside your own popup or a section that loads as you scroll.

## Every setting

### On the script

| Setting | What it does | Default |
| --- | --- | --- |
| `data-webinar` | The webinar to open | None |
| `data-challenge` | The challenge to open. If you set both this and `data-webinar`, the webinar wins | None |
| `data-button-text` | The wording on the drop-in button | "Save my seat" for a webinar, "Join the challenge" for a challenge |
| `data-color` | The drop-in button's colour, and the popup's loading spinner. Use a six-digit colour such as `#0a7d4f` | `#6d28d9` |
| `data-mode` | `manual` hides the drop-in button. Anything else shows it | Button shown |

The script needs either `data-webinar` or `data-challenge` to draw a button. Without either, only triggers that name their own event will work.

### On your own buttons and links

| Setting | What it opens |
| --- | --- |
| `data-showtell-register` with no value | Whatever the first script on the page names, webinar or challenge |
| `data-showtell-register="your-webinar"` | That webinar |
| `data-showtell-challenge="your-challenge"` | That challenge |

:::caution
`data-showtell-register` with a value always means a webinar. To name a challenge, use `data-showtell-challenge`, or the popup shows **Sign-ups aren't open right now**.
:::

### From your own code

If you or your developer want to open the form from a script, these are available once the widget has loaded:

```html
<script>
  // Open a webinar, either way
  ShowTell.open('your-webinar');
  ShowTell.open({ webinar: 'your-webinar' });

  // Open a challenge
  ShowTell.open({ challenge: 'your-challenge' });

  // Close the popup
  ShowTell.close();
</script>
```

`ShowTell.open()` with nothing inside opens what the first script names. It does nothing if a popup is already open. The widget doesn't send sign-up events back to your page, so there's no way to run your own code after a sign-up.

## Examples

### A plain HTML page

```html
<!doctype html>
<html>
  <body>
<h1>The 5-Day Launch Challenge</h1>
<p>Join us live every evening next week.</p>

<script src="https://showtell.live/embed.js"
        data-challenge="your-challenge"
        data-button-text="Join free"
        data-color="#0a7d4f"></script>
  </body>
</html>
```

### A Pinball page

1. **Copy the snippet**

   Copy either snippet from FullHouse, as above.
2. **Add a Custom HTML block**

   In the Pinball page editor, add a **Custom HTML** block where you want the button, paste the snippet and choose **Insert**.
3. **Publish and test**

   Pinball only runs scripts on the published page, so the button won't appear in its editor preview. Test on the live page.

If you've connected the two, a Pinball form can also register people without any popup, keeping them on your funnel's own steps. See [Pinball](/connect/pinball).

### Other page builders

Look for a block called custom code, custom HTML or embed, and paste the snippet into it. Some builders put these blocks in their own small frame, which traps the popup inside that box. See [Troubleshooting](#troubleshooting). If yours does, look for a site-wide setting for adding code instead, and use the **Use your own button** snippet.

### A webinar and a challenge on one page

Use one script per event. Each draws its own button.

```html
<script src="https://showtell.live/embed.js"
    data-webinar="your-webinar"
    data-button-text="Save my seat"></script>

<script src="https://showtell.live/embed.js"
    data-challenge="your-challenge"
    data-button-text="Join the challenge"
    data-color="#0a7d4f"></script>
```

With several scripts, the first one that names an event decides what a bare `data-showtell-register` opens, so name the event on your own buttons. Only one popup can be open at a time.

### Several events with your own buttons

```html
<script src="https://showtell.live/embed.js" data-mode="manual"></script>

<a href="#" data-showtell-register="monday-webinar">Monday's session</a>
<a href="#" data-showtell-register="friday-webinar">Friday's session</a>
<a href="#" data-showtell-challenge="your-challenge">The full challenge</a>
```

## Change how it looks

The widget is sealed off from your site's styling, so your fonts and colours can't break it, and it can't affect your page. That also means your CSS can't restyle it.

| What | How to change it |
| --- | --- |
| Button wording | `data-button-text` |
| Button colour | `data-color`. The text is always white, so pick a dark enough colour. A named colour like `red` also works, but the button loses its soft glow |
| Button shape, size, font | Fixed. For full control, use your own button |
| Form colour | Your workspace's [brand colour](/workspace/branding), not `data-color` |
| Form wording | Your [registration settings](/webinars/registration-page), or the challenge's [sign-up page](/challenges/registration-hub) |

## What's in the popup

A compact version of your form, up to 440 pixels wide. It grows and shrinks to fit its contents. Visitors close it with the **×**, by clicking outside it or with the Esc key. Your page can't scroll while it's open.

| | Webinar | Challenge |
| --- | --- | --- |
| **Label at the top** | "Free training", which you can't change | Your **Label above the headline** |
| **Heading** | Public title | Public title |
| **Times** | "Pick a session", up to 4 options | Every day, under "One sign-up covers all 5 days" |
| **Fields** | The same name, email and phone fields as your form | First name and email |
| **Questions and consent** | Included | Included |
| **Button** | Your button wording | Your button wording |

The headline, subheadline, "What you'll learn" list, presenter and countdown aren't included. Your landing page does that job.

If a webinar has no upcoming times, the popup shows "No upcoming sessions right now — check back soon." and the button is disabled.

## What happens after sign-up

1. **They're registered**

   Everything works the same as on your registration page: the same [duplicate checks](/attendees/registration#someone-registers-twice), confirmation email and reminders.
2. **They leave your page**

   The whole browser tab moves to their [thank-you page](/attendees/thank-you), or to your redirect if you set one, or for a challenge, to their [hub](/challenges/registration-hub#what-attendees-see-on-the-hub).
3. **If the browser blocks that move**

   The popup shows "You're registered!" or "You're in!", with a **Continue** button and an **Open in a new tab** link.

Someone already registered goes to the "Find your personal link" page instead, and their link is emailed to them. In a challenge popup, the fallback reads "You're already signed up".

Your page never receives the attendee's personal link. It stays between the attendee and the form, so scripts on your site can't read it.

## Tracking and reporting

- **UTM values:** any `utm_source`, `utm_medium`, `utm_campaign`, `utm_term` or `utm_content` in your page's address pass through to the registration automatically. Send your ad traffic to your page with those in the link, and they're saved with the person.
- **Visits:** opening the popup counts as a visit to the event. Your [dashboard](/start/dashboard) shows how many visits came through embedded forms. For a challenge, visits are counted on Day 1.
- **Conversions on your site:** because the visitor leaves your page, code on your page won't see the sign-up finish. For a webinar, use its [Tracking](/webinars/tracking) step to count conversions on the thank-you page. Those codes also run inside the popup, so don't count the popup opening as a conversion. For a challenge, use its [Tracking section](/challenges/registration-hub#tracking-on-these-pages), whose codes run on the sign-up page, the popup and each person's hub.

## Troubleshooting

| What you see | Why | What to do |
| --- | --- | --- |
| No button appears | Your page builder removed the script, or the page hasn't been published | Paste into a custom code block, and test on the live page. Many builders don't run scripts in their previews |
| No button appears, but the code is there | `data-mode="manual"` is set, or neither `data-webinar` nor `data-challenge` is set, or the script was given `type="module"` | Use the snippet exactly as copied |
| The popup opens inside a small box | Your builder puts custom code in its own frame | Add the script through a site-wide code setting and use your own button |
| Your own button does nothing | The script isn't on that page, or it's a bare `data-showtell-register` with no event named on any script | Add the script, or name the event on the button |
| The popup says **Sign-ups aren't open right now**, or the form says "Sign-ups aren't open right now. Please check back soon." | The event is a draft or paused, or the address in the code is wrong, or the code names a challenge day, or a challenge is being opened as a webinar | [Publish](/webinars/go-live) it, then copy the snippet again |
| The wrong event opens | Several scripts on the page, and a bare `data-showtell-register` opens the first | Name the event on each button |
| Nothing opens on a site with strict security settings | The site's content security policy blocks outside scripts and frames | Ask your developer to allow `https://showtell.live` for scripts and frames |
| "Too many attempts. Please wait a minute, then try again." | More than 10 attempts in a minute from one network | Wait a minute and try again |
| "Something went wrong — please try again." | A temporary problem | Wait a minute and try again |
| "We could not connect. Check your connection and try again." | The visitor's connection dropped | Try again |
| A form colour doesn't match `data-color` | The form uses your brand colour | Change it in [Branding](/workspace/branding) |
| "No upcoming sessions right now — check back soon." | The webinar has no times to offer | Check its [schedule](/webinars/schedule) |
| The label says "Free live training" on a challenge | That's the default | Change **Label above the headline** on the [sign-up page](/challenges/registration-hub#write-the-sign-up-page) |

Source: https://docs.meetfullhouse.com/connect/embed-widget/index.mdx