GuidesAPI EndpointsQuestionsChangelog
Guides

Web Embeds

Embedding LiveLike features on your web pages

Suggest Edits

Features like Chat, Widgets, and more can be added to your web pages with HTML embed codes. Anywhere you can paste an HTML embed code, you can add LiveLike functionality. These codes can be used in HTML files, or in popular web site builders, or your favorite blogging tool.

👍

Make sure you have a Client ID

You'll need a Client ID to initialize the SDK. Check out Retrieving Important Keys for instructions on how to get one.

Setting Up

Add the snippet below onto your page only once. The ideal place to put it is at the bottom of the page, inside of the <body> tag. Replace YOUR-CLIENT-ID with your Client ID before saving your page.

<script src="https://unpkg.com/@livelike/[email protected]/livelike.umd.js"></script>
<script>LiveLike.init({ clientId: "YOUR-CLIENT-ID" });</script>

🚧

This snippet only needs to be added once on your page, and then any number of LiveLike tags can be added.

Timeline Widgets

Add the embed code below anywhere on your page to display widgets in timeline mode wherever the code is placed. Replace YOUR-PROGRAM-ID with your event's Program ID.

<livelike-widgets programid="YOUR-PROGRAM-ID" mode="timeline"></livelike-widgets>

📘

Making a live blog?

Widgets in timeline mode can be used as a live blog. After you have widgets appearing on your site, you can customize your integration even further with CSS. Check out the Live Blog Tutorial for more information.

Pop-up Widgets

Add the embed code below anywhere on your page to display pop-up widgets wherever the code is placed. Replace YOUR-PROGRAM-ID with your event's Program ID.

<livelike-widgets programid="YOUR-PROGRAM-ID"></livelike-widgets>

Chat Rooms

Add the embed code below anywhere to your page to display a chat room on your page.

<livelike-chat roomid="YOUR-ROOM-ID"></livelike-chat>

Embedded Individual Widgets

Integrators can embed any widget in their web page using their embed codes. Embed codes can be copied from inside the CMS, or generates from your own templates.

Embedded Default Widgets

Default widget tags are the following:

  • livelike-text-poll
  • livelike-image-poll
  • livelike-text-quiz
  • livelike-image-quiz
  • livelike-text-prediction
  • livelike-text-prediction-follow-up
  • livelike-image-prediction
  • livelike-image-prediction-follow-up
  • livelike-cheer-meter
  • livelike-emoji-slider
  • livelike-rich-post
  • livelike-social-embed
  • livelike-video-alert
  • livelike-text-ask
  • livelike-text-number-prediction
  • livelike-text-number-prediction-follow-up
  • livelike-image-number-prediction
  • livelike-image-number-prediction-follow-up

Any template added in HTML for the widget kind will be applied to embedded widgets

<livelike-text-quiz widgetid="XXXXXXX"></livelike-text-quiz>

<template kind="text-quiz>
	....
</template>
<livelike-text-quiz widgetid="XXXXXXX"></livelike-text-quiz>

Embedded Custom Widgets

Custom Widgets can be embedded by adding the custom element created with the widget id.

<script>
  class CustomAlert extends LiveLikeAlert {
    render() {
      return html`
        <template>
          <livelike-widget-root>
            <livelike-widget-header>
              <livelike-title></livelike-title>
              ${this.link_url &&
              html`
              <a href="${this.link_url}" target="_blank">${this.link_label}</a>
              `}
            </livelike-widget-header>
            <livelike-widget-body>
              <span>${this.text}</span>
              ${this.image_url &&
              html`
              <img src=${this.image_url} height="40px">
              `}
            </livelike-widget-body>
          </livelike-widget-root>
         <template>
      `;
      }
    }
  customElements.define("custom-alert", CustomAlert);
</script>
<custom-alert widgetid="XXXXXXX"></custom-alert>

Please note for custom Quiz, Polls, Predictions and Follow Ups, widget kind should be specified in the custom class

class CustomImagePrediction extends LiveLikePrediction {
  connectedCallback() {
    this.kind = "image-prediction";
    super.connectedCallback();
  }
  render() {
    return html`
      <template>
        ...
      </template>
    `;
  }
}

Embedded Individual Widgets via Custom Mode

If you need finer control over the widget lifecycle, a custom mode can be created using the registerWidgetMode method

The registerWidgetMode method's first argument is a string, the name of the mode to be used as the mode attribute on the widgets element, and the second argument is a function that has the widgetPayload object as an argument, and should return the widget lifecycle changes.

Below is an example of how to create your own timeline mode using the available methods.

Troubleshooting

I'm using a content management system to add the embed codes to my page, but they are not showing up. What's happening?

Some publishing tools automatically sanitize scripts and HTML that seem suspicious as a security measure. Try updating your tool's configuration to allow these tags to be added to your pages:

  • <livelike-widgets>
  • <livelike-chat>

I'm using Squarespace. What's the best way to use LiveLike on my page?

You can use Code Injection to add the code from "Setting Up" to your pages. You can use Squarespace's Per-Page Code Injection feature to add it on specific pages.

Once the setup code is on your page, you can embed as many widgets as you'd like, anywhere on your page. Use the Code Block control to add LiveLike features.

Updated 9 months ago

What’s Next