JS Snippet Guide
Installation
Add one script tag before the closing </body> tag:
<script
src="https://cdn.agent77.ai/widget.js"
data-token-url="/api/chatbot/token"
data-runtime-url="https://runtime.agent77.ai"
></script> That's it. The widget renders a chat button in the bottom-right corner.
Attributes
| Attribute | Required | Description |
|---|---|---|
data-token-url | Yes |
URL of your token endpoint. Can be absolute or relative to the
current page. The widget sends a POST request here
with credentials: "include" to attach cookies.
|
data-runtime-url | Yes |
The Agent77 runtime URL. Use
https://runtime.agent77.ai for production.
|
How Auth Works
- User clicks the chat button.
-
The widget sends
POST data-token-urlwithcredentials: "include"so your session cookie is attached. -
Your token endpoint verifies the session and returns
{"token": "<jwt>"}. -
The widget opens a connection to
data-runtime-url, passing the JWT. - Agent77 validates the JWT via your OIDC discovery endpoints and connects to your MCP server.
Customization
| Attribute | Default | Description |
|---|---|---|
data-position | bottom-right | Widget position: bottom-right or bottom-left |
data-theme | light | Color theme: light or dark |
data-greeting | none |
Initial message shown when the chat opens. E.g.
data-greeting="Hi! How can I help?" |
Troubleshooting
CORS Errors
The widget makes a POST request to your token endpoint from
the browser. Your server must return the correct CORS headers:
Access-Control-Allow-Origin: https://yoursite.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type
Do not use Access-Control-Allow-Origin: *
with credentials — browsers reject it. Set the exact origin.
401 from Token Endpoint
- Cookie not sent? The widget uses
credentials: "include", but cookies are only sent if the token endpoint is on the same domain (or a subdomain withSameSite=None; Secure). - Session expired? If the user's session has expired, the token endpoint will return 401. The widget will show a "Please log in" message.
Widget Not Appearing
- Check the browser console for script loading errors.
- Verify the
srcURL is correct and accessible. -
Make sure the script tag has both
data-token-urlanddata-runtime-urlattributes.
JWT Verification Fails at Runtime
-
Verify your
/.well-known/openid-configurationis accessible from the public internet. -
Check that
issuerin the config matches theissclaim in the JWT exactly (no trailing slash mismatch). -
Ensure the
kidin the JWT header matches a key in your JWKS response.