Widget Elements

LiveLike custom widget elements (Web Components).

Install

npm install @livelike/widget-elements

Usage

Each widget fetches its data on connect, so initialize the SDK first, then render the widgets. LiveLikeInit() returns the profile — render the widgets once you have it.

import * as LiveLike from "@livelike/widget-elements";

const profile = await LiveLike.LiveLikeInit({
  clientId: "**************",
  accessToken: "**************",
});

Importing the package registers all nine widget elements (<text-poll>, <image-poll>, <text-quiz>, <image-quiz>, <text-prediction>, <image-prediction>, <emoji-slider>, <text-ask>, <cheer-meter>) and exposes LiveLikeInit. Only widgetid is required on each element.

Styles are injected automatically on import — no separate CSS import.

⚠️ The widgets must not be in the DOM before LiveLikeInit() resolves — add or render them after init (as above).

Auth flow (accessToken)

The presence of accessToken in LiveLikeInit() determines whether the viewer is treated as authenticated or anonymous:

• accessToken passed → the session is authenticated and the widget is initialized directly. The viewer sees the full interactive widget.
• accessToken omitted → the session is anonymous. If a widget also has the gated widget_attribute set to "true", it hides its controls and shows Join for free (register) and Sign in (login) buttons so the viewer can sign up before taking part. Without the gated attribute the widget is shown as normal (see Gated widgets).

// No accessToken → anonymous → gated widgets show Join / Sign in buttons
await LiveLike.LiveLikeInit({ clientId: "**************" });

// accessToken passed → authenticated → widget is initialized directly
await LiveLike.LiveLikeInit({
  clientId: "**************",
  accessToken: "**************",
});

Widgets

| Widget | Element | Attributes | Status | | ---------------- | -------------------- | ---------- | ------ | | Text Poll | <text-poll> | widgetid | ✅ | | Image Poll | <image-poll> | widgetid | ✅ | | Text Quiz | <text-quiz> | widgetid | ✅ | | Image Quiz | <image-quiz> | widgetid | ✅ | | Text Prediction | <text-prediction> | widgetid | ✅ | | Image Prediction | <image-prediction> | widgetid | ✅ | | Emoji Slider | <emoji-slider> | widgetid | ✅ | | Text Ask | <text-ask> | widgetid | ✅ | | Cheer Meter | <cheer-meter> | widgetid | ✅ |

Every element needs only widgetid. Everything else (question, options, results, expiry, correct/incorrect, sponsor, layout) is driven by the widget payload — nothing else is passed from the host.

Text Poll

<text-poll widgetid="***************"></text-poll>

• Sponsor banner — rendered automatically when the widget payload has a sponsor (sponsors[0].logo_url), configured in LiveLike.
• Option subtitles — an optional line under each option, read from a widget attribute per option (see Widget attributes).

Image Poll

<image-poll widgetid="***************"></image-poll>

• Image per option — each option renders its own image from the payload.
• Option subtitles — optional line per option via secondaryText{i} (see Widget attributes).

Text Quiz

<text-quiz widgetid="***************"></text-quiz>

• Correct/incorrect reveal — after submitting, options are marked correct or incorrect from each option's is_correct, and a Correct!/Incorrect! result is shown for the user's choice.
• Option subtitles — optional line per option via secondaryText{i}.

Image Quiz

<image-quiz widgetid="***************"></image-quiz>

• Image-based quiz — image per option with the same correct/incorrect reveal as Text Quiz after submit.
• Option subtitles — optional line per option via secondaryText{i}.

Text Prediction

<text-prediction widgetid="***************"></text-prediction>

• Resolved later — the prediction is graded when its follow-up interaction arrives; the Correct!/Incorrect! result appears at that point, not immediately on submit.
• Option subtitles — optional line per option via secondaryText{i}.

Image Prediction

<image-prediction widgetid="***************"></image-prediction>

• Single vs. doubles layout is auto-detected — no attribute needed. A "doubles" option is detected from a second image attribute or an & in the option description.

Emoji Slider

<emoji-slider widgetid="***************"></emoji-slider>

• Drag to vote a magnitude — the emoji thumb swaps as it crosses each option's threshold; an "Avg." marker and vote count show after submit.
• Sponsor banner — optional full-bleed banner at the top when the payload has a sponsor.

Text Ask

<text-ask widgetid="***************"></text-ask>

• Free-text response — the fan types an answer and submits it; the answer (and any confirmation message) is shown afterwards.
• Sponsor banner — optional full-bleed banner at the top when the payload has a sponsor.

Cheer Meter

<cheer-meter widgetid="***************"></cheer-meter>

• Tap to cheer — tap a player to vote; the bar and counts update as votes come in.
• Sponsor banner — optional full-bleed banner at the top when the payload has a sponsor.

Gated widgets

Any widget can be gated to encourage sign-up. A gated widget hides its interactive controls (options are blurred and non-interactive) and shows a "Join or sign in today to take part" footer with Join for free and Sign in buttons instead of the normal Submit flow. These buttons redirect to:

| Button | URL | | ------------- | ------------------------------------ | | Join for free | https://www.wtatennis.com/register | | Sign in | https://www.wtatennis.com/login |

Gating is driven by a single widget attribute set in the CMS/producer:

gated = "true"     // in the widget's widget_attributes

A widget renders as gated only when both are true:

1. The widget payload has the attribute gated with the string value "true".
2. The SDK was initialized without an accessToken — i.e. an anonymous viewer. LiveLikeInit({ accessToken }) marks the session as authenticated, and authenticated users always see the full interactive widget even when gated=true.

Gating is supported by all nine widgets. Nothing is passed on the element — set
`gated=true` on the widget in LiveLike and initialize the SDK anonymously.

## Widget attributes

Some presentation data comes from LiveLike `widget_attributes` (a free-form
`{ key, value }` list — the keys below are this package's convention, so the
CMS/producer must use the exact same key strings):

| Widget                             | Attribute key       | Purpose                                                            |
| ---------------------------------- | ------------------- | ----------------------------------------------------------------- |
| _all widgets_                      | `gated`             | `"true"` gates the widget for anonymous viewers (see [Gated widgets](#gated-widgets)) |
| _all widgets_                      | `description`     |  supporting line shown under the widget title             |
| _all poll/quiz/prediction widgets_ | `secondaryText{i}`  | Subtitle under option `i` (`secondaryText0`, `secondaryText1`, …) |
| `image-prediction`                 | `secondaryImage{i}` | Second player photo for doubles option `i`                        |

(`{i}` is the 0-based option index. `secondaryText{i}` is read by `text-poll`,
`image-poll`, `text-quiz`, `image-quiz`, `text-prediction`, and
`image-prediction`.)

## Development

```bash
npm install
npm run build        # build to dist/ (es + umd + types, styles inlined)

Test the built package in a consuming app, not in this repo.