### Setup Standard SDK Instance

Source: https://dev.loom.com/docs/record-sdk/details/api

Use this example to create an instance of the Standard SDK. Ensure you provide a valid publicAppId.

```javascript
const instance = createInstance({
  mode: "standard",
  publicAppId: "abcde12345",
  config: { insertButtonText: "hello world" }
});
```

--------------------------------

### Setup Custom SDK Instance

Source: https://dev.loom.com/docs/record-sdk/details/api

Use this example to create an instance of the Custom SDK. This method is for existing instances only as CustomSDK is no longer available for new instances. Ensure you provide a valid jws token.

```javascript
const instance = createInstance({
  mode: "custom",
  jws: "<token-value>",
  config: { insertButtonText: "hello world" }
});
```

--------------------------------

### Install Loom Embed SDK via npm

Source: https://dev.loom.com/docs/embed-sdk/getting-started

Use this command to install the Loom Embed SDK package from npm.

```bash
$ npm install @loomhq/loom-embed  

```

--------------------------------

### Install Loom SDK Packages

Source: https://dev.loom.com/docs/record-sdk/getting-started

Install the recordSDK and embedSDK using npm. This is the first step to integrating Loom into your project.

```bash
$ npm install @loomhq/record-sdk @loomhq/loom-embed  

```

--------------------------------

### createInstance for StandardSDK

Source: https://dev.loom.com/docs/record-sdk/details/api

Initializes the Loom SDK for standard mode using the `createInstance` function. This method is recommended for versions 3.2.0 and above. The older `setup` function is deprecated.

```APIDOC
## createInstance for StandardSDK

### Description
Initializes the Loom SDK for standard mode. This function is used to return the SDK object on versions 3.2.0 and above. The `setup` function is being deprecated.

### Method
`createInstance`

### Parameters
#### Arguments
- **mode** (string) - Required - The type of SDK implementation. Must be "standard".
- **publicAppId** (string) - Required - The key providing access to an SDK workspace for the domain serving the record button. Only available in StandardSDK.
- **environment** (Environment) - Optional - Indicates which environment the SDK is running in (e.g., "development", "production").
- **config** (object) - Optional - Configuration object.
  - **insertButtonText** (string) - Required - Text for the preview modal's insert button.

### Request Example
```javascript
const instance = createInstance({
  mode: "standard",
  publicAppId: "abcde12345",
  config: { insertButtonText: "hello world" }
});
```

### Response
- **SDKResult** (Promise) - An `SDKResult` object wrapped in a Promise.
```

--------------------------------

### Set up the record SDK

Source: https://dev.loom.com/docs/record-sdk/getting-started

After confirming browser support and ensuring the trigger button exists, call the `setup` function with your `publicAppId`. This returns a `configureButton` function to initialize the SDK on the button element.

```javascript
const button = document.getElementById(BUTTON_ID);  
  
if (!button) {  
  return;  
}  
  
const { configureButton } = await setup({  
  publicAppId: PUBLIC_APP_ID,  
});  
  
const sdkButton = configureButton({ element: button });  
```

```javascript
const button = document.getElementById(BUTTON_ID);  
  
if (!button) {  
  return;  
}  
  
const { configureButton } = await setup({  
  publicAppId: PUBLIC_APP_ID,  
});  
  
const sdkButton = configureButton({ element: button });  
```

```javascript
const button = document.getElementById(BUTTON_ID);  
  
if (!button) {  
  return;  
}  
  
const { configureButton } = await setup({  
  publicAppId: PUBLIC_APP_ID,  
});  
  
const sdkButton = configureButton({ element: button });  
```

--------------------------------

### JavaScript Implementation with Loom SDK (JavaScript)

Source: https://dev.loom.com/docs/record-sdk/getting-started

Implement the Loom recordSDK using plain JavaScript. This example shows how to initialize the SDK, set up the record button, and embed the video player.

