<aside> 💡 This document is deprecated, please refer to our documentation here: https://docs.explo.co/embedding-documentation/option-1-web-component.

</aside>

Whitelisting Domains

Explo will need to whitelist your development, staging, and production domains to ensure you can use our embedded component. Please reach out to [email protected] to have your domains whitelisted.

Script Tag

Add Explo's script tag to your index.html.

<script src="<https://embeddo.s3-us-west-1.amazonaws.com/bundle.js>"></script>

Web Component

The web component is called explo-dashboard. An example is shown below.

<explo-dashboard
  userGroupToken="<token>"
  dashboardEmbedId="<id>"
  isProduction={true}
  environment="prod"
  variables={JSON.stringify({
    elementX: 'value',
    custom_variable: 15,
  })}>
</explo-dashboard>

Component Attributes

Typescript Users

If you are using TypeScript, define the embedded component within the global namespace. This needs to be defined at the top of each TypeScript file that uses the explo-dashboard component.

declare global {
  // eslint-disable-next-line @typescript-eslint/no-namespace
  namespace JSX {
    interface IntrinsicElements {
      'explo-dashboard': any;
    }
  }
}

https://explo.co/notion-analytics/Explo Help Desk - Embedded Component Documentation