Embed ThoughtSpot in a mobile app

Embed ThoughtSpot in a mobile app

ThoughtSpot provides the following SDK libraries to help developers embed ThoughtSpot in their mobile apps:

  • React Native Mobile Embed SDK Beta
    Allows developers to embed ThoughtSpot content in iOS and Android mobile apps using React Native resources and a single codebase.

  • Flutter Embed SDK Beta
    Allows embedding ThoughtSpot components in Flutter apps.

  • Swift Embed SDK Beta
    Allows developers to embed ThoughtSpot content in an iOS native app.

  • Android Embed SDK Beta
    Allows developers to embed ThoughtSpot content in an Android native app.

Authentication and security settings🔗

Currently, Mobile Embed SDKs support only cookieless authentication (AuthType.TrustedAuthCookieless) method to authenticate embed users. To handle authentication, you may have to token provider function or use your backend app to fetch a token for trusted authentication. For more information, see the Mobile Embed SDK quickstart guides.

You must also add your embedding app domain to the following allowlists on the Develop > Customizations > Security Settings page in the ThoughtSpot UI.

  • CSP visual embed hosts

  • Permitted iFrame domains

  • CORS whitelisted domains

For information about how to add your domains to CSP and CORS allowlists, see Security Settings.

Mobile embed customization🔗

  • Liveboard and visualization menu customization

  • Style customization

  • Text string and icon customization

Menu customization🔗

By default, the mobile embed views show the following actions.

Default menu actions

  • Add filter (Action.AddFilter)
    Allows adding filters to the embedded Liveboard

  • Filter (Action.CrossFilter)
    Allows applying filters across all visualizations in a Liveboard.

  • Drill down (Action.DrillDown)
    Allows drilling down on a data point in the visualization to get granular details.

  • Personalized view (Action.PersonalisedViewsDropdown)
    The Liveboard personalized views drop-down.

  • Filter action (Action.AxisMenuFilter) in the chart axis or table column customization menu
    Allows adding, editing, or removing filters on a visualization.

  • Edit action (Action.AxisMenuEdit) in the axis customization menu.
    Allows editing the axis name, position, minimum and maximum values of a column.

  • Position action (Action.AxisMenuPosition) in the axis customization menu.
    Allows changing the position of the axis to the left or right side of the chart.

  • Sort action (Action.AxisMenuSort) - Sorts the data in ascending or descending order on a chart or table.

  • Aggregate (Action.AxisMenuAggregate) option in the chart axis or the table column customization menu.
    Provides aggregation options to analyze the data on a chart or table.

  • Conditional formatting menu option (Action.AxisMenuConditionalFormat)
    Allows adding rules for conditional formatting of data points on a chart or table.

  • The Group option (Action.AxisMenuGroup) in the chart axis or table column customization menu.
    Allows grouping data points if the axes use the same unit of measurement and a similar scale.

  • The Remove option (Action.AxisMenuRemove) in the chart axis or table column customization menu.
    Removes the data labels from a chart or the column of a table visualization.

  • The Rename option (Action.AxisMenuRename) in the chart axis or table column customization menu.
    Renames the axis label on a chart or the column header on a table

  • Time bucket option (Action.AxisMenuTimeBucket) in the chart axis or table column customization menu.
    Allows defining time metric for date comparison.

To disable, show, or hide specific menu actions, specify the action IDs with the disabledActions visibleActions or hiddenActions array in your code. For additional information and code samples, refer to the mobile embed Quickstart guides.

Style customization🔗

To customize styles and rebrand your embedded view, use the CSS variables available with the customzation framework. For additional information and code samples, refer to the mobile embed Quickstart guides.

Text string and icon customization🔗

To customize text strings, use the stringIDs and strings objects in the customization interface to override text strings. For more information, see Customize text strings.

For icon customization, you need to find the ID of the icon that you want to replace and then replace it with your SVG. You must also add the domain URL of your icon hosting site to the following CSP allowlists on the Develop > Security Settings page in your ThoughtSpot instance:

Filters and Parameters for embedded Liveboards🔗

For Liveboard embeds in mobile apps, the SDKs allow adding, updating runtime filters and Parameters, and applying individual filters at the visualization level. For more information about filter types, see Filter overview and Runtime overrides.

Events and app interactions🔗

The embedded ThoughtSpot components emit events when they initialize, load, and when users interact with the embedded interface. The mobile embed SDKs provides a set of event handlers to listen to the events emitted from the embedded interface and trigger actions.

For more information about the events framework, see Events and app interactions, Embed Events, and Host Events.

Known limitations🔗

The mobile embed SDKs currently support embedding only Liveboards in mobile apps. The following features will not be available on the embedded Liveboard page in a mobile apps:

  • Personalized views

  • SpotIQ Analysis

  • AI Highlights

  • Renaming and making a copy of a Liveboard

  • Scheduling Liveboard alerts and notifications

  • Exporting or importing Liveboard TML

  • Request Verification

  • ThoughtSpot Sync features

The following Liveboard view configuration parameters are not supported in mobile embeds: