Skip to main content

Getting started

Installation#

Install the recordSDK and embedSDK.

$ npm install @loomhq/loom-sdk @loomhq/loom-embed

Set up your API key#

To obtain an API key set up your developer account.

When you do so, two API keys will be created:

  • A “sandbox” key for development—this key is set up to work with localhost
  • A “live” key for production

Replace the API_KEY dummy value referred to in the examples with your preferred API key—it will be in the form of a uuid.

Set up my account

Implement#

The following is all you need to set up the SDK.

import { setup, isSupported } from "@loomhq/loom-sdk";import { oembed } from "@loomhq/loom-embed";import { useEffect, useState } from "react";
const API_KEY = "api-key-obtained-from-developer-portal";const BUTTON_ID = "loom-sdk-button";
export default function App() {  const [videoHTML, setVideoHTML] = useState("");
  useEffect(() => {    async function setupLoom() {      const { supported, error } = await isSupported();
      if (!supported) {        console.warn(`Error setting up Loom: ${error}`);        return;      }
      const button = document.getElementById(BUTTON_ID);
      if (!button) {        return;      }
      const { configureButton } = await setup({        apiKey: API_KEY      });
      const sdkButton = configureButton({ element: button });
      sdkButton.on("insert-click", async video => {        const { html } = await oembed(video.sharedUrl, { width: 400 });        setVideoHTML(html);      });    }
    setupLoom();  }, []);
  return (    <>      <button id={BUTTON_ID}>Record</button>      <div dangerouslySetInnerHTML={{ __html: videoHTML }}></div>    </>  );}

Code walkthrough#

Imports#

Import the setup and isSupported functions from the @loomhq/loom-sdk module and oembed function from @loomhq/loom-embed. setup is used to instantiate the SDK and isSupported detects if a user’s browser is compatible with the SDK. oembed is used for handling video inserts.

import { isSupported, setup } from "@loomhq/loom-sdk";import { oembed } from "@loomhq/loom-embed";
note

The recordSDK depends on the MediaRecorder API and enablement of third-party cookies so it will not work in all browsers. This is why isSupported should be used as a check before setting up the SDK.

Create a button#

Create one or more button elements with a unique ID to trigger the recordSDK flow.

const BUTTON_ID = "loom-sdk-button";
// ...
<button id={BUTTON_ID}>Record</button>

Check if supported#

The recordSDK depends on the MediaRecorder API and enablement of third-party cookies so it will not work in all browsers. This is why isSupported should be used as a check before setting up the SDK. If the browser is not supported, an error will exist.

const { supported, error } = await isSupported();
if (!supported) {  console.warn(`Error setting up Loom: ${error}`);  return;}

Set up the recordSDK#

If the recordSDK is supported and the button you’ll attach it to exists in the DOM, call the setup function with a reference to your API key. The response will be a Promise object which resolves to a configureButton function.

const button = document.getElementById(BUTTON_ID);
if (!button) {  return;}
const { configureButton } = await setup({  apiKey: API_KEY});
const sdkButton = configureButton({ element: button });

Adding event listeners#

The configureButton function returns an SDKButton object which fulfills the NodeJS event emitter definition. In this implementation, the "insert-click" event is invoked which will be called when the insert CTA is clicked in the post-recording view. Other event listeners include "recording-start", "cancel", and "complete"—see full list of listenable events.

sdkButton.on("insert-click", async video => {  // handle inserting video});

Inserting the recording#

Use the oembed method from @loomhq/loom-embed to fetch a freshly recorded video’s metadata. This object includes an html attribute of stringified HTML of the iFrame embed player with Loom stylings. When a user completes a recording, the share URL will also be added to their clipboard.

const [videoHTML, setVideoHTML] = useState("");
// ...
sdkButton.on("insert-click", async video => {  const { html } = await oembed(video.sharedUrl, { width: 400 });  setVideoHTML(html);});
// ...
<div dangerouslySetInnerHTML={{ __html: videoHTML }}></div>;
note

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM and is named as such because in some cases it can expose users to cross-site scripting (XSS). You don’t need to worry about this when parsing the HTML returned from oembed.html since this HTML does not contain user input.