```javascript
import { setup } from "@loomhq/record-sdk";  
import { isSupported } from "@loomhq/record-sdk/is-supported";  
import { oembed } from "@loomhq/loom-embed";  
  
const PUBLIC_APP_ID = "public-app-id-obtained-from-developer-portal";  
const BUTTON_ID = "loom-record-sdk-button";  
  
function insertEmbedPlayer(html) {  
  const target = document.getElementById("target");  
  
  if (target) {  
    target.innerHTML = html;  
  }  
}
  
async function init() {  
  const { supported, error } = await isSupported();  
  
  if (!supported) {  
    console.warn(`Error setting up Loom: ${error}`);  
    return;  
  }  
  
  const root = document.getElementById("app");  
  
  if (!root) {  
    return;  
  }  
  
  root.innerHTML = `<button id="${BUTTON_ID}">Record</button>`;  
  
  const button = document.getElementById(BUTTON_ID);  
  
  if (!button) {  
    return;  
  }  
  
  const { configureButton } = await setup({  
    publicAppId: PUBLIC_APP_ID,  
  });  
  
  const sdkButton = configureButton({ element: button });  
  
  sdkButton.on("insert-click", async (video) => {  
    const { html } = await oembed(video.sharedUrl, { width: 400 });  
    insertEmbedPlayer(html);  
  });  
}
  
init();  


```

--------------------------------

### React Implementation with Loom SDK

Source: https://dev.loom.com/docs/record-sdk/getting-started

Set up a React component to use the Loom recordSDK. This example shows how to configure the button, handle video insertion, and display the embedded video.

```jsx
import { setup } from "@loomhq/record-sdk";  
import { isSupported } from "@loomhq/record-sdk/is-supported";  
import { oembed } from "@loomhq/loom-embed";  
import { useEffect, useState } from "react";  
  
const PUBLIC_APP_ID = "public-app-id-obtained-from-developer-portal";  
const BUTTON_ID = "loom-record-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({  
        publicAppId: PUBLIC_APP_ID,  
      });  
  
      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>  
    </>  
  );  
}  


```

--------------------------------

### Client-side SDK Initialization with JWS

Source: https://dev.loom.com/docs/record-sdk/details/key-pair-authentication/key-pair-auth

This client-side JavaScript example shows how to initialize the Loom SDK using a pre-fetched signed JWS. Instead of providing a public app ID directly, the 'jws' option is used to pass the token obtained from the server.

```javascript
import { setup } from '@loomhq/record-sdk';  
  
// Assuming jws has been fetched from your server  
declare const serverJws: string;  
  
await setup({  
  jws: serverJws,  
});  
```

--------------------------------

### JavaScript Implementation with Loom SDK (TypeScript)

Source: https://dev.loom.com/docs/record-sdk/getting-started

Implement the Loom recordSDK using plain JavaScript with TypeScript types. This example demonstrates initializing the SDK, configuring the record button, and embedding the video.

```javascript
import { setup } from "@loomhq/record-sdk";  
import { isSupported } from "@loomhq/record-sdk/is-supported";  
import { oembed } from "@loomhq/loom-embed";  
  
const PUBLIC_APP_ID = "public-app-id-obtained-from-developer-portal";  
const BUTTON_ID = "loom-record-sdk-button";  
  
function insertEmbedPlayer(html: string) {  
  const target = document.getElementById("target");  
  
  if (target) {  
    target.innerHTML = html;  
  }  
}
  
async function init() {  
  const { supported, error } = await isSupported();  
  
  if (!supported) {  
    console.warn(`Error setting up Loom: ${error}`);  
    return;  
  }  
  
  const root = document.getElementById("app");  
  
  if (!root) {  
    return;  
  }  
  
  root.innerHTML = `<button id="${BUTTON_ID}">Record</button>`;  
  
  const button = document.getElementById(BUTTON_ID);  
  
  if (!button) {  
    return;  
  }  
  
  const { configureButton } = await setup({  
    publicAppId: PUBLIC_APP_ID,  
  });  
  
  const sdkButton = configureButton({ element: button });  
  
  sdkButton.on("insert-click", async (video) => {  
    const { html } = await oembed(video.sharedUrl, { width: 400 });  
    insertEmbedPlayer(html);  
  });  
}
  
init();  


```

--------------------------------

### Content Security Policy Error Example 2

Source: https://dev.loom.com/docs/record-sdk/troubleshooting

This is another example of a Content Security Policy error, indicating that the page's settings blocked resource loading.

```text
# Example 2: 
Content Security Policy: The page’s settings blocked the loading of a resource  

```

--------------------------------

### Fetch oEmbed Metadata

Source: https://dev.loom.com/docs/embed-sdk/api

Fetches oEmbed metadata for a given Loom URL. Use this to get video details like title, thumbnail, and embed HTML.

```typescript
oembed: (linkUrl: string, options?: Option) => Promise<OEmbedInterface>;
```

--------------------------------

### Server-side JWS Generation with jose

Source: https://dev.loom.com/docs/record-sdk/details/key-pair-authentication/key-pair-auth

