nabatdesk
Back to blog
website widgetintegrationgetting started

How to Integrate the NabatDesk Website Widget

NabatDesk Team10/25/2026
How to Integrate the NabatDesk Website Widget

The NabatDesk website widget adds a chat bubble to your site so visitors can message your team without leaving the page. Conversations land in the same Inbox as Telegram, WhatsApp, and Instagram—so one team can answer every channel.

This guide shows how to create a widget, embed the script, verify Inbox delivery, and optionally add automation or Telegram reply bridging.

What you need

  • A NabatDesk workspace on a plan that includes website widgets
  • Owner or Admin access
  • The Website Support bot / bot instance set up in your workspace (Marketplace Telegram Website Support Bot, or your Website Support bot instance)
  • Your website (or a staging page) where you can paste a script before </body>
  • Exact HTTPS origins you will allow (for example https://www.example.com)

Step 1 — Open Website chat settings

  1. Sign in to NabatDesk as Owner or Admin.
  2. Open your Website Support bot instance settings.
  3. Go to the Website chat section (#website-chat).

You can also start from Settings → Connections → Website chat, which routes to the same settings page.

Step 2 — Create a widget

  1. Choose Create widget.
  2. Set a clear name (for example “Marketing site” or “Help center”).
  3. Add allowed origins — exact origins that may load the widget (scheme + host, and port if non-default). Example: https://www.example.com.
  4. Write a short greeting visitors see when they open the bubble.
  5. Save.

NabatDesk generates a public widget id and an embed snippet for you.

NabatDesk Inbox where website conversations appear
NabatDesk Inbox where website conversations appear

Step 3 — Paste the embed snippet

Copy the snippet from the widget card. It looks like this:

<script
  async
  src="https://nabatdesk.com/widget.js"
  data-widget-id="YOUR_PUBLIC_WIDGET_ID"
  data-api-base="https://api.nabatdesk.com/api/v1"
></script>

Paste it before the closing </body> tag on every page where the bubble should appear (or in your CMS “footer scripts” / tag manager equivalent).

Notes:

  • Use the exact snippet from your workspace — src and data-api-base match your NabatDesk environment.
  • Optional: set data-lang / locale to en or fa when you want to force UI language (RTL is applied for Persian).
  • The bubble uses NabatDesk branding (fixed look). There is no full custom theme builder in this release.

Step 4 — Match origins and test

  1. Confirm the page URL origin is listed under allowed origins.
  2. Open the page in a private window.
  3. Open the chat bubble and send a short test message.
  4. In NabatDesk, open Inbox and filter Website.
  5. Confirm the thread appears, then reply from the composer.

If the bubble does not load, check the browser console for blocked scripts, wrong origin, or an outdated snippet.

Step 5 — Optional: first automation

Once DMs work:

  1. Go to Automations → New.
  2. Scope to Website and select your widget.
  3. Trigger on the first visitor message.
  4. Add Send message with a short acknowledgment.
  5. Optionally Add tag (for example web-lead).
  6. Activate and retest from the site.

Keep the first automation text-only. Visitor chat in the public widget is text-first.

Step 6 — Optional: reply from Telegram

If your Website Support bot is connected, you can enable Reply from Telegram (bridge) so linked owners/admins get notified in Telegram and can reply from a Telegram DM. Configure this under the same Website chat settings after the widget is live.

Tips for a clean launch

  • Start on staging with a staging origin, then add production origins.
  • Keep the greeting short and set response-time expectations.
  • Use one widget per major site or brand surface when your plan allows multiple widgets.
  • Train agents to filter Website in Inbox during the first week.
  • Pair the widget with your Instagram and Telegram playbooks when you run multi-channel support.

Related guides

FAQ

Where do website messages appear?

In the shared NabatDesk Inbox, under the Website channel filter, as contacts on the website channel.

Can I customize colors and logo?

The current widget ships with NabatDesk branding. You can configure name, greeting, locales, and allowed origins—not a full custom theme builder.

Does the widget support file uploads from visitors?

Visitor chat is text-first in the public widget path. Prefer asking visitors to share links or continue sensitive media over other channels when needed.

Can AI help with website chats?

Yes. Inbox Copilot can draft replies on website threads, and automations can be scoped to a website widget—same pattern as other channels.

Final takeaway

Integrating the website widget is three core steps: create the widget with the right origins, paste the script, and prove a round-trip in Inbox. After that, add automation and optional Telegram bridging when your team is ready.

Add website chat to your site with NabatDesk. Start free.