New AI Agent can now build your knowledge base, connect channels and invite agents — all by chat Try it now
Help homeProductPricingBlog
Start freeLog in

Install the website widget

Add customer chat to your website and verify both messages and AI replies.

Updated 2026-08-16

Walk through the demoDemo data
Channel marketplaceDemo data
Website & email3
Web Widget1 connected

A white-label chat bubble for your site

Custom API1 connected

Send and receive through your own system

Email

Bring customer email into one inbox

Social & messaging8
WhatsApp

Connect WhatsApp Business to serve customers

Messenger

Connect Facebook Pages and handle messages

Instagram DM

Receive and reply to Instagram DMs

LINE

Connect a LINE Official Account

Telegram1 connected

Connect a Telegram bot for customer messages

TikTok

Pending — subject to TikTok review and authorization

Zalo OA

Connect a Zalo Official Account

YouTube

Receive and reply to comments

Enterprise IM2
WeChat Customer Service2 connected

Connect official enterprise customer service accounts

WeComPlanned

Customer contacts, group chats, and agent collaboration

Step 1 / 9
Open the website channel

Open your connected Website Widget under Channels.

The website widget lets visitors start a conversation without leaving your site.

Install the widget#

  1. Open Channels and select Website.
  2. Enter a channel name and add every exact, trusted site origin that may use the widget. Leaving the list empty removes the origin restriction and is not recommended for production; if you use it temporarily for testing, add the production origins before publishing. Live preview in the YundaDesk tenant console remains available and does not need to be added.
  3. Save the configuration and copy the generated installation code.
  4. Add the code to every page where chat should appear, usually before the closing page tag.
  5. Publish the website and refresh the page.

When you install through a supported store app, the widget code may be added automatically. You should still test the real storefront.

Verify the connection#

Open the site in a private browser window, start a chat, and verify that:

  • a new conversation appears in the Inbox;
  • customer name and source are correct;
  • a human reply reaches the widget;
  • after AI reception is enabled, the AI reply reaches the real widget.

The preview on the channel settings page runs the same interactive widget, so you can type and send a message to verify reception; it is not a static mockup. The settings preview opens the chat panel by default, while the widget on a published site remains collapsed by default. Returning visitors see only their latest conversation. When no history exists, the same Home position shows Chat with support. Opening the widget does not ask for email automatically; the optional first-conversation email form appears only after the visitor selects Chat with support, then continues to the composer after submit or skip. A closed conversation remains readable; sending again starts a new reception session for the same visitor instead of creating a duplicate customer. Opening the widget, reading history, or selecting the entry alone does not add an empty conversation to the queue.

Each Website channel has its own installation identifier, visitor identity, and conversation history. Previews for multiple Website Widgets in the same workspace do not share conversations. Always copy the installation code generated by the current Website channel instead of reusing another Widget's code on a different site. Closing and reopening the same Widget, or returning Home and reopening the same conversation, preserves the current content, reading position, and already loaded brand images instead of loading from a blank screen or the first message again; new history still refreshes in the background. If AI is still generating a reply, returning Home or reopening the same conversation restores the three-dot reply indicator; another conversation does not inherit it.

Complete AI and agent replies support Markdown formatting, including headings, lists, quotes, code, links, and tables. Wide tables and code blocks scroll inside the message bubble instead of expanding the chat window. For safety, raw HTML and remote Markdown images in replies are not loaded.

The Widget follows the visitor's ordered browser language preferences. It currently supports English, Simplified Chinese, Traditional Chinese, Japanese, Korean, Spanish, Brazilian Portuguese, French, German, Indonesian, Thai, and Vietnamese. It falls back to English when none match, and a browser-language change takes effect after the page is refreshed. In channel settings, the same 12-language switch appears beside Live preview so you can inspect the Widget UI, welcome message, Home title and description, and language-specific suggested questions. The preview initially follows the tenant console language and updates when that interface language changes. Manually switching the preview language does not edit or save your source copy.

When you create a Website channel, YundaDesk automatically generates its welcome message from the visitor's browser language and the workspace brand name, not the channel name. Under Display settings, edit one source set for the Home title, Home description, and new-conversation welcome message. YundaDesk translates that copy for the visitor's browser language, so you do not maintain separate language versions. The live Widget can preview unsaved edits in the source language; when you switch to another language, it loads that translation instead of continuing to show the source copy. Knowledge suggestions also load for the preview language. If translation is temporarily unavailable, source-language merchant copy is not exposed to a visitor using another language. If the suggestion preview cannot load, it shows an explicit error and retry action instead of reporting that the knowledge base has no questions.

Manage contact methods in the separate Contact us setting for each Website Widget, rather than inside Display settings, with a maximum of eight items. Select Manage to:

  • add an already connected Telegram, LINE, WhatsApp, email, or other supported channel;
  • add a validated public link manually;
  • upload a QR code or contact image for WeChat, LINE, and similar methods;
  • use capsule switches to control visibility, reorder items, or remove them.

Editing requires the Manage channels permission. Read-only members can see the configuration but cannot change it. Other channel settings pages now show only which Website Widgets use that channel and provide a Manage in Widget link; they no longer assign Widgets in reverse. If a provider public address is not ready, you can still add the contact manually from the Widget manager.

Visitors first see the public name you configure under Manage contact methods. A connected channel without a separate public name uses that channel's configured name. Only an empty name falls back to the standard channel type in the visitor's UI language, such as 微信 in Chinese and WeChat in English. The home screen shows Contact us only when at least one public contact method is enabled. Selecting it shows enabled options such as Email, Telegram, LINE, QR codes, or contact images inside the Widget. The optional email form for identifying a visitor appears only after Chat with support is selected for the first conversation and never appears as a contact method; add a separate Email contact method when you want to publish a support address. The settings-page preview reflects enabled, ordered, and newly added contact methods before save, while sensitive configuration remains hidden from visitors. Telegram usernames appear as @username in channel settings; when one cannot be detected automatically, you can enter a valid public username manually.

Show suggestions on Home and Show suggestions in empty chats are enabled independently by default under Display settings. When safe knowledge candidates are available, Widget Home shows 1–3 questions in one list card between Chat with support and Contact us, separated by dividers. Selecting one immediately enters chat and sends it through the normal AI answer flow. When the empty-chat switch is enabled, suggestions appear below and align with the welcome message, or at the top when the welcome message is unavailable. They disappear after the first visitor message.

Troubleshooting#

  • Widget is missing: If allowed domains are configured, verify that the site's scheme, host, and port match exactly. Also check deployment and browser cache.
  • Inbound works but replies do not: Check channel state and delivery details.
  • AI does not reply: Confirm that Website is enabled in Reception settings, AI usage is available, and knowledge processing has completed.

Didn't find your answer?

Start free and try the real product, or reach out — humans are as online as the AI.