This Node.js example demonstrates how to generate a JSON Web Signature (JWS) using the 'jose' library. It imports a private key from a PEM string, sets the token's issuer, issuance time, and expiration, and then signs the token. The resulting JWS can be sent to the client for SDK initialization.

```typescript
import * as jose from 'jose';  
  
declare const PRIVATE_PEM: string;  
  
const privateKey = await jose.importPKCS8(PRIVATE_PEM, "RS256");  
const jws = await new jose.SignJWT({})  
  .setProtectedHeader({ alg: "RS256" })  
  .setIssuedAt()  
  .setIssuer("2a8e4925-3996-44f5-85e0-1dc19d5f4c85")  
  .setExpirationTime("2m")  
  .sign(privateKey);
```

--------------------------------

### Import isSupported in Loom SDK v3.0.0+

Source: https://dev.loom.com/docs/record-sdk/troubleshooting

Demonstrates the correct import method for the `isSupported` function starting from Loom SDK version 3.0.0. Importing from the main module is deprecated.

```javascript
// v3.0.0 and after  
import { isSupported } from "@loomhq/record-sdk/is-supported";  
  
// Before v3.0.0  
import { isSupported } from "@loomhq/record-sdk/is-supported";  
// OR  
import { isSupported } from "@loomhq/record-sdk";  

```

--------------------------------

### Content Security Policy Error Example 1

Source: https://dev.loom.com/docs/record-sdk/troubleshooting

This is an example of a Content Security Policy error message related to framing external resources.

```text
# Example 1: 
Refused to frame 'https://www.loom.com/' because it violates the following Content Security Policy directive...

```

--------------------------------

### Add event listeners to the SDK button

Source: https://dev.loom.com/docs/record-sdk/getting-started

Use the `sdkButton` object, which acts as an event emitter, to listen for various events. The example shows handling the 'insert-click' event, which is triggered when the insert CTA is clicked in the post-recording view.

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

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

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

--------------------------------

### Merge CSP Directives with helmet-csp

Source: https://dev.loom.com/docs/record-sdk/details/content-security-policy

Use this snippet to merge the required CSP directives for the Record SDK with your existing policy. Ensure you have the 'deepmerge' library installed.

```javascript
import merge from 'deepmerge';  
  
const existingCSP = { /* your existing policy */ };  
  
// Specified in a format that can be used by helmet-csp  
const loomSpecificCSP = {  
  'connect-src': ['www.loom.com'],  
  'frame-src': ['www.loom.com'],  
  'style-src': ["'unsafe-inline'"]  
};  
  
console.log('The new CSP directives', merge(existingCSP, loomSpecificCSP));  

```

--------------------------------

### Import necessary SDK modules

Source: https://dev.loom.com/docs/record-sdk/getting-started

Import the required functions for setting up the SDK, checking browser support, and handling video embeds. The SDK should be loaded asynchronously and is not supported for Server-Side Rendering (SSR).

```javascript
import { setup } from "@loomhq/record-sdk";  
import { isSupported } from "@loomhq/record-sdk/is-supported";  
import { oembed } from "@loomhq/loom-embed";  
```

```javascript
import { setup } from "@loomhq/record-sdk";  
import { isSupported } from "@loomhq/record-sdk/is-supported";  
import { oembed } from "@loomhq/loom-embed";  
```

```javascript
import { setup } from "@loomhq/record-sdk";  
import { isSupported } from "@loomhq/record-sdk/is-supported";  
import { oembed } from "@loomhq/loom-embed";  
```

--------------------------------

### createInstance for CustomSDK

Source: https://dev.loom.com/docs/record-sdk/details/api

Initializes the Loom SDK for custom mode using the `createInstance` function. Note that CustomSDK is no longer available for new instances.

```APIDOC
## createInstance for CustomSDK

### Description
Initializes the Loom SDK for custom mode. This method is for existing instances only, as CustomSDK is no longer developed.

### Method
`createInstance`

### Parameters
#### Arguments
- **mode** (string) - Required - The type of SDK implementation. Must be "custom".
- **jws** (string) - Required - The key providing access to an SDK workspace for the domain serving the record button. Only available in CustomSDK.
- **environment** (Environment) - Optional - Indicates which environment the SDK is running in (e.g., "development", "production").
- **config** (object) - Optional - Configuration object.
  - **insertButtonText** (string) - Required - Text for the preview modal's insert button.

### Request Example
```javascript
const instance = createInstance({
  mode: "custom",
  jws: "<token-value>",
  config: { insertButtonText: "hello world" }
});
```

### Response
- **SDKResult** (Promise) - An `SDKResult` object wrapped in a Promise.
```

