Agent77

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

  1. User clicks the chat button.
  2. The widget sends POST data-token-url with credentials: "include" so your session cookie is attached.
  3. Your token endpoint verifies the session and returns {"token": "<jwt>"}.
  4. The widget opens a connection to data-runtime-url, passing the JWT.
  5. 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 with SameSite=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 src URL is correct and accessible.
  • Make sure the script tag has both data-token-url and data-runtime-url attributes.

JWT Verification Fails at Runtime

  • Verify your /.well-known/openid-configuration is accessible from the public internet.
  • Check that issuer in the config matches the iss claim in the JWT exactly (no trailing slash mismatch).
  • Ensure the kid in the JWT header matches a key in your JWKS response.