# Adding a widget to your site

> Show a live signup count, a referral leaderboard, a community milestone or a launch countdown on any site, with one line of HTML.

Source: https://getlaunchlist.com/help/docs/widget/integrate-widget

---

Not every embed is a form. Four widgets put live numbers from your waitlist on any page: social
proof that updates itself.

Widgets are on every plan, Free included: the widget editor, your Launch page and the embed on your own site.

## The four widgets

**Live counter.** Your live signup total. The highest-converting thing you can put next to a signup
form.

**Leaderboard.** Your top referrers and their scores. Turns referring into a visible competition.
Rows show the name your form collected, or a masked identifier when it collected none.

**Milestone bar.** Progress toward a community goal, with what unlocks when you hit it.

**Countdown.** Time until launch. It renders nothing until the project has a launch date, so set
one in **Project settings → General** first.

## Adding one

Open **Embed & API → Your website**, scroll to **Widgets**, and choose **Get code** on the one you want. It is one element plus the loader:

![The Widgets section of Your website with Edit and Get code on each widget.](https://app.getlaunchlist.com/images/docs/widget/integrate-widget/01-widgets-section.webp "Scroll to Widgets and choose Get code")

```html
<div
    data-launchlist-widget="counter"
    data-project="acme"
    data-label="founders already in"
></div>
<script src="https://embed.getlaunchlist.com/v1/embed.js" async></script>
```

The loader goes in your `<head>` **once**, no matter how many widgets and forms you have.

![The code for the counter widget: one element plus the loader.](https://app.getlaunchlist.com/images/docs/widget/integrate-widget/02-widget-code.webp "One element plus the loader")

## Configuring per widget

Options travel as `data-*` attributes, so the same widget can read differently on two sites without
any stored configuration:

| Widget      | Attributes                              |
| ----------- | --------------------------------------- |
| Counter     | `data-label`: the line under the number |
| Leaderboard | `data-title`: the card heading          |
| Milestone   | `data-goal`, `data-reward`              |
| Countdown   | `data-heading`                          |

## What a widget can and cannot see

Widgets are **aggregate only**, and **no widget ever exposes an email address, a phone number, or
any other contact detail**. That is enforced server-side, not by the widget choosing what to draw,
which is why a widget is safe to put on a public page with nothing but your project handle in the
markup.

A counter shows a total. A leaderboard shows a rank, a label and a score. That label is the display
name your own form collected; where it collected none, the row falls back to a masked identifier
like `na•••`. So a leaderboard on a public page can show the names your signups gave you, which is
usually the point of a leaderboard, but it is worth knowing before you embed one.

A widget sliced to a cohort of fewer than ten people publishes no number at all, so an embed can
never be used to reconstruct an individual out of a narrow slice.

> [!TIP] Don't publish a number that sells against you
> A counter reading "7 people have joined" costs you more than no counter does. There is no
> auto-hide setting: the widget renders whatever the total is. Until the number helps you, leave the
> `<div>` off the page and add it once the total is worth showing, or embed a **milestone** instead,
> which frames a small number as progress toward a goal rather than as the whole story.

## The changelog embed

There is a fifth embed worth knowing about: your published **updates**, on your own site. It is the **Changelog** row under the widgets in **Embed & API → Your website**, and it appears once you have published an update.

```html
<div
    data-launchlist-updates="acme"
    data-heading="What's new"
    data-count="5"
></div>
```

It matters after launch. The hosted launch page has done its job by then, but the build-in-public
feed is what keeps people paying attention, and this puts it on the site they actually visit.

## If something is not working

| What you see              | What to do                                                                                                               |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| Nothing renders           | Check the loader script is present and the project handle is right. Errors go to the browser console.                    |
| The number is zero        | The project has no signups yet, or the handle points at a different project.                                             |
| The countdown is blank    | The project has no launch date. Set one in **Project settings → General**.                                               |
| It looks wrong on my site | Widgets render in a shadow root and ignore your CSS by design. Style them in **Project settings → Branding**.                    |
| It renders twice          | The widget `<div>` is on the page twice; each renders its own copy. Remove the duplicate. A repeated loader is harmless. |

## Next

- [Customizing a widget](/help/docs/widget/customize-widget)
- [Every way to integrate](/help/docs/integrations/overview)

## Common questions

### How do I show my waitlist signup count on my website?

Add the counter widget: one div with your project handle, plus the loader script once in your head. It reads your real signup total and updates itself.

### Do waitlist widgets expose anyone's personal data?

Widgets are aggregate only, and no widget ever exposes an email address, a phone number or any other contact detail. The one thing a leaderboard does publish is the display name your own form collected; where it collected none, the row falls back to a masked identifier.

### Which plans include widgets?

Every plan, Free included. You can customize every widget, place it on your Launch page and embed it on any site you run.

### Will a widget slow my site down?

No. The runtime is small, loads asynchronously, and renders in a shadow root, so it never blocks your page and cannot be broken by your CSS.