--------------------------------

### Check Browser Support for Record SDK (v3.0.0+)

Source: https://dev.loom.com/docs/record-sdk/details/api

Import and use the `isSupported` function from its dedicated module to check if the browser meets the requirements for the Record SDK. This is the recommended import method for versions 3.0.0 and later.

```javascript
// v3.0.0 and after
import { isSupported } from "@loomhq/record-sdk/is-supported";
```

--------------------------------

### isSupported

Source: https://dev.loom.com/docs/record-sdk/details/api

Checks if the current browser has the necessary web APIs to run the Loom SDK. This method is imported from `@loomhq/record-sdk/is-supported` for versions 3.0.0 and later.

```APIDOC
## isSupported

### Description
Identifies if the browser that is trying to run the recordSDK has the necessary web APIs required to perform a recording.

### Method
`isSupported`

### Import Method
```javascript
// v3.0.0 and after
import { isSupported } from "@loomhq/record-sdk/is-supported";

// Before v3.0.0
import { isSupported } from "@loomhq/record-sdk/is-supported";
// OR
import { isSupported } from "@loomhq/record-sdk";
```

### Parameters
None

### Response
- **Promise** - An object with the following properties:
  - **supported** (boolean) - Represents if recordSDK is supported by the browser.
  - **error** (SDKUnsupportedReasons | undefined) - Will be `undefined` if `supported` is `true`.
```

--------------------------------

### Create a button to trigger recording

Source: https://dev.loom.com/docs/record-sdk/getting-started

Define a constant for the button's ID and create a button element in the DOM with that ID. This button will initiate the Loom recording flow when clicked.

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

```javascript
const BUTTON_ID = "loom-record-sdk-button";  
  
// ...  
  
const root = document.getElementById("app");  
  
if (!root) {  
  return;  
}  
  
root.innerHTML = `<button id="${BUTTON_ID}">Record</button>`;  
```

```javascript
const BUTTON_ID = "loom-record-sdk-button";  
  
// ...  
  
const root = document.getElementById("app");  
  
if (!root) {  
  return;  
}  
  
root.innerHTML = `<button id="${BUTTON_ID}">Record</button>`;  
```

--------------------------------

### Import Eval-Safe Bundle

Source: https://dev.loom.com/docs/record-sdk/details/technical-notes

Import the eval-safe bundle from the dist folder to avoid 'unsafe-eval' CSP issues.

```javascript
import {/* ... */} from '@loomhq/record-sdk/dist/cjs/safe';
```

--------------------------------

### Check browser compatibility

Source: https://dev.loom.com/docs/record-sdk/getting-started

Use the `isSupported` function to check if the browser meets the SDK's requirements, which include the MediaRecorder API and third-party cookie enablement. Log a warning if the browser is not supported.

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

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

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

--------------------------------

### SDKResult Object

Source: https://dev.loom.com/docs/record-sdk/details/api

The object returned from the `createInstance` function, used to configure and manage the record SDK.

```APIDOC
## SDKResult Object

### Description
An object returned from the `createInstance` function to configure the recordSDK.

### Properties
- **configureButton** (ButtonFn): See `ButtonFn`.
- **status** (() => { state: SDKState | undefined; success: boolean; }): Function returning an object with a `success` property—a boolean of whether the SDK successfully loaded—and a `state` property—either an `SDKState` member or `undefined` if `success` is `false`.
- **teardown** (() => void): Cleans up the instantiated SDK in the background and should be called when the button that triggers the SDK is removed from the DOM. (IMPLEMENTATION IN PROGRESS)
- **updateConfig** (({ config }: { config: SDKConfig }) => void): Function that allows you to update any part of the `SDKConfig` at any point.
```

--------------------------------

### Check Browser Support for Record SDK (Before v3.0.0)

Source: https://dev.loom.com/docs/record-sdk/details/api

For versions prior to 3.0.0, `isSupported` could be imported from either the main SDK module or its dedicated module. Importing from the main module is now deprecated.

```javascript
// Before v3.0.0
import { isSupported } from "@loomhq/record-sdk/is-supported";
// OR
import { isSupported } from "@loomhq/record-sdk";
```

--------------------------------

### Import isSupported Function Only Bundle

Source: https://dev.loom.com/docs/record-sdk/details/technical-notes

Import a smaller bundle containing only the isSupported function to check SDK compatibility without downloading the full SDK. This is the recommended method as of v3.0.0.

