How can I pass Basic Auth credentials to my embedded Chat Trigger?

Below is one approach:

Since Basic Auth expects each webhook request to carry an Authorization header, you currently have two options:

1. Embed the Credentials in the URL
   You can pass the Basic Auth credentials directly in the webhook URL using the form:

   https://USERNAME:PASSWORD@your-domain/…

   For example, update your call to:

   HTMLCopied
   <script type="module">
     import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
   
     createChat({
       webhookUrl: 'https://yourUsername:yourPassword@gregluis.app.n8n.cloud/webhook/e985d15f-b2f6-456d-be15-97e0b1544a40/chat'
     });
   </script>

   Note: Embedding credentials in a URL may not be supported by all browsers, and it might expose your credentials in client-side code.

2. Inject the Authorization Header via a Proxy or Customization
   If your chat widget doesn’t offer a direct way to add custom HTTP headers (such as an Authorization header), you can instead create a proxy endpoint on your server that injects the necessary header. Your webpage would call your proxy, which in turn forwards the request to the actual webhook URL with the required authentication header. This way, your client code remains free of exposed credentials.

Choose the method that best fits your security requirements. The first method is quicker for testing or low-risk scenarios, while the second is recommended for production environments to keep your credentials secure.