Website Chat Widget

The website widget puts the assistant on your own site: a chat bubble that opens into a full conversation, with the same products, orders and handoff behaviour as your other channels. It is a single script tag — no build step, no framework required.

Embedding

Open your website channel in the dashboard (Channels → website widget) and copy the install snippet. It looks like this:

<script src="https://api.<your-domain>/widget/w.js" data-key="pk_..." async></script>

Paste it just before </body> on every page where the chat should appear. The widget renders inside a Shadow DOM, so your site's CSS and the widget's never affect each other.

Script attributes

Allowed origins

The widget only works on the website origins you list on its channel page (for example https://shop.example.com). Until at least one origin is configured, the dashboard shows a warning and visitors cannot start a chat from your site. Add every domain and subdomain you embed on, including staging hosts you want to test from.

JavaScript API

Once loaded, the widget exposes window.Mulabbe and dispatches a mulabbe:ready event on window:

window.addEventListener('mulabbe:ready', () => {
  // window.Mulabbe is available from here on.
});

Example — a product page button:

<button onclick="Mulabbe.ask('Tell me more about the summer abaya')">
  Ask the assistant
</button>

Identifying signed-in customers

By default visitors are anonymous. If your site has its own login, you can attach the visitor's identity so conversations are linked to the same customer across visits and devices. Identity claims are verified with a shared secret, so one visitor can never impersonate another.

1. On the widget's channel page, create the identity secret and store it on your server. It is shown once. Rotating it later breaks live integrations until your server uses the new value, so plan rotations.
2. On your server, compute an HMAC of your user's id:

import crypto from 'node:crypto';

// On your server, for the signed-in customer:
const userHash = crypto
  .createHmac('sha256', process.env.MULABBE_IDENTITY_SECRET)
  .update(String(user.id))
  .digest('hex');

3. In the page, after the widget is ready:

Mulabbe.identify({ userId: String(user.id), userHash, name: user.name });

name is optional. Alternatively, you can pass a token instead:

Mulabbe.identify({ token: signedJwt });

where signedJwt is an HS256 JWT signed with the same identity secret, carrying sub (your user id), iat and exp. The exp may be at most 24 hours after iat, so a leaked token is short-lived.

Never put the identity secret itself in page code — only the computed userHash or a short-lived token.

The demo storefront

Local and evaluation installs serve a demo storefront at:

https://api.<your-domain>/widget/demo.html

It renders your workspace's real product catalog as a simple shop, with the widget embedded exactly as a merchant would paste it — including "Ask the assistant" buttons that call Mulabbe.ask(...). Use ?lang=en to switch it to English and ?key=pk_... to pick a specific widget; without a key, the install's first website widget opens. The demo data endpoint only answers in local mode, so this page is for development and demos, not production.

Good to know

• The widget loads asynchronously and does not block page rendering; if the key is unknown or chat is unavailable, it logs a console warning and stays off the page.
• Arabic is first-class: the widget is fully right-to-left in Arabic and switches direction with the locale.
• The widget talks only to your Mulabbe API origin, and the visitor's browser never sees any API key or secret.