Embed without SDK

Embed without SDK

The Visual Embed SDK is the most convenient way to embed different types of ThoughtSpot content. However, if your portal or system does not have a way to use the Visual Embed SDK JavaScript library, you can embed ThoughtSpot components using an iFrame element. For example, to embed a Liveboard or visualization in portals such as Salesforce, SharePoint, Google Sites, or WordPress, you may want to use an iFrame element.

Authentication and security settings for iFrame embedding🔗

All embedded ThoughtSpot objects require authentication. If the host application does not allow custom Javascript, you can use one of the following authentication methods:

  • Basic authentication with username and password

  • SSO authentication

When doing a direct embed, SAML is typically the only SSO mechanism that can be implemented. If you cannot use the Visual Embed SDK, this typically means the environment you are embedding ThoughtSpot within has restrictions on using JavaScript, which limits the ability to use the Trusted Authentication method for SSO. Any sign-in method to ThoughtSpot creates a session, stored in the browser cookies, so if your platform has a way to complete the trusted authentication flow at some point, even on a different page from where the direct iFrame embed of a Liveboard is, it may be a viable SSO authentication mechanism.

SAML SSO authentication🔗

To enable SAML SSO authentication for an iFrame embedded instance:

  1. On your ThoughtSpot instance, configure SAML SSO.

  2. Configure your IdP to allow the host domain to embed the IdP’s authentication page.

    Each IdP has a specific way to enable this setting. For example, for Okta, you can use the Enable iframe embedding option in Okta’s Admin console.

Add host domain to the CSP allowlist🔗

If you have access to the Security settings page in the Develop tab, you can add your host domain to CSP and CORS allowlists. For example, if you are embedding a ThoughtSpot object in a Google site, you can add sites.google.com to the allowlists.

If you are using the new experience, the Developer will be in the Application switcher the app switcher menu.

If you don’t have access to Develop > Security settings page, contact ThoughtSpot support to update CSP settings on your instance.

URL for embedding in an iFrame🔗

Apart from the steps described in the following sections, you can generate an iFrame src URL using the HostEvent.GetIframeUrl in the Visual Embed Playground. This event is available in Visual Embed SDK v1.34.0 and can be used on ThoughtSpot instances with 10.4.0.cl or a later release version.

For more information, see GetIframeUrl.

Embed a Liveboard in an iFrame🔗

To embed Liveboard in an iFrame, you need the Liveboard GUID.

Get the Liveboard GUID🔗

To get the Liveboard URL:

  1. Log in to ThoughtSpot.

  2. Navigate to the Liveboard that you want to embed.

  3. Click the share icon.

  4. Click Copy link.

  5. Note the GUID of the Liveboard.

URL format for Liveboard embed🔗

Note the URL format to embed a Liveboard in an iFrame:

https://{ThoughtSpot-Host}/?embedApp=true#/embed/viz/{Liveboard_id}

You can also add additional flags and runtime filters and parameter overrides as query parameters in the embed URL.

Embed a visualization in an iFrame🔗

To embed Liveboard in an iFrame, you need the Liveboard and visualization GUIDs.

Get the visualization GUID🔗

To get the visualization URL:

  1. Navigate to the Liveboard that contains the visualization you want to embed.

  2. On the visualization tile, click the More the more options menu and select Copy link.

  3. Note the GUIDs of the Liveboard and visualization.

URL format for visualization embed🔗

The URL format to embed a visualization in an iFrame is:

https://{ThoughtSpot-Host}/?embedApp=true#/embed/viz/{Liveboard_id}/{visualization_id}

You can also add additional flags, runtime filters, and Parameter overrides as query parameters in the embed URL.

Embed ThoughtSpot Search page in an iFrame🔗

To ThoughtSpot Search in an iFrame, the data object GUID is required. The data source can be Worksheet, Table, or View.

