# Embed ThoughtSpot search bar

> For the complete documentation index, see [llms.txt](https://developers.thoughtspot.com/docs/llms.txt)

Source: https://developers.thoughtspot.com/docs/embed-searchbar

# Embed ThoughtSpot search bar

If you want to embed just the ThoughtSpot search bar in applications such as Google Sheets, use the `SearchBarEmbed` package in the Visual Embed SDK.

The `SearchBarEmbed` package allows you to embed the following components:

-   Search bar  
    
    ThoughtSpot search bar that allows passing search tokens. The search bar is responsive and can be adjusted to fit the screen width of your web application or mobile app.
    
-   **Get data** button
    
    The **Get data** button returns the search result as raw data. Your host application can use this data as a payload and render it in your app.
    
-   Data panel  
    The data sources panel allows users to choose the data sources to search from. The current version of the SDK doesn’t allow you to hide or collapse the data panel.
    

## Import the SearchBarEmbed package

Import the `SearchBarEmbed` SDK library to your application environment:

**npm**

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

**ES6**

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

## Initialize the SDK

[Initialize the SDK]({{navprefix}}/{{getting-started}}#initSdk) and define authentication attributes.

## Create an instance of the SearchBarEmbed class

Create an instance of the SearchBarEmbed object and customize your search page view.

```JavaScript
const searchBarEmbed = new SearchBarEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    },
    dataSources: ['<%=datasourceGUID%>'],
    searchOptions: {
        searchTokenString: '<TML-query-string>',
        executeSearch: true,
    },
});
```

For more information about the search bar embed object, classes, methods, interface properties, and enumeration members, see the following pages:

-   [SearchBarEmbed]({{navprefix}}/{{SearchBarEmbed}})
    
-   [SearchBarViewConfig]({{navprefix}}/{{SearchBarViewConfig}})
    
-   [Actions]({{navprefix}}/{{Action}})
    

## Register, handle, and trigger events

Register event listeners.

```JavaScript
searchBarEmbed.on(EmbedEvent.Init, showLoader)
searchBarEmbed.on(EmbedEvent.Load, hideLoader)
searchBarEmbed.on(EmbedEvent.Data, payload => {
    console.log('data', payload);
})
```

By default, ThoughtSpot returns 1000 rows of data for a given query when a user clicks the **Get data** button. To get more rows of data, you can subscribe to the `GetDataClick` event and trigger a response payload from the search data API call.

The following example shows how to register the `GetDataClick` event and trigger an API call:

```JavaScript
const getQueryResult = async (query: string, sourceName: string) => {
  const baseUrl = 'test.thoughspot.com';
  const r = await fetch(`${baseUrl}/api/rest/2.0/searchdata`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      query_string: query,
      logical_table_identifier: sourceName,
      data_format: 'COMPACT',
      record_size: 1000000,
    }),
    credentials: 'include',
  });
  const data = await r.json();
  return {
    colNames: data.contents[0].column_names,
    rows: data.contents[0].data_rows,
  };
};

tsembed.on(EmbedEvent.GetDataClick, ()=>{
     tsembed.trigger(HostEvent.GetTML).then(async (data) => {
      const query = data.answer.search_query;
      if (!query) {
        return;
      }
      const source = data.answer.tables[0].id;
      const { colNames, rows } = await getQueryResult(query, source);
      console.log(colNames, rows);
    });
})
```

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

-   [HostEvent]({{navprefix}}/{{HostEvent}})
    
-   [EmbedEvent]({{navprefix}}/{{EmbedEvent}})
    
-   [Events and app integration]({{navprefix}}/{{embed-events}})
    

## Render the embedded search

```JavaScript
searchBarEmbed.render();
```

## Test your embedding

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

![Search bar embed](/docs/doc-images/images/searchbarembed.png)

Run a search query and verify the results.