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-10-10

Walk through the demoDemo data
Channel marketplaceDemo data
Website & email3
Web Widget

A white-label chat bubble for your site

Add1 connected
Custom API

Send and receive through your own system

Add1 connected
Email

Bring customer email into one inbox

Add
Social & messaging7
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 to serve customers

Add
Telegram

Connect a Telegram bot for customer messages

Add1 connected
Zalo OA

Connect a Zalo Official Account

Add
YouTube

Receive and reply to comments

Add
Business messaging1
WeChat Customer Service

Connect official enterprise customer service accounts

Add2 connected
Step 1 / 28
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.

Find the signed-in customer setup guide#

If the Website channel configuration shows Customer identity signing key and no key exists yet, start with Generate key on the right side of the field. For an existing key, select the eye icon on the right to reveal it. The icon then changes to Copy key; a successful copy hides the key and restores the eye icon.

Select the question mark beside the label to read the brief hint, then select Setup guide for the full instructions. You can also focus the question mark with the keyboard and press Enter. Continue to use Install code at the top of the page to view and copy the installation snippet.

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. When Ask for email is on (the default), the first-conversation email form appears only after the visitor selects Chat with support, then continues to the composer after submit or skip. Turn the switch off to open chat immediately. 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.

Set the Widget interface language#

Open Channels, select the Website Widget, and find Interface language in its configuration. Choose English for a fixed English interface, then save and refresh the published website. Reopen the channel configuration to verify the saved selection. This setting is also available on Free and applies only to the selected channel.

Choose Automatic to follow the language declared by the website, then the visitor's browser preferences if that language is missing or unsupported. Available fixed languages are English, Simplified Chinese, Traditional Chinese, Japanese, Korean, Spanish, Brazilian Portuguese, French, German, Indonesian, Thai, and Vietnamese. Automatic falls back to English when none match.

The live preview reflects your language selection before saving. With Automatic selected, the language switch beside Preview lets you simulate a visitor language without changing the saved setting. With a fixed language selected, the preview uses that language. Switching languages does not edit your source copy.

You can also ask Yuna to set a named Website Widget's interface to English or Automatic. Check the selected channel and proposed language before confirming the change. This is separate from AI reply language and the visitor default language under staff chat tools, which controls message translation rather than Widget buttons or interface text.

Ask for email#

Open Channels, select the Website Widget, and find Ask for email in website channel settings, above Hide attribution. It is on by default: when a visitor starts their first chat, the widget asks for an email and they can skip. Turn it off to open the conversation immediately.

You can also ask Yuna to turn visitor email collection on or off for a named Website Widget. Check the selected channel and the proposed setting before confirming. Turning it off does not delete emails already saved, and visitors can still share a contact later in the conversation.

When you create a Website channel, YundaDesk automatically generates its welcome message from the visitor's Widget 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 Widget 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. Suggested questions also load for the preview language. If translation is temporarily unavailable, source-language merchant copy is not exposed to a visitor using another language. The Agent's automatic-question preview offers retry on a load failure rather than reporting an empty knowledge base.

Visitors can mute notification sounds with the speaker button in the chat panel. If a new notification appears without sound, check browser sound permissions; some browsers block playback until the visitor interacts with the site.

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 an Open settings 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 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. When Ask for email is on, 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.

Under Display settings → Suggested questions, enable Home or Empty chats, then save. The switches are independent; turning both off hides questions while keeping the saved content. Select Manage to open the reception Agent, edit the display list, or regenerate candidates. See Manage suggested questions.

Brief connection interruptions do not add a persistent error banner to the home screen. If “Restoring connection” appears above the message input, select it to retry; the hint disappears when the connection recovers. A sent message confirms that message was sent successfully. If replies do not arrive, check your network or contact the website’s support team.

If the visitor session is unavailable, select the notice to retry. Displayed messages and unsent text remain in place, and you can continue chatting after recovery. If the same notice keeps returning, copy any unsent text before refreshing the website page.

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.