Integrate Figment

All about integrating Figment, quickstart and whitelisting domains.

Integrate Figment

Figment can be integrated to your Website by simply adding a <div> and <script> tag to the body of the HTML:

<div id="figment"></div>

<script src="<key>&ver=1.0.1"></script>

Inside the first <script>, <key> must be replaced with the customer key we provided. If you choose to let Figment render its output, Figment will render inside the #figment <div> after it is activated.

When rendered, the output size of Figment is dynamically defined by the height and width of the #figment <div>.


Working with Figment is simple. After including the <script> tag, Figment lives in the window namespace of the browser and can be accessed with window.figment.

Below we describe a minimal example for using Figment:

// Arbitrary function that gets a MediaStream
mediaStream = await getMediaStream();

// Check if Figment is loaded successfully
window.addEventListener("FigmentLoaded", function(e) {

  // Pass the mediaStream to Figment
  // Blur background, may be executed before or while Figment is running
  window.figment.setOption('blur_background', 'balanced')
  // Activate Figment
  window.figment.activate().then(() => {
    // Catching the FigmentOutputUpdated event
    window.addEventListener('FigmentOutputUpdated', function (e) {
      // Get the output MediaStream
      let outputMediaStream = window.figment.getOutputMediaStream()
      // Further steps on your end
    }, false);       

Details about how to interface with Figment are provided on the next page.

By default, Figment renders its output inside the #figment <div>,but as of this release, Figment is also able to process a MediaStream end-to-end without rendering the output.

Whitelisting Domains

For security reasons we need to whitelist the core domains that will be used for both testing and production. Once the core domain is whitelisted and added to our Database under your customer key, all sub domains that follow the core format will be automatically whitelisted as well.

Last updated