WhatsRB separates customer communication from business logic:
Your code receives structured webhooks (orders, support tickets, bookings) and acts on them
Your team uses the Widget to read and reply to WhatsApp conversations directly from your website
No need to build a messaging UI. Drop the Widget on your internal dashboard, admin panel, or support page — your team gets a real-time WhatsApp inbox, and your backend stays focused on what matters.
Customer sends WhatsApp message │ ▼ WhatsRB Cloud ┌─────────────────────────────┐ │ AI Agent analyzes message │ │ ↓ │ │ Structured webhook ────────────→ Your backend (business logic) │ ↓ │ │ Widget ────────────────────────→ Your team (conversation) └─────────────────────────────┘
Create a token — optionally restrict it to a specific origin (e.g. https://yourdomain.com)
Embed tokens are meant for browser use. They have limited permissions (read conversations, send messages) and cannot access your API keys, agents, or billing.
If an AI agent is active on a conversation, the widget displays suggested replies in real-time. Your team can accept, dismiss, or write their own response.
For security, you can restrict an embed token to a specific origin. The widget will only work on pages served from that origin.If no origin is set, the token works from any domain — useful for development, but not recommended for production.
When an agent has confirmation_mode: "confirm", the widget automatically adapts its behavior:
Instead of showing read-only action chips, the widget displays Accept and Reject buttons for each proposed action
Your team can review AI-proposed actions and decide individually
Once all actions are decided, a agent_run.actioned webhook is sent
No widget configuration is needed — the behavior is driven entirely by the agent’s confirmation_mode setting. See Action Confirmation for the full guide.
const destroy = WhatsRB.init({ token: '...', baseUrl: '...' });// Later, to remove the widget:destroy();
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"WhatsRB Cloud","description":"The easiest way to integrate the official WhatsApp Business API.","colors":{"primary":"#22C55E","light":"#4ADE80","dark":"#16A34A"},"logo":{"light":"https://mintcdn.com/whatsrb/Bqhhxq8GvrWxIa5u/images/logo-light.png?fit=max\u0026auto=format\u0026n=Bqhhxq8GvrWxIa5u\u0026q=85\u0026s=d9587fce906e6334b79305b34787ea4e","dark":"https://mintcdn.com/whatsrb/Bqhhxq8GvrWxIa5u/images/logo-dark.png?fit=max\u0026auto=format\u0026n=Bqhhxq8GvrWxIa5u\u0026q=85\u0026s=7f50decaf95fc2ea10fa70d5755be7bb","href":"https://whatsrb.com"},"favicon":"/images/favicon.png","navbar":{"links":[{"href":"https://gitlab.com/whatsrb/sdk-ruby","label":"GitLab"},{"href":"mailto:[email protected]","label":"Need help?"}],"primary":{"type":"button","label":"Dashboard","href":"https://whatsrb.com/login"}},"footer":{"socials":{"website":"https://gitlab.com/whatsrb"}},"icons":{"library":"lucide"},"styling":{"latex":false},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"whatsrb","hasAudioNarration":false,"actualSubdomain":"whatsrb","customDomains":["readme.whatsrb.com"],"gitSource":{"type":"github","owner":"seryllns","repo":"docs","deployBranch":"main","contentDirectory":"","isPrivate":false,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6a21ebd35ce35fd940ad5e09","collectionId":"6b86b8eb-d9ac-49c2-9682-42b72740e9dd","schemaVersion":"v2"},"entitlements":{},"buildId":"6ae948cf4e1e9c8ee81b247c:success","clientVersion":"0.0.4076","searchFilterCounts":[{"language":"default","tag":"API Reference","count":50},{"language":"default","tag":"Endpoints","count":48},{"language":"default","tag":"SDKs","count":31},{"language":"default","tag":"Guides","count":14},{"language":"default","tag":"Python","count":10},{"language":"default","tag":"Ruby","count":10},{"language":"default","tag":"TypeScript","count":10},{"language":"default","tag":"Templates","count":7},{"language":"default","tag":"Agent \u0026 Workflows","count":6},{"language":"default","tag":"Business Accounts","count":6}]},"assistantConfig":{"enableAskAiButton":false,"enableStarterQuestions":false,"enableContextualStarterQuestions":false,"enableAskAiSearchBar":true},"basePath":"","hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[],"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"guides/widget","slug":"/guides/widget","pageMetadata":{"title":"Widget","description":"Embed a WhatsApp inbox on your website — your team handles conversations, your code handles business logic.","href":"/guides/widget","hidden":false},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Embed a WhatsApp inbox on your website — your team handles conversations, your code handles business logic.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,code:`code`,li:`li`,ol:`ol`,p:`p`,pre:`pre`,span:`span`,strong:`strong`,tbody:`tbody`,td:`td`,th:`th`,thead:`thead`,tr:`tr`,ul:`ul`,..._provideComponents(),...props.components},{CodeBlock,Heading,Table,Warning}=_components;if(!CodeBlock)_missingMdxReference(`CodeBlock`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!Table)_missingMdxReference(`Table`,true);if(!Warning)_missingMdxReference(`Warning`,true);return _jsxs(_Fragment,{children:[_jsx(Heading,{level:`2`,id:`why-use-the-widget`,children:`Why use the Widget?`}),`\n`,_jsxs(_components.p,{children:[`WhatsRB separates `,_jsx(_components.strong,{children:`customer communication`}),` from `,_jsx(_components.strong,{children:`business logic`}),`:`]}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Your code`}),` receives structured webhooks (orders, support tickets, bookings) and acts on them`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Your team`}),` uses the Widget to read and reply to WhatsApp conversations directly from your website`]}),`\n`]}),`\n`,_jsx(_components.p,{children:`No need to build a messaging UI. Drop the Widget on your internal dashboard, admin panel, or support page — your team gets a real-time WhatsApp inbox, and your backend stays focused on what matters.`}),`\n`,_jsx(CodeBlock,{numberOfLines:`12`,language:`text`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`text`,children:_jsxs(_components.code,{language:`text`,numberOfLines:`12`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Customer sends WhatsApp message`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:` │`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:` ▼`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:` WhatsRB Cloud`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:` ┌─────────────────────────────┐`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:` │ AI Agent analyzes message │`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:` │ ↓ │`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:` │ Structured webhook ────────────→ Your backend (business logic)`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:` │ ↓ │`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:` │ Widget ────────────────────────→ Your team (conversation)`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:` └─────────────────────────────┘`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{})})]})})}),`\n`,_jsx(Heading,{level:`2`,id:`installation`,children:`Installation`}),`\n`,_jsx(_components.p,{children:`Add the script tag to your page and initialize:`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`7`,language:`html`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`html`,children:_jsxs(_components.code,{language:`html`,numberOfLines:`7`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:`\u003c`}),_jsx(_components.span,{style:{color:`#116329`,\"--shiki-dark\":`#569CD6`},children:`script`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#9CDCFE`},children:` src`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`=`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"https://cdn.whatsrb.com/embed/widget.js\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:`>\u003c/`}),_jsx(_components.span,{style:{color:`#116329`,\"--shiki-dark\":`#569CD6`},children:`script`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:`>`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:`\u003c`}),_jsx(_components.span,{style:{color:`#116329`,\"--shiki-dark\":`#569CD6`},children:`script`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:`>`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` WhatsRB`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`init`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`({`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` token:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` 'your_embed_token'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` baseUrl:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` 'https://whatsrb.com'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` });`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:`\u003c/`}),_jsx(_components.span,{style:{color:`#116329`,\"--shiki-dark\":`#569CD6`},children:`script`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:`>`})]}),`\n`]})})}),`\n`,_jsx(_components.p,{children:`The widget appears as a floating button in the bottom-right corner.`}),`\n`,_jsx(Heading,{level:`2`,id:`get-an-embed-token`,children:`Get an embed token`}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[`Go to the `,_jsx(_components.a,{href:`https://whatsrb.com/dashboard`,children:`WhatsRB Dashboard`})]}),`\n`,_jsxs(_components.li,{children:[`Navigate to `,_jsx(_components.strong,{children:`Embed Tokens`})]}),`\n`,_jsxs(_components.li,{children:[`Create a token — optionally restrict it to a specific origin (e.g. `,_jsx(_components.code,{children:`https://yourdomain.com`}),`)`]}),`\n`]}),`\n`,_jsx(Warning,{children:_jsx(_components.p,{children:`Embed tokens are meant for browser use. They have limited permissions (read conversations, send messages) and cannot access your API keys, agents, or billing.`})}),`\n`,_jsx(Heading,{level:`2`,id:`configuration`,children:`Configuration`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`8`,language:`html`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`html`,children:_jsxs(_components.code,{language:`html`,numberOfLines:`8`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:`\u003c`}),_jsx(_components.span,{style:{color:`#116329`,\"--shiki-dark\":`#569CD6`},children:`script`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:`>`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` WhatsRB`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`init`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`({`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` token:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` 'your_embed_token'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// required`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` baseUrl:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` 'https://whatsrb.com'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// required`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` container:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` '#my-inbox'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// CSS selector — omit for floating mode`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` theme:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` 'light'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// 'light' | 'dark' | 'auto'`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` });`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:`\u003c/`}),_jsx(_components.span,{style:{color:`#116329`,\"--shiki-dark\":`#569CD6`},children:`script`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:`>`})]}),`\n`]})})}),`\n`,_jsx(Heading,{level:`3`,id:`floating-mode-default`,children:`Floating mode (default)`}),`\n`,_jsxs(_components.p,{children:[`When no `,_jsx(_components.code,{children:`container`}),` is provided, the widget renders as a floating button with a slide-up panel. Clicking outside closes it.`]}),`\n`,_jsx(Heading,{level:`3`,id:`embedded-mode`,children:`Embedded mode`}),`\n`,_jsxs(_components.p,{children:[`Pass a `,_jsx(_components.code,{children:`container`}),` CSS selector to mount the widget inside a specific element:`]}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`8`,language:`html`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`html`,children:_jsxs(_components.code,{language:`html`,numberOfLines:`8`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:`\u003c`}),_jsx(_components.span,{style:{color:`#116329`,\"--shiki-dark\":`#569CD6`},children:`div`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#9CDCFE`},children:` id`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`=`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"my-inbox\"`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#9CDCFE`},children:` style`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`=`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"height: 600px;\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:`>\u003c/`}),_jsx(_components.span,{style:{color:`#116329`,\"--shiki-dark\":`#569CD6`},children:`div`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:`>`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:`\u003c`}),_jsx(_components.span,{style:{color:`#116329`,\"--shiki-dark\":`#569CD6`},children:`script`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:`>`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` WhatsRB`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`init`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`({`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` token:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` 'your_embed_token'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` baseUrl:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` 'https://whatsrb.com'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` container:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` '#my-inbox'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` });`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:`\u003c/`}),_jsx(_components.span,{style:{color:`#116329`,\"--shiki-dark\":`#569CD6`},children:`script`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:`>`})]}),`\n`]})})}),`\n`,_jsx(Heading,{level:`3`,id:`themes`,children:`Themes`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Theme`}),_jsx(_components.th,{children:`Description`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`light`})}),_jsx(_components.td,{children:`Light background (default)`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`dark`})}),_jsx(_components.td,{children:`Dark background`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`auto`})}),_jsx(_components.td,{children:`Follows the user’s system preference`})]})]})]}),`\n`,_jsx(Heading,{level:`2`,id:`features`,children:`Features`}),`\n`,_jsx(Heading,{level:`3`,id:`conversations`,children:`Conversations`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`Browse all WhatsApp conversations`}),`\n`,_jsx(_components.li,{children:`View full message history with delivery statuses (sent, delivered, read, failed)`}),`\n`,_jsx(_components.li,{children:`Send text messages and WhatsApp templates (with variables)`}),`\n`,_jsx(_components.li,{children:`Start new conversations`}),`\n`]}),`\n`,_jsx(Heading,{level:`3`,id:`ai-suggestions`,children:`AI suggestions`}),`\n`,_jsx(_components.p,{children:`If an AI agent is active on a conversation, the widget displays suggested replies in real-time. Your team can accept, dismiss, or write their own response.`}),`\n`,_jsx(Heading,{level:`3`,id:`real-time-updates`,children:`Real-time updates`}),`\n`,_jsxs(_components.p,{children:[`The widget uses `,_jsx(_components.strong,{children:`Server-Sent Events (SSE)`}),` for instant updates:`]}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`New messages appear immediately`}),`\n`,_jsx(_components.li,{children:`Delivery status changes update in real-time`}),`\n`,_jsx(_components.li,{children:`AI suggestions pop up as soon as the agent completes`}),`\n`]}),`\n`,_jsx(_components.p,{children:`If SSE is unavailable (firewall, proxy), the widget falls back to polling automatically.`}),`\n`,_jsx(Heading,{level:`2`,id:`origin-restriction`,children:`Origin restriction`}),`\n`,_jsx(_components.p,{children:`For security, you can restrict an embed token to a specific origin. The widget will only work on pages served from that origin.`}),`\n`,_jsx(_components.p,{children:`If no origin is set, the token works from any domain — useful for development, but not recommended for production.`}),`\n`,_jsx(Heading,{level:`2`,id:`action-confirmation`,children:`Action confirmation`}),`\n`,_jsxs(_components.p,{children:[`When an agent has `,_jsx(_components.code,{children:`confirmation_mode: \"confirm\"`}),`, the widget automatically adapts its behavior:`]}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[`Instead of showing read-only action chips, the widget displays `,_jsx(_components.strong,{children:`Accept`}),` and `,_jsx(_components.strong,{children:`Reject`}),` buttons for each proposed action`]}),`\n`,_jsx(_components.li,{children:`Your team can review AI-proposed actions and decide individually`}),`\n`,_jsxs(_components.li,{children:[`Once all actions are decided, a `,_jsx(_components.code,{children:`agent_run.actioned`}),` webhook is sent`]}),`\n`]}),`\n`,_jsxs(_components.p,{children:[`No widget configuration is needed — the behavior is driven entirely by the agent’s `,_jsx(_components.code,{children:`confirmation_mode`}),` setting. See `,_jsx(_components.a,{href:`/guides/action-confirmation`,children:`Action Confirmation`}),` for the full guide.`]}),`\n`,_jsx(Heading,{level:`2`,id:`cleanup`,children:`Cleanup`}),`\n`,_jsxs(_components.p,{children:[_jsx(_components.code,{children:`WhatsRB.init()`}),` returns a destroy function:`]}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`4`,language:`javascript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`javascript`,children:_jsxs(_components.code,{language:`javascript`,numberOfLines:`4`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` destroy`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` WhatsRB`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`init`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`({ `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`token:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` '...'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`baseUrl:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` '...'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` });`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// Later, to remove the widget:`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`destroy`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`();`})]}),`\n`]})})})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Widget","description":"Embed a WhatsApp inbox on your website — your team handles conversations, your code handles business logic.","href":"/guides/widget","hidden":false}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Why use the Widget?","slug":"why-use-the-widget","depth":2,"children":[]},{"title":"Installation","slug":"installation","depth":2,"children":[]},{"title":"Get an embed token","slug":"get-an-embed-token","depth":2,"children":[]},{"title":"Configuration","slug":"configuration","depth":2,"children":[{"title":"Floating mode (default)","slug":"floating-mode-default","depth":3,"children":[]},{"title":"Embedded mode","slug":"embedded-mode","depth":3,"children":[]},{"title":"Themes","slug":"themes","depth":3,"children":[]}]},{"title":"Features","slug":"features","depth":2,"children":[{"title":"Conversations","slug":"conversations","depth":3,"children":[]},{"title":"AI suggestions","slug":"ai-suggestions","depth":3,"children":[]},{"title":"Real-time updates","slug":"real-time-updates","depth":3,"children":[]}]},{"title":"Origin restriction","slug":"origin-restriction","depth":2,"children":[]},{"title":"Action confirmation","slug":"action-confirmation","depth":2,"children":[]},{"title":"Cleanup","slug":"cleanup","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"whatsrb","siteName":"WhatsRB Cloud","title":"Widget - WhatsRB Cloud","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-03-18T19:47:31.198Z","originalFileLocation":"guides/widget.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Embed a WhatsApp inbox on your website — your team handles conversations, your code handles business logic.\">\u003cmeta data-mint-head name=\"application-name\" content=\"WhatsRB Cloud\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/whatsrb/PkMac-jYO728NV0N/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/whatsrb/PkMac-jYO728NV0N/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/whatsrb/PkMac-jYO728NV0N/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/whatsrb/PkMac-jYO728NV0N/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/whatsrb/PkMac-jYO728NV0N/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/whatsrb/PkMac-jYO728NV0N/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/whatsrb/PkMac-jYO728NV0N/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/whatsrb/PkMac-jYO728NV0N/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/whatsrb/PkMac-jYO728NV0N/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Widget - WhatsRB Cloud\">\u003cmeta data-mint-head property=\"og:description\" content=\"Embed a WhatsApp inbox on your website — your team handles conversations, your code handles business logic.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"WhatsRB Cloud\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://readme.whatsrb.com/guides/widget\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://whatsrb.mintlify.site/_mintlify/api/og/v2?division=Widget\u0026amp;title=Widget\u0026amp;description=Embed+a+WhatsApp+inbox+on+your+website+%E2%80%94+your+team+handles+conversations%2C+your+code+handles+business+logic.\u0026amp;theme=14ccf23a665e8241dec61736\u0026amp;signature=a6b48cc1810474344496287fd6aabe6232bf78b26675a730990ca9dc39dbcc09\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Widget - WhatsRB Cloud\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Embed a WhatsApp inbox on your website — your team handles conversations, your code handles business logic.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://whatsrb.mintlify.site/_mintlify/api/og/v2?division=Widget\u0026amp;title=Widget\u0026amp;description=Embed+a+WhatsApp+inbox+on+your+website+%E2%80%94+your+team+handles+conversations%2C+your+code+handles+business+logic.\u0026amp;theme=14ccf23a665e8241dec61736\u0026amp;signature=a6b48cc1810474344496287fd6aabe6232bf78b26675a730990ca9dc39dbcc09\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/whatsrb/PkMac-jYO728NV0N/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"WhatsRB Cloud\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#22C55E\">\u003clink data-mint-head rel=\"canonical\" href=\"https://readme.whatsrb.com/guides/widget\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/guides/widget.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://readme.whatsrb.com/#organization\",\"name\":\"WhatsRB Cloud\",\"url\":\"https://readme.whatsrb.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/whatsrb/Bqhhxq8GvrWxIa5u/images/logo-light.png?fit=max\u0026auto=format\u0026n=Bqhhxq8GvrWxIa5u\u0026q=85\u0026s=d9587fce906e6334b79305b34787ea4e\"}},{\"@type\":\"WebSite\",\"@id\":\"https://readme.whatsrb.com#website\",\"name\":\"WhatsRB Cloud\",\"url\":\"https://readme.whatsrb.com\",\"publisher\":{\"@id\":\"https://readme.whatsrb.com/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://readme.whatsrb.com/guides/widget#webpage\",\"url\":\"https://readme.whatsrb.com/guides/widget\",\"name\":\"Widget\",\"description\":\"Embed a WhatsApp inbox on your website — your team handles conversations, your code handles business logic.\",\"dateModified\":\"2026-03-18T19:47:31.198Z\",\"isPartOf\":{\"@id\":\"https://readme.whatsrb.com#website\"},\"breadcrumb\":{\"@id\":\"https://readme.whatsrb.com/guides/widget#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://readme.whatsrb.com/guides/widget#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"WhatsRB Cloud\",\"item\":\"https://readme.whatsrb.com\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Widget\",\"item\":\"https://readme.whatsrb.com/guides/widget\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://readme.whatsrb.com/guides/widget#article\",\"headline\":\"Widget\",\"name\":\"Widget\",\"description\":\"Embed a WhatsApp inbox on your website — your team handles conversations, your code handles business logic.\",\"url\":\"https://readme.whatsrb.com/guides/widget\",\"mainEntityOfPage\":{\"@id\":\"https://readme.whatsrb.com/guides/widget#webpage\"},\"dateModified\":\"2026-03-18T19:47:31.198Z\",\"publisher\":{\"@id\":\"https://readme.whatsrb.com/#organization\"},\"isPartOf\":{\"@id\":\"https://readme.whatsrb.com#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"WhatsRB Cloud\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"WhatsRB Cloud","nav":{"global":null,"tabs":[{"tab":"Guides","icon":"book-open","groups":[{"group":"Getting Started","pages":[{"title":"Introduction","href":""},{"title":"Quickstart","href":"/guides/quickstart"},{"title":"Authentication","href":"/guides/authentication"}]},{"group":"Core Concepts","pages":[{"title":"Webhooks","href":"/guides/webhooks"},{"title":"Message Templates","href":"/guides/templates"},{"title":"Meta Webhook Setup (Manual Accounts)","href":"/guides/meta-webhook-setup"},{"title":"Error Handling","description":"Understand API error responses and how to handle them.","href":"/guides/error-handling"}]},{"group":"Widget","pages":[{"title":"Widget","href":"/guides/widget"}]},{"group":"Agent \u0026 Workflows","pages":[{"title":"Agents Overview","description":"AI agents that classify, extract, and route WhatsApp messages into structured actions your backend can execute.","href":"/guides/agents-overview"},{"title":"Allowed Action Types","href":"/guides/allowed-actions"},{"title":"Structured Fields","href":"/guides/structured-fields"},{"title":"Conversation Context","href":"/guides/conversation-context"},{"title":"Action Confirmation","href":"/guides/action-confirmation"},{"title":"Human Takeover","href":"/guides/human-takeover"}]}]},{"tab":"API Reference","icon":"square-terminal","pages":[{"title":"API Reference","href":"/api-reference/overview"}]},{"tab":"SDKs","icon":"code","menu":[{"item":"Overview","icon":"book-open","pages":[{"title":"Overview","href":"/sdks/overview"}]},{"item":"Python","icon":"python","description":"pip install whatsrb-cloud","pages":[{"title":"Python","href":"/sdks/python/overview"}]},{"item":"Ruby","icon":"gem","description":"gem install whatsrb_cloud","pages":[{"title":"Ruby","href":"/sdks/ruby/overview"}]},{"item":"TypeScript","icon":"js","description":"npm install @whatsrb/cloud","pages":[{"title":"TypeScript","href":"/sdks/typescript/overview"}]}],"pages":[{"title":"SDKs","href":"/sdks/overview"}]}]},"basePath":"","title":"Widget - WhatsRB Cloud","buildId":"dpl_8LJbrAiZvr1K98WQNZXCyY5AvT34","deploymentId":"dpl_8LJbrAiZvr1K98WQNZXCyY5AvT34","dynamics":[],"chunks":[]}
