Explo | Customer-facing analytics for any platform

Step 1: Import Explo JS library

Add Explo’s script tag to the <head> of your index.html

index.html

<script src="https://embed.explo.co/bundle.js"></script>

Step 2. Embed the web component

What is the web component?

The Explo web component is a custom HTML element. This means that it functions as a native HTML element and can be used in any web development context. You can read more about custom HTML elements here.

Where can I use the component?

Since the web component is a custom HTML element, you can use it in any context:

Directly in an HTML file
Define it in vanilla JS
Any JS web framework: React, Vue, Angular, etc

Embedding the component

The embed component takes in a few different properties. The component is backward-compatible with the previous V1 syntax and V0 syntax, but we recommend using the V2 (embed secret) syntax. Read more about embed secrets here.

<explo-dashboard
    dash-jwt="<your-jwt>"
    updateUrlParams={true}
    isProduction={true}
    environment="prod"
    variables={JSON.stringify({ element1: 'value', element2: 'value2' })}>
</explo-dashboard>

<explo-dashboard
    dash-customer-token="<dashboard_id>:<customer_token>"
    updateUrlParams={true}
    isProduction={true}
    environment="prod"
    variables={JSON.stringify({ element1: 'value', element2: 'value2' })}>
</explo-dashboard>

<explo-dashboard
  userGroupToken="<token>"
  dashboardEmbedId="<id>"
  isProduction={true}
  environment="prod"
  variables={JSON.stringify({ element1: "value", element2: "value2" })}>
</explo-dashboard>

Component Attributes

Attribute Name	Type	Description
dash-jwt (recommended)	string	This is the embed secret (JWT) for the dashboard. We recommend you use this attribute instead of the `dash-customer-token`. Read more about embed secrets here.
dash-customer-token	string	This is a string with two values concatenated together: (1) the `dashboard_id` and (2) the `customer_token`. You should concatenate them with a colon between them like so: `"<dashboard_id>:<customer_token>"`. We recommend you use the `dash-jwt` instead of this attribute, but it is still supported.
updateUrlParams	boolean	This is false if not specified. When true, the page’s URL params will update when the dashboard’s interaction inputs (dropdown, multi-select, etc) change so direct links will have the inputs configured.
disable-stringify-on-string-url-params	boolean	This is false if not specified. When true, string values in URL parameters will not be JSON stringified. Objects and arrays are always stringified. This affects how variables appear in the URL when using interactive elements (dropdowns, multi-select, etc).
isProduction	boolean	This indicates if the web component is being embedded in a staging or production environment. This helps us track the usage of the component so we can share more accurate usage statistics with you.
environment	string	This lets you specify the environment version that the web component is being embedded in: “production”, “staging”, “development”, etc. If environment is not specified, it will render the most recent saved version of the dashboard.
refresh-minutes	number	An optional argument that allows you to tell the dashboard to automatically refresh on a cadence.
variables	string	This argument allows you to pass in values for variables on your dashboard. This will result in default values for any variables and UI dropdowns on the dashboard. Note that you must pass in a stringified JSON object using `JSON.stringify(variablesObject)`, unless you are embedding directly in an HTML file.
locale-code	string	An optional argument that overrides any text localization settings for your team. This will localize your dashboard’s numbers and dates to the desired locale, if supported. Check out support languages here.
currency-code	string	An optional argument that overrides any currency localization settings for your team. This will localize your dashboard’s currency symbols and format to the desired locale, if supported. Check out support currencies here.
analytics-properties	string	This argument allows you to pass in properties that will be passed along with analytics events. Note that you must pass in a stringified JSON object using `JSON.stringify(propertiesObject)`, unless you are embedding directly in an HTML file.
timezone	string	An optional argument that allows you to specify a timezone to display dates in. Valid values can be found here.
disable-editable-section-editing	boolean	An optional argument that disables your user from editing the editable section at the bottom of the dashboard if enabled.
hide-editable-section	boolean	An optional argument that hides the editable section if enabled.
hide-editable-section-edit-controls	boolean	An optional argument that hides the editable section edit controls (toggling editing mode, saving/ discarding changes). Recommended only if using JS events.
theme	string	This is the name of the theme you created in the custom styles tab
id	string	An optional argument that allows you to uniquely identify this dashboard if you have multiple on the same page. Used in Custom JS Events

Typescript Type Definition

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. You may need to exclude this block from your lint rules (e.g. @typescript-eslint/no-namespace)

declare global {
    namespace JSX {
        interface IntrinsicElements {
            'explo-dashboard': unknown;
        }
    }
}

Passing in Variables

You can see how to do that here.

Hide Elements

You can hide elements on your dashboard by passing a hide parameter into the variables of your embed like so:

variables={JSON.stringify({ "element_name.hide": "true"})}>

Exclude Dates

You can also restrict the available dates on a dashboard by passing in a min and max date to each date picker element in the variable section like so:

variables={JSON.stringify({
"date_range_elem_id.maxDate": "<ISO DATE>",
"date_range_elem_id.minDate": "<ISO DATE>"}
)}>

Event-Based Updates

You are also able to pass events to the Explo web component without reloading the entire dashboard. Below is an example of passing a hide element event to a web component. See here for more information on Custom JS Events.

const event = new CustomEvent('updateExploDashboardVariable', {
    detail: {
      varName: "data_table_1.hide",
      value: "true"
    }
  });
  window.dispatchEvent(event);

Home

Customers

Data

Dashboards

Report Builders

Embedding Documentation

Data Share

AI Features

General Features

Managing Permissions

Security

Option 1: Web Component

Step 1: Import Explo JS library

Step 2. Embed the web component

What is the web component?

Where can I use the component?

Embedding the component

Component Attributes

Typescript Type Definition

Passing in Variables

Hide Elements

Exclude Dates

Event-Based Updates

​Step 1: Import Explo JS library

​Step 2. Embed the web component

​What is the web component?

​Where can I use the component?

​Embedding the component

​Component Attributes

​Typescript Type Definition

​Passing in Variables

​Hide Elements

​Exclude Dates

​Event-Based Updates

Step 1: Import Explo JS library

Step 2. Embed the web component

What is the web component?

Where can I use the component?

Embedding the component

Component Attributes

Typescript Type Definition

Passing in Variables

Hide Elements

Exclude Dates

Event-Based Updates