Embed Explo dashboards through a web component
<head>
of your index.html
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 |
explo-dashboard
component. You may need to exclude this block from your
lint rules (e.g. @typescript-eslint/no-namespace)