Speakeasy Embed

Library to embed Speakeasy experiences within a website.

Installation

You can install using your favourite package manager, or import from jsdelivr directly into your webpage.

Using npm (or yarn, or pnpm)

npm install @intheroomglobal/speakeasy-embed

HTML

<script type="module">
  import SpeakeasyEmbed from "https://cdn.jsdelivr.net/npm/@intheroomglobal/speakeasy-embed/dist/browser/embed.js";

  SpeakeasyEmbed.embed({
    id: "<YOUR EXPERIENCE ID>"
  });

  // ...

  SpeakeasyEmbed.destroyAll();
</script>

Usage

The embed can either be called programmatically, or auto-initialised via a script tag for users who do not wish to set anything up themselves. Embeds can be instantiated with const embed = new SpeakeasyEmbed(...) and destroyed with embed.destroy() if you want to keep track of the instance yourself, or instantiated via factory method SpeakeasyEmbed.embed(...) and destroyed via SpeakeasyEmbed.destroyAll() if you don't need fine grained control. Options passed remain consistent between both methods.

Styles are automatically injected when using script embeds. In JavaScript, you can import '@intheroomglobal/speakeasy-embed/dist/es/embed.css'; and have your bundler take care of the CSS (or create a <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intheroomglobal/speakeasy-embed/dist/es/embed.css" /> manually)

Bubble

A chat-bubble style experience. Opens on click, and maximises once interacted with.

JS

import SpeakeasyEmbed from "@intheroomglobal/speakeasy-embed";

new SpeakeasyEmbed({
  id: "<YOUR EXPERIENCE ID>"
});

Script embed

<script
  src="https://cdn.jsdelivr.net/npm/@intheroomglobal/speakeasy-embed/dist/browser/embed.js"
  id="<YOUR EXPERIENCE ID>"
></script>

Inline

An inline experience that shows in an element on the page in the regular flow. Maximises once interacted with.

JS

import SpeakeasyEmbed from "@intheroomglobal/speakeasy-embed";

new SpeakeasyEmbed({
  id: "<YOUR EXPERIENCE ID>",
  parent: ".some-selector" // Either selector or DOM element
});

Script embed

<script
  src="https://cdn.jsdelivr.net/npm/@intheroomglobal/speakeasy-embed/dist/browser/embed.js"
  id="<YOUR EXPERIENCE ID>"
  data-parent=".some-selector"
></script>

Fullscreen

A fullscreen experience. Cannot be minimised, so should live on it's own page.

JS

import SpeakeasyEmbed from "@intheroomglobal/speakeasy-embed";

new SpeakeasyEmbed({
  id: "<YOUR EXPERIENCE ID>",
  fullscreen: true
});

Script embed

<script
  src="https://cdn.jsdelivr.net/npm/@intheroomglobal/speakeasy-embed/dist/browser/embed.js"
  id="<YOUR EXPERIENCE ID>"
  data-fullscreen
></script>

Additional options

Aspect Ratio

To change the aspect ratio of the embed

JS

new SpeakeasyEmbed({
  id: "<YOUR EXPERIENCE ID>",
  aspectRatio: "16:9"
});

Script embed

<script
  src="https://cdn.jsdelivr.net/npm/@intheroomglobal/speakeasy-embed/dist/browser/embed.js"
  id="<YOUR EXPERIENCE ID>"
  data-aspect-ratio="16:9"
></script>

Inline experiences

To prevent experiences maximising when interacted with. Ignored by fullscreen embeds.

JS

new SpeakeasyEmbed({
  id: "<YOUR EXPERIENCE ID>",
  inline: true
});

Script embed

<script
  src="https://cdn.jsdelivr.net/npm/@intheroomglobal/speakeasy-embed/dist/browser/embed.js"
  id="<YOUR EXPERIENCE ID>"
  data-inline
></script>