```javascript
import { isSupported } from '@loomhq/record-sdk/is-supported';
```

--------------------------------

### Configure Referrer Header for X-Frame-Options

Source: https://dev.loom.com/docs/record-sdk/troubleshooting

Add this meta tag to your HTML template to ensure the `referer` header is present, which helps resolve 'X-Frame-Options' errors when embedding Loom.

```html
<meta name="referrer" content="origin">

```

--------------------------------

### SDKButtonInterface

Source: https://dev.loom.com/docs/record-sdk/details/api

Object containing methods for the SDK to be programmatically interacted with. It extends EventEmitter and provides methods to control the pre-record panel and bubble position.

```APIDOC
## SDKButtonInterface

### Description
Object containing methods for the SDK to be programmatically interacted with. Fulfills the NodeJS `EventEmitter` definition and contains methods such as `.on` which listens to registered `ButtonEmitterEvents`.

### Properties
- **openPreRecordPanel** (() => void) - Programmatically opens the pre-record panel
- **closePreRecordPanel** (() => void) - Programmatically closes the pre-record panel
- **moveBubble** ((p: Position) => void) - Programmatically moves the camera bubble—`p` arg is target `Position` of camera bubble

Also contains properties of `EventEmitter` class.
```

--------------------------------

### Apply CSS to Show Loom SDK UI

Source: https://dev.loom.com/docs/record-sdk/troubleshooting

Use this CSS rule to ensure the Loom SDK iframe is visible in contexts where it might be hidden, such as within Shopify apps.

```css
div#loom-sdk-record-overlay-shadow-root-id {
  display: block !important;
}

```

--------------------------------

### SDKResult Type

Source: https://dev.loom.com/docs/record-sdk/details/api

The object returned by createInstance, used to configure and manage the record SDK. It provides methods for button configuration, status checks, teardown, and updating SDK settings.

```typescript
type SDKResult = {
  configureButton: ButtonFn;
  status: () => {
    state: SDKState | undefined;
    success: boolean;
  };
  teardown: () => void;
  updateConfig: ({ config }: { config: SDKConfig }) => void;
};

```

--------------------------------

### Dynamic Import for Server-Side Rendering

Source: https://dev.loom.com/docs/record-sdk/details/technical-notes

Use dynamic import with ssr: false to prevent issues when rendering the Loom SDK on the server, particularly in Next.js applications.

```javascript
import dynamic from 'next/dynamic';  
  
...  
  
const DynamicLoomSDK = dynamic(() => import('@/components/LoomSDK'), {  
  ssr: false,  
});  
```

--------------------------------

### Insert Video Metadata in React

Source: https://dev.loom.com/docs/record-sdk/getting-started

Fetches video metadata using oembed and updates the React state with the HTML embed code. Use this when integrating with a React application.

```javascript
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>;
```

--------------------------------

### SDKUnsupportedReasons Enum

Source: https://dev.loom.com/docs/record-sdk/details/api

Lists the reasons why the record SDK might not be supported on a user's browser. Use this to inform users about compatibility issues.

```typescript
enum SDKUnsupportedReasons {
  IncompatibleBrowser = "incompatible-browser",
  ThirdPartyCookiesDisabled = "third-party-cookies-disabled",
  NoMediaStreamsSupport = "no-media-streams-support",
}

```

--------------------------------

### Include Loom Embed SDK via Script Tag

Source: https://dev.loom.com/docs/embed-sdk/getting-started

Add this script tag to your HTML to include the Loom Embed SDK. It imports the SDK as a module.

```html
<script type="module">  
  import * as loomEmbedSDK from "https://www.unpkg.com/@loomhq/loom-embed@1.2.2/dist/esm/index.js?module";  
</script>  

```

--------------------------------

### oembed

Source: https://dev.loom.com/docs/embed-sdk/api

Fetches oEmbed metadata for a given Loom URL. This method is useful for retrieving information about a Loom video to display it as an embed.

```APIDOC
## oembed

### Description
Fetches oembed metadata of provided Loom URL.

### Method Signature
```
oembed: (linkUrl: string, options?: Option) => Promise<OEmbedInterface>;
```

### Parameters
#### Arguments
- **linkUrl** (string) - Required - Loom URL string
- **options** (Option) - Optional - See `Option` type for details.

### Response
- **Promise<OEmbedInterface>** - An `OEmbedInterface` object wrapped in a Promise.
```

--------------------------------

### Fetch GIF Embed Code