To find the GUID of the datasource object:

  1. Log in to your ThoughtSpot application instance:

  2. Navigate to Data.

    If you are using the new experience, click the Application switcher the app switcher menu > Data workspace

    https://<your-thoughtspot-instance>/#/data/tables/

  3. On the Data > Home page, click on data object type. For example, if the data source object is a Worksheet, click Worksheets and open the Worksheet.

  4. In the address bar of the web browser, note the GUID of the data object. For example, in the following address string, the GUID is 9d93a6b8-ca3a-4146-a1a1-e908b71b963f:

    https://<your-thoughtspot-instance>/#/data/tables/9d93a6b8-ca3a-4146-a1a1-e908b71b963f

  5. Copy the GUID.

URL format for Search page embed🔗

Note the URL format to embed ThoughtSpot Search in an iFrame:

https://{ThoughtSpot-Host}/?embedApp=true&dataSources="cd252e5c-b552-49a8-821d-3eadaa049cca"#/answer

If you want to pre-define the search criteria, you can specify the search token string and executeSearch flag in the URL as shown in this example:

https://{ThoughtSpot-Host}/?embedApp=true&dataSources="cd252e5c-b552-49a8-821d-3eadaa049cca"&searchTokenString=[sales][region]&executeSearch=true&isSearchEmbed=true#/answer

You can also add additional flags, runtime filters, and Parameter overrides as query parameters in the embed URL.

URL format for Natural Language Search embed🔗

To embed the Natural Language Search page, add the Worksheet GUID to the iFrame URL:

https://{ThoughtSpot-Host}/?embedApp=true&isSageEmbed#/embed/eureka?worksheet=cd252e5c-b552-49a8-821d-3eadaa049cca

If you want to pre-define the search query string, you can specify the query string in the URL as shown in this example:

https://{ThoughtSpot-Host}/?embedApp=true&isSageEmbed#/embed/eureka?worksheet=cd252e5c-b552-49a8-821d-3eadaa049cca&query="total sales by country"&executeSearch=true

See also Additional flags to customize the embedded view.

Embed full application in an iFrame🔗

To embed a ThoughtSpot application page, specify the page ID.

  • Home page

    https://{ThoughtSpot-Host}/?embedApp=true#/home

  • Liveboards page

    https://{ThoughtSpot-Host}/?embedApp=true#/pinboards

  • Data page

    https://{ThoughtSpot-Host}/?embedApp=true#/data/tables

  • SpotIQ page

    https://{ThoughtSpot-Host}/?embedApp=true#/insights/results

  • Answers page

    https://{ThoughtSpot-Host}/?embedApp=true#/answers

  • To embed the full ThoughtSpot application with top navigation bar, set the primaryNavHidden to false:

    https://{ThoughtSpot-Host}/?embedApp=true&primaryNavHidden=false&profileAndHelpInNavBarHidden=true#/home

See also Additional flags to customize the embedded view.

Apply runtime overrides (Optional)🔗

Runtime filters

To apply runtime filters, add the column name, operator, and value as query parameters in the URL.

For example, to filter michigan in the State columns, pass these values as filter parameters in the URL:

Liveboard embed

https://{ThoughtSpot-host}/?embedApp=true&p&col1=State&op1=EQ&val1=michigan#/embed/viz/{Liveboard_id}

Visualization embed

http://{ThoughtspotHost}/?embedApp=true&col1=State&op1=EQ&val1=michigan#/embed/viz/{Liveboard_id}/{visualization_id}

Search embed

https://{ThoughtSpot-Host}/?embedApp=true&dataSources="cd252e5c-b552-49a8-821d-3eadaa049cca"&col1=State&op1=EQ&val1=michigan#/embed/answer

Runtime Parameters

To apply Parameter overrides, add the Parameter name and value as query parameters in the URL:

Liveboard embed

https://{ThoughtSpot-host}/?embedApp=true&param1=Discount&paramVal1=0.25#/embed/viz/{Liveboard_id}

Visualization URL embed

https://{ThoughtSpot-host}/?embedApp=true&param1=Discount&paramVal1=0.25#/ embed/viz/{Liveboard_id}/{visualization_id}

Search embed

https://{ThoughtSpot-Host}/?embedApp=true&param1=Discount&paramVal1=0.25&dataSources= ["cd252e5c-b552-49a8-821d-3eadaa049cca"]&col1=State&op1=EQ&val1=michigan#/embed/answer

