iFrame JavaScript SDK

This JavaScript SDK allows you to seamlessly integrate an iFrame into your application, enabling users to create Heygen avatars without leaving your app.

Integration Steps

1. Import the Script

Include the Heygen iFrame JavaScript SDK in your HTML by adding the following script tag:

<script src="https://static.heygen.ai/js/instant-frame.umd.js"></script>

2. Create an Instance of the iFrame

Initialize the iFrame instance with the following JavaScript code:

const instantAavatarWin = new window.InstantFrame({
  host: "https://app.heygen.com",
});

3. Open and Close the iFrame

Use the methods below to manage the iFrame's visibility:

// Open the iFrame with the token obtained from the create_token API
instantAvatarWin.openWindow(token);

// Close the iFrame
instantAvatarWin.closeWindow();

4. Handle iFrame Events

You can listen to various events emitted by the iFrame. Use the following methods to set up event handlers:

instantAvatarWin.on("open", function () {
  // Code to execute when the iFrame is opened
});

instantAvatarWin.on("close", function () {
  // Code to execute when the iFrame is closed
});

instantAvatarWin.on("submitted", function (resp) {
  // Code to execute when the avatar creation is submitted
  console.log(resp.id); // Log the response ID
});