Install the chat on your site

1. Copy the snippet

In Channels → Web you have the snippet with your organization address already filled in. Paste it before your site closing `</body>`.

It loads asynchronously: it does not block the page nor enter your JavaScript bundle.

<script>
  window.mesaDeAyuda = {
    token: async () => (await fetch('/api/soporte/token')).text(),
  }
</script>
<script src="https://TU-ORGANIZACION.ejemplo.com/widget/embed.js" async></script>

2. Authorise your domain

On the same screen, add the origins from which the chat may be opened. Without that list the widget does not start: it is what stops someone else from mounting your chat on their page.

Use the full origin, with protocol, one per line. Subdomains are not inherited.

  • https://yoursite.com
  • https://www.yoursite.com
  • https://shop.yoursite.com

3. Identify who is already signed in (optional, but important)

Without a token, whoever writes is an anonymous visitor: they can ask, but the agent cannot look up their orders nor run any action on their account. That is deliberate.

To let it, your server signs a short token with the web channel secret and the widget requests it when needed. Identity comes from your session, not from anything typed into the chat.

import { SignJWT } from 'jose'

// En TU servidor, con la clave del canal web. Nunca en el navegador.
const token = await new SignJWT({ sub: usuario.id, email: usuario.email, name: usuario.nombre })
  .setProtectedHeader({ alg: 'HS256' })
  .setIssuedAt()
  .setExpirationTime('15m')
  .sign(new TextEncoder().encode(process.env.MESA_WIDGET_SECRET))

4. Check it

Open your site, write something and watch it reach the inbox. If it does not appear, it is almost always the origin: the browser console says so in plain words.