Embed Natural Language Search

Table of Contents

Natural Language Search components
Get started
Customize embedded view

ThoughtSpot provides the SageEmbed SDK package to embed Natural Language Search experience in your embedding application. ThoughtSpot Natural Language Search supports the following features:

Ability to pass search text in natural language format as query string
AI-generated sample Answers
AI-suggested popular queries

Natural Language Search components🔗

The SageEmbed package allows you embed the following Search components in your application:

Search bar that supports natural language queries

Unlike the token-based Search, the Search bar in the Natural Language Search interface allows you to type questions in the natural language format. Users can also select popular queries suggested by ThoughtSpot.
Worksheet selector
Allows selecting a Worksheet as data source for search queries. The AI Answer Search must be enabled on the Worksheet for search queries to return AI-generated Answers.
Sample questions
The sample questions panel shows the AI-suggested search queries and Answers. To see AI generated answers, select an AI-enabled worksheet.
Answer page
The API generated Answer page shows chart or table and an Edit button to modify the search query. The Answer page also includes a feedback widget for users to send feedback.

Get started🔗

Get started with embedding Natural Language Search and complete the steps described in the following sections

Import the SageEmbed package🔗

Import the SageEmbed SDK library to your application environment:

npm

import {
    SageEmbed,
    AuthType,
    init,
    prefetch,
    EmbedEvent,
    HostEvent
}
from '@thoughtspot/visual-embed-sdk';

ES6

<script type = 'module'>
    import {
        SageEmbed,
        AuthType,
        init,
        prefetch,
        EmbedEvent
    }
from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';

Initialize the SDK🔗

Initialize the SDK and define authentication attributes.

Create an instance of the SageEmbed class🔗

Create an instance of the SageEmbed object and customize your Search page view.

const sageEmbed = new SageEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    },
    dataSources: ['<%=datasourceGUID%>'],
    searchOptions: {
        searchQuery: '<search text>',
        executeSearch: true,

    },
});

Register, handle, and trigger events🔗

 sageEmbed.on(EmbedEvent.Init, showLoader)
 sageEmbed.on(EmbedEvent.Load, hideLoader)

For more information about event types, see the following pages:

Render the embedded search🔗

sageEmbed.render();

Test your embedding🔗

Load the embedded object in your app. If the embedding is successful, you will see the following page:

Type a question or select a popular query, and verify the results.

Customize embedded view🔗

The SageEmbed SDK allows customizing Natural Language Search experience in the embedded view. The SageViewConfig interface includes several parameters to customizing the Natural Language Search page, enable or disable Worksheet selection, show or hide popular queries and sample questions.

To preview the Natural Language Search embed and customization features, use the Visual Embed Playground.

For more information about Natural Language Search components, interface objects, properties, methods, and enumeration members, see the following pages: