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 six widget elements (<text-poll>, <image-poll>, <text-quiz>, <image-quiz>, <text-prediction>, <image-prediction>) 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).

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 | ✅ |

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.

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 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

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.