Source: https://dev.loom.com/docs/embed-sdk/api

Fetches the embed code for a GIF representation of a Loom video. This is useful for creating GIF previews.

```typescript
gifEmbed: (linkUrl: string) => Promise<string>;
```

--------------------------------

### ButtonFn

Source: https://dev.loom.com/docs/record-sdk/details/api

A function used to connect a specified DOM element to the recordSDK, returning an SDKButtonInterface.

```APIDOC
## ButtonFn

### Description
A function used to connect a specified DOM element to the recordSDK.

### Arguments
- **element** (HTMLElement) - DOM element to attach SDK
- **hooks** (Hooks) - DEPRECATED: Use `ButtonEmitterEvents` in place of `hooks`

### Response
- **SDKButtonInterface** - An `SDKButtonInterface` object.
```

--------------------------------

### SDKButtonInterface Interface

Source: https://dev.loom.com/docs/record-sdk/details/api

An interface for programmatically interacting with the SDK button. It extends EventEmitter to handle ButtonEmitterEvents and provides methods to control the pre-record panel and bubble position.

```typescript
interface SDKButtonInterface extends EventEmitter<ButtonEmitterEvents> {
  openPreRecordPanel: () => void;
  closePreRecordPanel: () => void;
  moveBubble: (p: Position) => void;
}

```

--------------------------------

### LoomVideo

Source: https://dev.loom.com/docs/record-sdk/details/api

Object representing a loom video which becomes available after recording.

```APIDOC
## LoomVideo

### Description
Object representing a loom video which becomes available after recording.

### Properties
- **id** (string) - Video id
- **title** (string) - Video title
- **height** (number) - Video height in pixels
- **width** (number) - Video width in pixels
- **sharedUrl** (string) - URL for sharing video
- **embedUrl** (string) - URL for embedding video
- **thumbnailHeight** (number) - Height of video thumbnail
- **thumbnailWidth** (number) - Width of video thumbnail
- **thumbnailUrl** (string) - URL of video thumbnail
- **duration** (number) - Video duration
- **providerUrl** (string) - URL of video provider
- **autoTitleStatus** (IntelligenceAvailableStatusType) - The status of an auto generated title
- **autoDescriptionStatus** (IntelligenceAvailableStatusType) - The status of an auto generated description
- **description** (string) - Video description
- **autoChaptersStatus** (AutoChapterStatusesType) - The status of an auto generated chapters
- **autoChaptersCount** (number) - The number of auto generated chapters generated, 0 if disabled
- **chapters** (string) - Video chapters
```

--------------------------------

### Option Type Definition

Source: https://dev.loom.com/docs/embed-sdk/api

Defines optional parameters for embed methods, controlling dimensions and thumbnail type. The `gifThumbnail` option allows for GIF previews instead of JPEGs.

```typescript
interface Option {
    width?: number;
    height?: number;
    gifThumbnail?: boolean;
}
```

--------------------------------

### gifEmbed

Source: https://dev.loom.com/docs/embed-sdk/api

Fetches the embed code for a GIF representation of a Loom URL. This is useful for embedding short, looping video clips.

```APIDOC
## gifEmbed

### Description
Fetches gifEmbed with the embed code of provided Loom URL.

### Method Signature
```
gifEmbed: (linkUrl: string) => Promise<string>;
```

### Parameters
#### Arguments
- **linkUrl** (string) - Required - Loom URL string

### Response
- **Promise<string>** - A string where Loom URL links are replaced with embed HTML.
```

--------------------------------

### Position Interface

Source: https://dev.loom.com/docs/record-sdk/details/api

Defines a simple interface for representing 2D coordinates (x, y) on the screen, used for positioning elements like the camera bubble.

```typescript
interface Position {
  x: number;
  y: number;
}

```

--------------------------------

### OEmbedInterface Type Definition

Source: https://dev.loom.com/docs/embed-sdk/api

Defines the structure of the object returned by the `oembed` method, containing video metadata.

```typescript
interface OEmbedInterface {
    type: 'video';
    html: string;
    title: string;
    height: number | null;
    width: number | null;
    provider_name: 'Loom';
    provider_url: string;
    thumbnail_height: number;
    thumbnail_width: number;
    thumbnail_url: string;
    duration: number;
}
```

--------------------------------

### LoomVideo Interface

Source: https://dev.loom.com/docs/record-sdk/details/api

Represents a Loom video object, available after a recording is complete. It includes properties like ID, title, dimensions, URLs, and metadata related to auto-generated content.

