# Initializing ThoughtSpot Embed SDK

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

Source: https://developers.thoughtspot.com/docs/tutorials/react-components/lesson-01

# Initializing ThoughtSpot Embed SDK

The Visual Embed SDK provides an `init()` **function** that handles authentication and other shared configuration options for all SDK components.

In your code, you need to call `init()` before any other ThoughtSpot components are loaded.

In the tutorial app, which is **only** displaying ThoughtSpot content, the `init()` function is run as soon as the app is loaded, in the `layout.tsx` file, via the `ThoughtSpotEmbed` component.

The [various configurations](https://developers.thoughtspot.com/docs/Interface_EmbedConfig) can be used exactly as defined within the standard Visual Embed SDK documentation, because the `init()` function is called within the TypeScript code of the component page, outside of the React component portions defined in JSX/TSX.

## components/ThoughtSpotEmbed.tsx: running init() one time for all components

The pattern within `[components/ThoughtSpotEmbed.tsx](https://github.com/thoughtspot/embed-example-react-app/blob/main/src/components/ThoughtSpotEmbed.tsx)` is important, because it defines any initial configurations and other functions, and runs the `init()` function only once.

At the bottom, we run the `tsInitialize()` function once, and then return a `div` with `id=ts-embed` that will be used as the container for any individual ThoughtSpot embed components loaded by the app later:

```tsx
 tsInitialize();

return (
    <div className="w-full h-full">
        <div className="w-full h-full" id="ts-embed">
            {children}
        </div>
    </div>
);
```

The `tsInitialize()` function wraps around the entire process of calling the `init()` function from the Visual Embed SDK.

Please note that authentication has not been implemented in this example. You must be signed into ThoughtSpot already in another tab in your browser. Production-level [authentication methods]({{navprefix}}/{{embed-authentication}}) are covered elsewhere in the documentation.

```typescript
    const tsInitialize = () => {
        console.log("Initializing ThoughtSpot SDK");

        // init() function defines basic configuration and authentication for all ThoughtSpot embed components
        // See https://developers.thoughtspot.com/docs/Interface_EmbedConfig for all  configurations
        const ee = init({
            thoughtSpotHost: constants.tsURL,
            callPrefetch: true,
            customizations: {},
            authType: AuthType.None
            // getAuthToken: () => { return Promise.resolve('{tokenCopiedFromPlayground}'); } ,
            // autoLogin: true,
        } as EmbedConfig);

        // Checks for Auth process completed as expected
        if (ee) {
            ee.on(AuthStatus.SUCCESS, () => {
                console.log("Success");
            })
                .on(AuthStatus.SDK_SUCCESS, () => {
                    console.log("SDK Success");
                })
                .on(AuthStatus.FAILURE, (reason) => {
                    console.log("Failure:  " + reason);
                });
        }
    };
```

> **NOTE:** When running the tutorial app locally, it is expected behavior to see duplicated calls and messages in the browser Developer Tools. Next.js is running in development mode using React Strict Mode, which automatically renders components twice, causing the duplication.

## Common customizations in the init

As mentioned above, [many configuration options](https://developers.thoughtspot.com/docs/Interface_EmbedConfig) can be specified as part of the `init()` function.

Common configurations include [prefetch for better performance]({{navprefix}}/{{prefetch-and-cache}}) and the `[autoLogin: true](https://developers.thoughtspot.com/docs/Interface_EmbedConfig#_autologin)` property when using [Trusted Authentication]({{navprefix}}/{{trusted-authentication}}).

You’ll notice in the app options for some of the most common set of configurations involve [style customizations](https://developers.thoughtspot.com/docs/tutorials/style-customization/tutorial) such as CSS and text string replacement:

```JavaScript
 customizations: {
    style: {
        customCSS: customCss,
    },
    content: {
        strings: stringsCustom
    },
    iconSpriteUrl: iconUrl
}
```

[← Previous]({{navprefix}}/tutorials/react-components/intro) [Next →]({{navprefix}}/tutorials/react-components/lesson-02)