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.

To embed ThoughtSpot objects in an iFrame, follow the steps described in this article.

Get the embed link🔗

To embed ThoughtSpot objects in an iFrame, you need the embed URL.

  • To get the embed link for a Liveboard:

    1. Log in to ThoughtSpot.

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

    3. Click the More the more options menu, and select Copy embed link.

    4. Note the GUID of the Liveboard.

Note

The Copy embed link menu action is available only in Liveboard classic experience. If you are using the new Liveboard experience, use the Copy link button in the Liveboard Share dialog to copy the Liveboard link.

  • To get the embed link for a visualization:

    1. Navigate to the table or chart.

    2. Click More the more options menu in the upper right corner of the table or chart.

    3. If you are using Liveboard classic experience, click Copy embed link.

      If new Liveboard experience is enabled on your instance, click Copy link and then copy the link under Copy embed link.

If you have access to the Develop tab in the ThoughtSpot UI, you can use the Playground to obtain the URL for iFrame embed.

  1. Go to Develop > Playground > Visual embed

  2. Select an object to embed.

  3. Configure the parameters for the embedded view.

  4. Inspect the output and note the URL in iframe src.

Construct the URL🔗

The format for the URL to embed a Liveboard is:

https://{ThoughtspotHost}/?embedApp=true#/embed/viz/{Liveboard_id}

If you want to embed an individual visualization from a Liveboard, you can use the following URL pattern:

https://{thoughtspotserver}/?embedApp=true#/embed/viz/{Liveboard_id}/{visualization_id}

Apply runtime filters (Optional)🔗

To pass filters as URL query parameters, use runtime filters.

For example, to filter michigan in the State column of a visualization on a Liveboard, pass these values as filter parameters in the URL:

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

For more information, see runtime filters.

Authentication and security settings for an embedded instance🔗

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 don’t have access to Develop > Security settings page, contact ThoughtSpot support to update CSP settings on your instance.

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.