> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getstrada.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Getting Started
Add the Strada chat widget to your website by including the Web SDK script on your pages.
Need help with implementation? Contact your Strada team for guidance. Your development team is responsible
for the final integration.
## Script Tag
For all website pages where you want your chat widget to appear, paste the following code within the `` tags. Replace `` and `` with your organization and agent IDs.
```html theme={null}
```
You can find your Organization ID and Agent ID in the Strada dashboard.
## That's it!
You should now see a small chat button on the bottom right corner of your website. Click the button to open the chat widget.
The Strada Web SDK also supports a rich set of actions and settings that you can use to customize the
behavior of your widget. For example, you might want to delay the launch of your widget until a certain
event, pass user metadata, or authenticate users. The [Web SDK reference](/sdks/web/sdk-api-reference)
covers all of these options and more.
## Testing Mode
To test your chat widget, you can set the `debug` property to `true` in the `metadata` object. This will mark the chat as a test chat and it will be included in the test chats list.
```html theme={null}
```
## Delay Widget Loading
To defer widget initialization until a specific event occurs, enable lazy mode by setting the `lazy` property to `true`:
```html theme={null}
```
With lazy mode enabled, manually initialize the SDK by calling `window.stradaChat.start()`. Any setting normally configured in `window.stradaSettings` can be passed here:
```javascript theme={null}
window.stradaChat.start({
organizationId: 'your-org-id',
agentId: 'your-agent-id',
metadata: {
userId: '12345',
accountType: 'premium'
}
});
```
## Pass User Data
Use `metadata` to pass information about a user to Strada for attribution and analytics purposes. This data is not accessible to the AI agent during conversations.
```html theme={null}
```
To change these values after the widget has been initialized, pass them to the [open()](/sdks/web/sdk-api-reference#open) action.
Meta field keys should not include whitespace, emojis, or special characters.
## Pass Agent Variables
Use `agentVariables` to inject information into your agent's chat conversations. Unlike `metadata`, these variables are accessible to the AI agent and can be used to customize agent behavior, provide context, or personalize the conversation experience.
```html theme={null}
```
## User Authentication
Implement secure user verification by providing a `getUserToken` function that returns a JWT token. This establishes an authenticated identity for each chat session.
```html theme={null}
```
The `getUserToken` function should return a Promise that resolves to a JWT token string, or `null` if
authentication should be skipped.
## Hide the Floating Button
The widget displays a floating button by default. To manage chat visibility through your own UI elements instead, set `hideButton` to `true`:
```html theme={null}
```
Then use the [open](/sdks/web/sdk-api-reference#open) action to open the chat programmatically:
```javascript theme={null}
// Open the chat when user clicks a custom button
document.getElementById('my-chat-button').addEventListener('click', () => {
window.stradaChat.open();
});
```
## Mount Widget in a Custom Container
By default, the widget mounts to `document.body` and appears as a floating overlay (bottom-right). To embed it inside a specific part of your layout—for example, a sidebar or a dedicated chat panel—use `parentElement` with a CSS selector:
```html theme={null}
```
The container must have `position: relative` and no padding or margin so the widget can fill it. Use `hideButton: true` and call `stradaChat.open()` from your own UI (e.g. a tab or button) to show the chat. See the [parentElement](/sdks/web/sdk-api-reference#parentelement) API reference for full details.