NatiqDocs

Appearance

Open Natiq

Customize Web Chat

Brand your chat widget with colours, avatar, launcher, texts, a welcome screen and a persistent menu from the Design tab.

Updated 7 Nov 2026 2 min readNeedsbuilder.bots:write

The Design tab of an agent controls how its Web Chat widget looks. You edit on the left and see the real widget on the right, updating as you go.

Open the Design tab ​

  1. Open Agent Builder and open the agent.

  2. Go to the Design step (between Build and Share).

  3. Edit the settings, then select Save in the toolbar. Discard throws away unsaved edits.

Both buttons stay disabled until you change something. A saved design applies to the agent's Web Chat embed. Pasted snippets don't change.

Appearance ​

The Appearance tab has these sections:

Appearance settings on the left; the preview on the right changes as you edit.
  1. 1Controls
  2. 2Live preview
SectionWhat you set
Brand colorOne colour. Gradients, hovers and tints are derived, and text stays readable. Choose Light, Dark, or follow the visitor's device theme.
IdentityBot display name, Status tagline and an avatar, uploaded or by image URL. Square images work best.
ShapeCorner style (Rounded, Soft, Square) and Shadow intensity.
FontNatiq default, Inter, Roboto or Tajawal.
Launcher & placementBottom right or Bottom left, side and bottom spacing, and the button icon: a preset or your own image.
Conversation textsThe Input placeholder and Default language (English or Arabic).
Welcome screenAn optional pre-chat form, below.
Composer toolsTurn File attachments and Voice notes on or off. Off hides the button.
FooterShow or hide "Powered by Natiq".

Reset to default puts every setting back to Natiq's built-in look; nothing is saved until you select Save.

Uploaded images

Uploads are stored on your workspace. If file storage isn't enabled in your environment, paste a hosted image URL instead.

The welcome screen (pre-chat form) ​

Turn on Ask before the chat starts and new visitors see a screen once before the conversation. Turn it off to start the conversation straight away.

Before the first message, the chat asks the visitor for a name. Turn the welcome screen on or off in Design.
  • Set the Heading, Message, Button label and an optional Footnote.
  • Under What to ask for, choose Name and/or Email address. Every field you ask for is required before the chat starts. The name is shown to agents as the visitor's name.
  • With nothing to ask for, the screen is skipped.

The persistent menu ​

On the Menu tab, add items that visitors reach from the ⋮ button in the widget header. Pick a Menu language and Menu title, then add items with a label and one of three actions:

Add the items visitors reach from the widget’s ⋮ button; the preview shows the menu as you type.
  • Open link, with a URL;
  • Send payload, which sends a value your flow can route on;
  • Submenu, which holds one level of sub-items.

You can reorder items with Move up and Move down. With no items, the widget uses its default menu.

Add Web Chat to your websiteGet the snippet and widget key.