widget-ஐ நிறுவவும்

Three ways to put your bot in front of customers.

இந்தக் கட்டுரை தற்போது ஆங்கிலத்தில் உள்ளது — முழு மொழிபெயர்ப்பு விரைவில் வரும்.

Install with an AI agent (fastest)

If you use Claude Code, Cursor, GitHub Copilot, Codex, or Windsurf, you don't have to edit anything by hand. Paste this one line into your agent:

Fetch https://mongpt.co/agent-setup/prompt.md and follow it to install MonGPT on this site. My tenantId is YOUR_TENANT_ID.

Your agent reads the published instructions, detects your framework (Next.js, React, Vue, Astro, WordPress, Shopify…), drops the widget in the right place, wires up multilingual pages correctly, and connects the MonGPT MCP server so it can manage your bot — add knowledge, ask the bot, pull analytics — without leaving your editor.

Grab your Tenant ID from Dashboard → Install (it's pre-filled in the copy button there). The instructions are published at https://mongpt.co/agent-setup/prompt.md, so you or your agent can verify them at any time.

Prefer to do it manually? Everything below gives the same result.

Floating bubble (most common)

Paste this before your closing </body> tag. The launcher appears in the corner; the design comes from your dashboard, so you never need to change this snippet again.

<script src="https://pub-d34db5f4b686455e8a40dfc61dfe0c0e.r2.dev/mongpt-widget.iife.js"></script>
<script>
  MonGPT.init({ tenantId: 'YOUR_TENANT_ID' });
</script>

Running more than one bot?

Pass the bot's id — find it on the Install page after selecting that bot:

MonGPT.init({ tenantId: 'YOUR_TENANT_ID', chatbotId: 'YOUR_BOT_ID' });

Inline (embedded in a page)

Puts the chat inside a page — a help center, a contact page — instead of a floating bubble. No script needed; it's an iframe:

<iframe
  src="https://api.mongpt.co/embed/YOUR_TENANT_ID"
  width="100%" height="600"
  style="border:1px solid #eee;border-radius:12px"
  allow="microphone" title="Chat with us"></iframe>

Keep allow="microphone" if you want voice to work inside the iframe. Add ?chatbotId=… to the src to pick a specific bot. Because an iframe can't see the host page's language, pass it explicitly per language variant — ?language=ja-JP (e.g. use the iframe on your /jp page with …/embed/YOUR_TENANT_ID?language=ja-JP).

Inline container (no iframe)

Prefer to render the chat directly in your page markup (no iframe isolation)? Add a div with the widget class and your IDs, then load the script with ?hideBubble=true. The widget mounts inside the div automatically — no init() call, and you can add as many containers as you like:

<div class="mongpt-chat-widget"
  data-mongpt-tenant="YOUR_TENANT_ID"
  data-mongpt-chatbot="YOUR_BOT_ID"
  style="width:100%;height:600px"></div>

<script src="https://pub-d34db5f4b686455e8a40dfc61dfe0c0e.r2.dev/mongpt-widget.iife.js?hideBubble=true" async></script>

WordPress

Install the free MonGPT plugin, paste your Tenant ID under Settings → MonGPT, and the widget appears site-wide. No theme editing.

Options reference

  • tenantId — required. From Dashboard → Install.
  • chatbotId — optional. Defaults to your first bot.
  • mode'floating' (default) or 'inline'.
  • hideButton — keep the floating widget but hide its bubble; open it only via MonGPT.open().
  • primaryColor, position, language — override the dashboard settings for this embed only.

Control it from your code (SDK)

After the snippet loads, window.MonGPT lets you drive the widget from your own buttons, links, or app logic:

MonGPT.open()            // + close() / toggle(); open({ reset: true }) starts fresh
MonGPT.isOpen()          // true/false
MonGPT.sendMessage('What are your pricing plans?')   // send now
MonGPT.prefill("Hi, I'd like help with…")            // fill the box, user edits & sends
MonGPT.reset()           // start a new conversation
MonGPT.reload()          // re-mount after client-side navigation

// Steer the bot for the current page (prepends/appends to its instructions)
MonGPT.setContext({
  prefix: 'You are a sales assistant. Guide users to book a demo.',
  suffix: 'Current page: Pricing',
})

MonGPT.setCss(':host #header { background: #072A54 }')  // custom CSS

Migrating from another provider? The same actions also work as a command queue — MonGPT.push(['do','message:send','hi']), MonGPT.push(['set','context',[prefix, suffix]]) — and can be buffered before the script loads with window.MonGPT = window.MonGPT || [].

Identify signed-in visitors

If your site has logged-in users, call this after login (and again on logout to clear it) so their leads and tickets carry their real name/email instead of relying on the AI to extract them:

MonGPT.identify({ userId: 'usr_8f21', email: '[email protected]', name: 'Priya Sharma' })

Add a server-computed userHash — HMAC-SHA256 of userId with the identity secret shown on Dashboard → Install — to prove the identity. That verifies the visitor, so their tickets follow them across devices/browsers instead of staying tied to one. Without it, identify() still labels the contact, just per-device.

Languages — one snippet, every language

You don't need a different snippet per language. The widget detects the page language once, when MonGPT.init() runs, in this order: an explicit language passed to init() (if not 'auto') > <html lang> > a ?lang=/?locale=/?language= query string > the URL path (e.g. /jp/) > the visitor's browser — then greets and replies in it, limited to the languages you allow in Bot settings → Language. A visitor on /jp gets a Japanese bot automatically; one on /th gets Thai.

If your site carries the locale in a non-standard query key, name it with langParam — e.g. langParam: 'ui_lang' reads ?ui_lang=jp. To pin one fixed language on a page instead of auto-detecting, pass language:

MonGPT.init({ tenantId: 'YOUR_TENANT_ID', language: 'ja-JP' });

Codes: en-IN, ja-JP, ko-KR, zh-CN, ms-MY, id-ID, th-TH, vi-VN, fil-PH, ar-AE, hi-IN, ta-IN, sw-KE, ha-NG, yo-NG and more. The same language field works on the REST API /chat call and the MCP ask_bot tool.

Header language switcher → widget language (no page reload)

Required: when the visitor changes language in your site header, the MonGPT widget must switch too — greeting, UI, and replies — immediately, with no page reload. Because language is resolved once at init(), a header / SPA switcher that changes locale without a full reload needs an explicit call. Don't call MonGPT.init() from a static index.html in that case; call it once your i18n store is ready, then call MonGPT.setLanguage() on every header locale change:

// After your i18n store resolves the initial locale:
MonGPT.init({ tenantId: 'YOUR_TENANT_ID', language: 'ta-IN' });

// On every header language change — widget updates live, no reload:
MonGPT.setLanguage('ja-JP');

setLanguage() swaps the widget language in place — no refresh, no manual cleanup, and no duplicate widget even if you call init() more than once. Acceptance test: change language in the header → widget greeting/UI updates immediately.

Allowed domains

Domain lock is per bot, not account-wide. Select the bot in the sidebar, then go to Bot settings → Allowed domains and list the domains permitted to embed that bot — every other bot keeps its own separate list. A domain you add also covers its subdomains automatically (e.g. adding example.com allows app.example.com too).

By default the list is empty, which means the widget loads on any domain — fine for testing, but it also means anyone who copies your snippet can embed your bot and spend your quota. Add at least one domain to lock it down: once a bot has one or more domains listed, its widget stops rendering everywhere else, and the chat/token/lead/ticket APIs reject requests from origins that aren't on the list. Remove every domain again and the bot goes back to allowing all origins.

ta