Embedding the Design Lab

Embedding the Design Lab on your website is a simple process. You can follow these steps to integrate it:

We recommend dedicating a full page to the Design Lab for the best experience. However, you can also render it in a dialog window or pop-up. Regardless of how you choose to display the Design Lab—whether as a full-page experience, in a dialog, or in a pop-up—you must always include a <div> element with a specific id attribute. This id is necessary to load the Design Lab in the specified location on your page.

<div id="safsira-design-lab-root"></div>

Importing JavaScript

The next section details how to import the JavaScript file. The goal is to load this js file on the page where you want to show the Design Lab. This file will load the Design Lab on the <div> element explained in the previous section.

https://cdn.safsira.com/design-lab/safsira-design-lab.es.js

Please refer to your framework documentation if you have questions on loading JavaScript files.

Examples:

Below is an example of how to load the Design Lab on a HTML page.

ℹ️

The config variable should be filled with the necessary information to load the Design Lab (more on that in the next section). Also, you can see the <div> element with the id attribute already within the <body> of the document.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Design Lab</title>
    <script type="module">
      const fetchDesignLab = async () => {
        const DesignLab = await import('https://cdn.safsira.com/design-lab/safsira-design-lab.es.js');
 
        const config = {
          ...
        };
 
        DesignLab.default(config);
      };
 
      await fetchDesignLab();
    </script>
  </head>
  <body>
    <div id="safsira-design-lab-root"></div>
  </body>
</html>

Remove API Key Initialize Design Lab