# Embed without SDK > For the complete documentation index, see [llms.txt](https://developers.thoughtspot.com/docs/llms.txt) Source: https://developers.thoughtspot.com/docs/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 into applications such as 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]({{navprefix}}/{{configure-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]({{navprefix}}/{{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 located, 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]({{navprefix}}/{{configure-saml}}#admin-portal). 2. [Configure your IdP]({{navprefix}}/{{configure-saml}}#idp-config) 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](https://help.okta.com/en/prod/Content/Topics/Settings/settings-customization-general.htm) 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]({{navprefix}}/{{security-settings}}#csp-viz-embed-hosts) and [CORS]({{navprefix}}/{{security-settings}}#cors-hosts) 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. ## 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](https://developers.thoughtspot.com/docs/Enumeration_HostEvent#_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]({{navprefix}}/{{embed-without-sdk}}#_feature_flags_and_query_parameters_to_customize_the_embedded_view) and [runtime filters and parameter overrides]({{navprefix}}/{{embed-without-sdk}}#rtOverridesIframe) 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](/docs/doc-images/images/icon-more-10px.png) 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]({{navprefix}}/{{embed-without-sdk}}#_feature_flags_and_query_parameters_to_customize_the_embedded_view), [runtime filters, and Parameter overrides]({{navprefix}}/{{embed-without-sdk}}#rtOverridesIframe) 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 Model, Table, or View. To find the GUID of the datasource object: 1. Log in to your ThoughtSpot application instance: 2. Navigate to **Data**. `https:///#/data/tables/` 3. On the **Data** > **Home** page, click on data object type. For example, if the data source object is a Model, click **Models** and open the Model. 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:///#/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]({{navprefix}}/{{embed-without-sdk}}#_feature_flags_and_query_parameters_to_customize_the_embedded_view), [runtime filters, and Parameter overrides]({{navprefix}}/{{embed-without-sdk}}#rtOverridesIframe) as query parameters in the embed URL. ### URL format for Natural Language Search embed To embed the Natural Language Search page in the iFrame, use the following URL format: `https://{ThoughtSpot-Host}/?embedApp=true#/embed/insights/create-ai-answer` To load the object with a pre-selected data source object, use the following URL format: `https://{ThoughtSpot-Host}/?embedApp=true&worksheet={Worksheet_id}#/embed/insights/create-ai-answer` To load the object with a pre-defined query to fetch data from a specific Model, use the following URL format: `https://{ThoughtSpot-Host}/?embedApp=true&query={query-string}&worksheet={worksheet_id}&executeSearch=true#/embed/insights/create-ai-answer` See also [Additional flags to customize the embedded view]({{navprefix}}/{{embed-without-sdk}}#_feature_flags_and_query_parameters_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]({{navprefix}}/{{embed-without-sdk}}#_feature_flags_and_query_parameters_to_customize_the_embedded_view). ## Apply runtime overrides (Optional) Runtime filters To apply [runtime filters]({{navprefix}}/{{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}` If the per Org URL feature is enabled on your ThoughtSpot instance, the URL format will be: `https://{ThoughtSpot-host}/?embedApp=true&p&col1=State&op1=EQ&val1=michigan&OrgID=1#/embed/viz/{Liveboard_id}` **Visualization embed** `http://{ThoughtspotHost}/?embedApp=true&col1=State&op1=EQ&val1=michigan#/embed/viz/{Liveboard_id}/{visualization_id}` If the per Org URL feature is enabled on your ThoughtSpot instance, the URL format will be: `http://{ThoughtspotHost}/?embedApp=true&col1=State&op1=EQ&val1=michigan&OrgID=1#/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]({{navprefix}}/{{runtime-parameters}}), add the Parameter name and value as query parameters in the URL: **Liveboard embed** `https://{ThoughtSpot-host}/?embedApp=true¶m1=Discount¶mVal1=0.25#/embed/viz/{Liveboard_id}` If the per Org URL feature is enabled on your ThoughtSpot instance, the URL format will be: `https://{ThoughtSpot-host}/?embedApp=true¶m1=Discount¶mVal1=0.25&OrgID=1#/embed/viz/{Liveboard_id}` **Visualization URL embed** `https://{ThoughtSpot-host}/?embedApp=true¶m1=Discount¶mVal1=0.25#/ embed/viz/{Liveboard_id}/{visualization_id}` If the per Org URL feature is enabled on your ThoughtSpot instance, the URL format will be: `https://{ThoughtSpot-host}/?embedApp=true¶m1=Discount¶mVal1=0.25&OrgID=1#/ embed/viz/{Liveboard_id}/{visualization_id}` **Search embed** `https://{ThoughtSpot-Host}/?embedApp=true¶m1=Discount¶mVal1=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. ## URL format with the per Org feature If the per Org URL feature is enabled on your ThoughtSpot instance, a sample URL format will be: **Liveboard embed** `https://{ThoughtSpot-Host}/?embedApp=true&orgId=1#/embed/viz/{Liveboard_id}` **Visualization embed** `https://{ThoughtSpot-Host}/?embedApp=true&orgId=1#/embed/viz/{Liveboard_id}/{visualization_id}` **Search Embed** `https://{ThoughtSpot-Host}/?embedApp=true&dataSources="cd252e5c-b552-49a8-821d-3eadaa049cca"&orgId=1#/answer` ## 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. | Parameter | Description | | --- | --- | | `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]({{navprefix}}/{{Action}}). | | `disableHint` | _String_. Reason for disabling a menu action. | | `hideAction` | _Array of strings_. Hides menu actions in the embedded view. See [Actions]({{navprefix}}/{{Action}}) 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 data source object to be used for Natural Language Search queries. | | `visibleAction` | _Array of strings_. Lists the actions to show in the embedded view. See [Actions]({{navprefix}}/{{Action}}) 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](/docs/doc-images/images/iframe-embedURL.png) To copy the feature flags and query parameters, go to **Network** > **Doc** > **Payload** > **Query String Parameters**. ![iFrame embedding](/docs/doc-images/images/iframe-embed.png) For a complete list of feature flags and parameters, see the following pages: - [SearchViewConfig]({{navprefix}}/{{SearchViewConfig}}) - [LiveboardViewConfig]({{navprefix}}/{{LiveboardViewConfig}}) - [AppViewConfig]({{navprefix}}/{{AppViewConfig}}) ## iFrame embedding example ### Simple embedding in Web page If you have configured ThoughtSpot to use the same SAML provider as your web application, you can create a simple html page to seamlessly embed a ThoughtSpot Liveboard or individual visualizations. 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 show data from a specific region: ```html ThoughtSpot Liveboard iFrame Embed

ThoughtSpot Liveboard iFrame Embed

``` > **NOTE:** Variable substitution required {thoughtspot-server}. Your ThoughtSpot host URL. {field\_name} represents the column from your ThoughtSpot model to be filtered. {field\_value} sets the value from the column to filter on {org\_id}. If using Orgs in ThoughtSpot, provide your Org identifier. If not using Orgs, set the ID to 0. {liveboard\_guid}. Your Liveboard identifier. ## 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]({{navprefix}}/{{pinboarddata}}) 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]({{navprefix}}/{{pinboarddata}}) to pull only the data values and then render them using a table or charting library native to the mobile platform.