Customize your website chat widget

Open Dhru Chat → Settings → Channels → Messenger → Widget. These controls change the website widget’s presentation. Review your draft in the sample preview, then select Save changes to apply it.

1. Set the name and appearance

Messenger → Widget → Appearance: 1 is the AI display name, 2 selects the background, and 3 selects the primary colour. These are example settings.
Messenger → Widget → Appearance: 1 is the AI display name, 2 selects the background, and 3 selects the primary colour. These are example settings.
  1. Expand Appearance.
  2. Set AI display name (1), which appears on AI replies. This field does not replace the SI avatar.
  3. Choose Background (2), then a Pattern when offered.
  4. Set Primary color (3) and Gradient end when a gradient is used. A preset can be a starting point.
  5. Check that headings, buttons and text remain readable.

2. Choose your featured team

undefined

3. Write the welcome content

Messenger → Widget → Content: 1 is the greeting title and 2 is the suggested-question list. Greeting text and the AI introduction are configured between them.
Messenger → Widget → Content: 1 is the greeting title and 2 is the suggested-question list. Greeting text and the AI introduction are configured between them.
FieldWhat customers see
Greeting title (1)The opening headline
Greeting textA short explanation of how to get help
AI intro messageThe introduction when AI is enabled
Suggested questions (2)Up to six starter questions, one per line

Use questions your service and published knowledge can answer. A suggested question does not create an answer or process an order.

4. Preview and save

The Messenger design preview uses sample conversations and sends nothing. Check light and dark appearance here, then test the saved widget on your actual website.
The Messenger design preview uses sample conversations and sends nothing. Check light and dark appearance here, then test the saved widget on your actual website.
  1. Use the light and dark preview controls to review both appearances. Changing the selected color mode is part of your draft.
  2. Check the greeting, readability and featured profiles.
  3. Select Save changes and wait for confirmation.
  4. Reload your real website and check desktop and mobile views. The sample preview sends nothing and is not a delivery test.

The installed script can stay in place after appearance changes. See Launcher position and offsets and AI and live-chat settings for those controls.