```typescript
interface LoomVideo {
  id: string;
  title: string;
  height: number;
  width: number;
  sharedUrl: string;
  embedUrl: string;
  thumbnailHeight?: number;
  thumbnailWidth?: number;
  thumbnailUrl?: string;
  duration?: number;
  providerUrl: string;
  autoTitleStatus?: IntelligenceAvailableStatusType;
  autoDescriptionStatus?: IntelligenceAvailableStatusType;
  description?: string;
  autoChaptersStatus?: AutoChapterStatusesType;
  autoChaptersCount?: number;
  chapters?: string;
}

```

--------------------------------

### SDKUnsupportedReasons Enum

Source: https://dev.loom.com/docs/record-sdk/details/api

An enum containing reasons why the record SDK might not be supported on the user's browser.

```APIDOC
## SDKUnsupportedReasons Enum

### Description
An enum containing reasons why the recordSDK is not supported on the user’s browser.

### Members
- **incompatible-browser**: Browser is not supported
- **third-party-cookies-disabled**: User’s third party cookies are disabled
- **no-media-streams-support**: MediaStream functionality is not available
```

--------------------------------

### ButtonEmitterEvents

Source: https://dev.loom.com/docs/record-sdk/details/api

Events that can be listened to when registered on an SDKButtonInterface instance.

```APIDOC
## ButtonEmitterEvents

### Description
Events that can be listened to when registered on an `SDKButtonInterface` instance. See Adding event listeners to see example of usage.

### Properties
- **bubble-drag-end** ((pos: Position) => void) - Event emitted when camera bubble dragging has ended—`pos` arg is Position of bubble
- **bubble-drag-start** ((pos: Position) => void) - Event emitted when camera bubble dragging has begun—`pos` arg is initial Position of bubble
- **bubble-move** ((pos: Position) => void) - Event emitted when camera bubble is moved-`pos` arg is Position of bubble
- **cancel** (() => void) - Event emitted when recording is cancelled
- **complete** (() => void) - Event emitted when user has selected finish recording
- **insert-click** ((video: LoomVideo) => void) - Event emitted when insert CTA has been selected—`video` arg is `LoomVideo` available after recording
- **lifecycle-update** ((state: SDKState) => void) - Event emitted when lifecycle state change with `SDKState` as arg
- **recording-complete** ((video: LoomVideo) => void) - Event emitted when recording is ended (video upload may be in progress)—`video` arg is `LoomVideo`
- **recording-start** (() => void) - Event emitted when video capture has begun (after 3..2..1 countdown)
- **start** (() => void) - Event emitted when user has selected start recording
- **upload-complete** ((video: LoomVideo) => void) - Event emitted when the recording has finished uploading to Loom—`video` arg is `LoomVideo`
```

--------------------------------

### ButtonEmitterEvents Interface

Source: https://dev.loom.com/docs/record-sdk/details/api

Defines the events that can be listened to on an SDKButtonInterface instance. These events cover various stages of recording and user interactions.

```typescript
interface ButtonEmitterEvents {
  "bubble-drag-end": (pos: Position) => void;
  "bubble-drag-start": (pos: Position) => void;
  "bubble-move": (pos: Position) => void;
  cancel: () => void;
  complete: () => void;
  "insert-click": (video: LoomVideo) => void;
  "lifecycle-update": (state: SDKState) => void;
  "recording-complete": (video: LoomVideo) => void;
  "recording-start": () => void;
  start: () => void;
  "upload-complete": (video: LoomVideo) => void;
}

```

--------------------------------

### linkReplace

Source: https://dev.loom.com/docs/embed-sdk/api

Replaces Loom links within specified DOM nodes with their embedded video counterparts. This method automatically handles the conversion of links to embeds on a webpage.

```APIDOC
## linkReplace

### Description
Replaces Loom links with the embedded video at nodes matching the selector.

### Method Signature
```
linkReplace: (selector?: string, options?: Option, target?: Document) => void;
```

### Parameters
#### Arguments
- **selector** (string) - Optional - Wrapping selector which contains Loom link.
- **options** (Option) - Optional - See `Option` type for details.
- **target** (Document) - Optional - Wrapping node to target, defaults to `Document`.

### Response
- **void**
```

--------------------------------

### SDKState Enum

Source: https://dev.loom.com/docs/record-sdk/details/api

Represents the lifecycle state of the record SDK. Use this enum to track or manage the SDK's current operational phase.

```typescript
enum SDKState {
  Closed = "closed",
  PreRecording = "pre-recording",
  ActiveRecording = "active-recording",
  PostRecording = "post-recording",
}

```

