Skip to main content
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 <head></head> tags. Replace <YOUR-ORGANIZATION-ID> and <YOUR-AGENT-ID> with your organization and agent IDs. 
<script>
  window.stradaSettings = {
    organizationId: '<YOUR-ORGANIZATION-ID>',
    agentId: '<YOUR-AGENT-ID>'
  };
</script>
<script src="https://cdn.getstrada.com/widget/latest/strada-chat.js"></script>
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 covers all of these options and more.

​
Delay Widget Loading

To defer widget initialization until a specific event occurs, enable lazy mode by setting the lazy property to true: 
<script>
  window.stradaSettings = {
    organizationId: '<YOUR-ORGANIZATION-ID>',
    agentId: '<YOUR-AGENT-ID>',
    lazy: true
  };
</script>
<script src="https://cdn.getstrada.com/widget/latest/strada-chat.js"></script>
With lazy mode enabled, manually initialize the SDK by calling window.stradaChat.start(). Any setting normally configured in window.stradaSettings can be passed here: 
window.stradaChat.start({
  organizationId: 'your-org-id',
  agentId: 'your-agent-id',
  metaFields: {
    userId: '12345',
    accountType: 'premium'
  }
});

​
Pass User Data

Use metaFields to pass information about a user to Strada for attribution and analytics purposes. This data is not accessible to the AI agent during conversations. 
<script>
  window.stradaSettings = {
    organizationId: '<YOUR-ORGANIZATION-ID>',
    agentId: '<YOUR-AGENT-ID>',
    metaFields: {
      userId: '12345',
      accountType: 'premium',
      signupDate: '2024-01-15'
    }
  };
</script>
<script src="https://cdn.getstrada.com/widget/latest/strada-chat.js"></script>
To change these values after the widget has been initialized, use the setMetaFields 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 metaFields, these variables are accessible to the AI agent and can be used to customize agent behavior, provide context, or personalize the conversation experience. 
<script>
  window.stradaSettings = {
    organizationId: '<YOUR-ORGANIZATION-ID>',
    agentId: '<YOUR-AGENT-ID>',
    agentVariables: {
      first_name: 'John',
      last_name: 'Doe',
      email: 'john@example.com'
    }
  };
</script>
<script src="https://cdn.getstrada.com/widget/latest/strada-chat.js"></script>

​
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. 
<script>
  window.stradaSettings = {
    organizationId: '<YOUR-ORGANIZATION-ID>',
    agentId: '<YOUR-AGENT-ID>',
    getUserToken: async () => {
      // Make a request to your API to get a fresh JWT token
      const response = await fetch('/api/strada-token');
      const { token } = await response.json();
      return token;
    }
  };
</script>
<script src="https://cdn.getstrada.com/widget/latest/strada-chat.js"></script>
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: 
<script>
  window.stradaSettings = {
    organizationId: '<YOUR-ORGANIZATION-ID>',
    agentId: '<YOUR-AGENT-ID>',
    hideButton: true
  };
</script>
<script src="https://cdn.getstrada.com/widget/latest/strada-chat.js"></script>
Then use the open action to open the chat programmatically: 
// Open the chat when user clicks a custom button
document.getElementById('my-chat-button').addEventListener('click', () => {
  window.stradaChat.open();
});
⌘I