Note

The Natural Language Search component does not support runtime overrides.

Feature flags and query parameters to customize the embedded view🔗

To customize ThoughtSpot components embedded in an iFrame, ThoughtSpot provides additional flags that you can pass as query parameters in the iFrame embedding URL.

ParameterDescription

dataSources

Array of strings. GUID of the data source object. Doesn’t allow multiple values in the array.

dataSourceMode

String. Defines if the data panel on the Search page should be shown in the expanded or collapsed mode. Allowed values are:

  • expand shows the Data panel

  • collapse Collapses Data panel

disableAction

Array of strings. Disables menu actions in the embedded view. For more information, see Actions.

disableHint

String. Reason for disabling a menu action.

hideAction

Array of strings. Hides menu actions in the embedded view. See Actions for allowed values.

hideTabs

Array of strings. GUIDs of the Liveboard tabs to hide in the embedded Liveboard view.

isFullHeightPinboard

Boolean. If set to true, the embedded object container dynamically resizes according to the height of the Liveboard.

isProductTour

Boolean. Disables the in-product walkthroughs in the embedded view.

orgSwitcherHidden

Boolean. Hides the Orgs drop-down in the full application embedded view.

primaryNavHidden

Boolean. By default, the top navigation bar is hidden in the full application embedded view. You can use this flag to show or hide the top navigation bar when embedding full ThoughtSpot experience.

profileAndHelpInNavBarHidden

Boolean. Hides the user profile and help menu (?) icons in the full application embedded view.

query

String. Search query string in the natural language format. You can use this parameter to define a query string when embedding the Natural Language Search component.

searchTokenString

Array of strings. Array of search keywords. For example, [sales][region]. For Natural Language Search embed, use query.

worksheet

String. GUID of the Worksheet object to be used for Natural Language Search queries.

visibleAction

Array of strings. Lists the actions to show in the embedded view. See Actions for allowed values.

visibleTabs

Array of strings. GUIDs of the Liveboard tabs to show in the embedded Liveboard view.

You can also use the Visual Embed Playground in the Develop tab to customize, enable, or disable features in the embedded view and inspect the code to copy the URL.

iFrame embedding

To copy the feature flags and query parameters, go to Network > Doc > Payload > Query String Parameters.

iFrame embedding

For a complete list of feature flags and parameters, see the following pages:

iFrame embedding Examples🔗

Simple embedding in Salesforce🔗

If you have configured ThoughtSpot to use the same SAML provider as a Salesforce instance, you can create a simple Visualforce page that can embed ThoughtSpot Liveboards or individual visualizations.

First, as a developer, select Create a New Visualforce Page.

The following code example can be used to define the new page. It defines the iFrame, with the ThoughtSpot URL using a runtime filter to personalize the results to the Salesforce user:

<apex:page standardController="Account" tabStyle="Account">
<apex:pageBlock title="ThoughtSpot">
<apex:iframe src="https://{thoughtspot-server}/?embedApp=true#/embed/viz/{Liveboard_id}/{visualization_id}/?col1={field_name}&op1=EQ&val1={!account.Name}" frameborder="0" height="690" width="100%">
</apex:iframe>
</apex:pageBlock>
</apex:page>

Note that the {!account.Name} is a Salesforce APEX variable. The other curly braces represent permanent values from your ThoughtSpot instance that you would hardcode into the APEX page.

More complex integrations to Salesforce, utilizing the Visual Embed SDK, can be achieved using Lightning components. For additional integration beyond what is described in this article, contact your ThoughtSpot Support.

Other methods of embedding without SDK🔗

  1. Create a ThoughtSpot plugin for your hosting platform, for example, SharePoint, WordPress. In the plugin context, the platform can provide more flexibility for adding custom Javascript.

  2. Create a proxy to forward requests from the embedded iFrame to Thoughtspot after adding the necessary authentication.

  3. Use Liveboard REST API to pull only the data values and then render them in your app.

  4. For mobile apps, it’s easier to use the Liveboard REST API to pull only the data values and then render them using a table or charting library native to the mobile platform.