Widget install

Drop the widget into any website with a single <script> tag. It renders a floating chat bubble bottom-right and opens into a themed conversation with a real human or your AI agent.

1. Create an API token

1. Open your workspace → Integrations.
2. Click New token and choose the widget scope.
3. Pick the client this widget belongs to.
4. Add your production domain(s) to Allowed origins.

2. Add the snippet

<script
  src="https://x-com.lovable.app/widget.js"
  data-token="pk_widget_XXXXXXXXXX"
  async
></script>

3. (Optional) Identify your visitor

Pass a signed identity so the conversation is attached to a known user in your product:

<script>
  window.X-com = {
    visitor: {
      externalId: "u_1029",
      name: "Alex Rivera",
      email: "alex@acme.com",
    },
  };
</script>
<script src="https://x-com.lovable.app/widget.js" data-token="pk_widget_XXX" async></script>

Theming

Use CSS custom properties on :root to match your brand:

:root {
  --x-com-primary: #6D5EF7;
  --x-com-radius: 16px;
  --x-com-font: "Inter", system-ui, sans-serif;
}

Security

• Widget tokens are publishable — safe to ship in the browser.
• Every session is server-issued through /api/public/widget/session.
• Requests from origins not in your allowlist are rejected.