--------------------------------

### SDKState Enum

Source: https://dev.loom.com/docs/record-sdk/details/api

An enum representing the different lifecycle states of the record SDK.

```APIDOC
## SDKState Enum

### Description
An enum of the lifecycle state of the recordSDK.

### Members
- **closed**: SDK has loaded but is not being used
- **pre-recording**: Pre-recording panel is open
- **active-recording**: Recording is in progress (pausing recordings is a part of this state)
- **post-recording**: Recording has finished and preview modal is open
```

--------------------------------

### Position

Source: https://dev.loom.com/docs/record-sdk/details/api

Position of an element on the screen—specifically used for the camera bubble.

```APIDOC
## Position

### Description
Position of an element on the screen—specifically used for the camera bubble.

### Properties
- **x** (number) - x coordinate in pixels—0 is bottom of the screen
- **y** (number) - y coordinate in pixels—0 is left-most side of the screen
```

--------------------------------

### ButtonFn Type Signature

Source: https://dev.loom.com/docs/record-sdk/details/api

Defines the signature for the ButtonFn, which connects a DOM element to the recordSDK. It accepts an optional object with an element and deprecated hooks, returning an SDKButtonInterface.

```typescript
type ButtonFn = (a?: {
  element?: HTMLElement;
  hooks?: Hooks;
}) => SDKButtonInterface;

```

--------------------------------

### Replace Loom URLs in Text

Source: https://dev.loom.com/docs/embed-sdk/api

Finds and replaces Loom URLs within a given string with their corresponding embed HTML. This is useful for dynamically embedding videos in text content.

```typescript
textReplace: (textString: string, options?: Option) => Promise<string>;
```

--------------------------------

### textReplace

Source: https://dev.loom.com/docs/embed-sdk/api

Finds and replaces Loom URLs within a given string with their corresponding embed HTML code. This is useful for processing text content that may contain Loom links.

```APIDOC
## textReplace

### Description
Find and replaces Loom URLs with the embed code in a given string.

### Method Signature
```
textReplace: (textString: string, options?: Option) => Promise<string>;
```

### Parameters
#### Arguments
- **textString** (string) - Required - String which contains Loom URL links that should be replaced with embed HTML.
- **options** (Option) - Optional - See `Option` type for details.

### Response
- **Promise<string>** - A string where Loom URL links are replaced with embed HTML.
```

--------------------------------

### Replace Loom Links with Embeds

Source: https://dev.loom.com/docs/embed-sdk/api

Replaces Loom links within specified HTML nodes with embedded video players. This method targets nodes matching a given selector.

```typescript
linkReplace: (selector?: string, options?: Option, target?: Document) => void;
```

--------------------------------

### Insert Video Embed Player in TypeScript

Source: https://dev.loom.com/docs/record-sdk/getting-started

Inserts the HTML embed player into a target DOM element. This function is useful for directly manipulating the DOM to display the video.

```typescript
function insertEmbedPlayer(html: string) {  
  const target = document.getElementById("target");  
  
  if (target) {  
    target.innerHTML = html;  
  }
}

// ...  
  
sdkButton.on("insert-click", async (video) => {  
  const { html } = await oembed(video.sharedUrl, { width: 400 });  
  insertEmbedPlayer(html);
});
```

--------------------------------

### Insert Video Embed Player in JavaScript

Source: https://dev.loom.com/docs/record-sdk/getting-started

Inserts the HTML embed player into a target DOM element. This function is useful for directly manipulating the DOM to display the video.

```javascript
function insertEmbedPlayer(html) {  
  const target = document.getElementById("target");  
  
  if (target) {  
    target.innerHTML = html;  
  }
}

// ...  
  
sdkButton.on("insert-click", async (video) => {  
  const { html } = await oembed(video.sharedUrl, { width: 400 });  
  insertEmbedPlayer(html);
});
```

--------------------------------

### Required Token Payload Structure

Source: https://dev.loom.com/docs/record-sdk/details/key-pair-authentication/key-pair-auth

This JSON structure defines the header and payload for a JSON Web Token (JWS) used in key-pair authentication. The header specifies the signing algorithm (RS256), and the payload includes issuance time, issuer (your public app ID), and expiration time.

```json
{ // Header  
  "alg": "RS256"  
}  
{ // Payload  
  "iat": 1639493265,  
  "iss": "<PUBLIC_APP_ID>",  
  "exp": 1639493385  
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.