> ## Documentation Index
> Fetch the complete documentation index at: https://docs.typewise.app/llms.txt
> Use this file to discover all available pages before exploring further.
# Use the Chat SDK with plain HTML and JavaScript
> Load the Chat SDK from a script tag and build a chat with plain DOM code, no build step
Add a Typewise chat to any page with a script tag and a few lines of JavaScript.
No bundler or framework needed.
## Load the SDK
**Script tag**
The script-tag build exposes a global `Typewise` object:
```html theme={null}
```
The Typewise CDN always serves the version that is live on the platform.
**Pinned version**
To lock a version, load it from npm through jsDelivr:
```html theme={null}
```
**ES module**
Import it directly in a module script:
```html theme={null}
```
## Build a chat
This complete page renders the conversation, shows a typing indicator, and sends
messages. Replace `YOUR_CLIENT_ID` and open it in a browser. The highlighted
lines are the only SDK calls.
```html index.html lines highlight={18,25,58,61} theme={null}
Chat
```
```css styles.css theme={null}
#messages li.user {
text-align: right;
}
#messages li.sending {
opacity: 0.6;
}
#messages li.failed {
color: crimson;
}
#messages li.activity {
font-style: italic;
}
```
Each `li` gets the message's `role` and `status` as classes, so you can style
visitor messages, replies, and messages still sending.
> [!TIP]
>
> `textContent` keeps the example safe from injected HTML. If you render
> `message.content` as markdown, sanitize the output first.
## Open the chat from a button
The SDK doesn't render a bubble, so you choose how the chat appears. For
example, keep it in a hidden panel and show it on click:
```javascript theme={null}
document.querySelector("#help-button").addEventListener("click", () => {
document.querySelector("#chat-panel").hidden = false;
input.focus();
});
```
## Content Security Policy
If your site sends a CSP header, allow the script host in `script-src` and the
API and real-time domains in `connect-src`. See
[Configure CSP](https://docs.typewise.app/guides/channels/chat-widget/content-security-policy.md#chat-sdk).
## Related
* [Script tag example](https://typewise.github.io/chat-sdk-examples/script-tag/):
a styled version of this page
* [Render messages and activity](https://docs.typewise.app/guides/channels/chat-sdk/render-messages.md):
every field you can render
* [Share page context](https://docs.typewise.app/guides/channels/chat-sdk/page-context.md): send what the
visitor is doing to the AI Agent
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.