> ## Documentation Index > Fetch the complete documentation index at: https://docs.chatnorris.ai/llms.txt > Use this file to discover all available pages before exploring further. # Customize the widget > How to adjust the colors, avatar, texts and overall look of the ChatNorris widget. # Customize the widget The ChatNorris widget is fully customizable. You can adjust its look so it matches your company's visual identity. Customization is available at two points: * **While creating the agent** — in step 6 of the wizard, with a real-time preview. * **At any time** — from the agent's detail page, in the **Customize** tab. ![TODO: screenshot of the customized floating widget on a website](https://mintcdn.com/chatnorris/_RNPg7jBCB9AE-Bf/images/PLACEHOLDER-widget-preview.png?fit=max\&auto=format\&n=_RNPg7jBCB9AE-Bf\&q=85\&s=8498d482f969b21b6d3a93983b82a0b2) ## Customization options ### Primary color The widget's main color. It's used for: * The header background (the chat's top bar) * The floating button that opens the widget * The message send button You can enter any hexadecimal color code (`#RRGGBB`) or use the visual color picker. > [!TIP] > > If you created the agent with your site's URL, ChatNorris automatically detects your brand's primary color and applies it as the initial value. ### Text color The **Foreground color** (in **Branding → Colors**) is the color of the text, icons and other elements shown on top of the primary color (in the header and the send button). It's white by default and you can change it with the color picker. If you created the agent with your site's URL, the creation wizard chooses it based on the luminance of the detected primary color: dark if the primary is light, white if it's dark, to ensure contrast. ### Chat background Besides the primary color, you can customize the background of the conversation panel: a solid color or a gradient (two colors). It's set in **Branding → Chat background**. ### Advanced appearance In **Branding → Advanced appearance** you can adjust, beyond colors: * **Typography** — Default, Serif, Monospace or Poppins. * **Panel roundness** — a slider from 0 to 24px for the corners of the widget panel. * **Message density** — **Comfortable** or **Compact**, to control the spacing between messages. ### Agent name and welcome message These fields live in the **Texts** sub-section (see the table below), not in Interface: * **Agent name** — the bot's name that appears in the widget header. Examples: `"Sofía"`, `"AI Assistant"`. * **Welcome message** — the first message the agent sends automatically when the widget opens. Examples: `"Hi! How can I help you today?"`, `"Hi 👋 I'm here to answer your questions about our products."` ### Agent avatar (Bot Avatar) In **Branding → Bot Avatar** you choose the image that appears next to the bot's reply bubbles. You have two options: * **Logo:** uses the logo you uploaded in **Branding → Logo**. * **Custom:** upload your own image (PNG, JPG, SVG or WebP, up to 2 MB). You can choose whether it's shown with a **Circular shape**. If there's no image, the chat icon is shown on the primary color. The Bot Avatar only affects the reply bubbles: the widget header always uses the **Logo** (**Header Icon** section), and the floating button that opens the chat is configured separately in **Chat Button** (image and size). ### Hide the button while the chat is open In **Branding → Chat Button**, the **Hide while chat is open** toggle makes the floating button disappear while the chat is open: the chat panel moves down and takes its place, and the visitor closes it with the **X** in the header. With the chat closed, the button looks as usual. It's off by default. ### Operator photo and name When someone on your team replies to a widget conversation, by default the visitor sees the 🎧 icon and the bot's name. If you turn on **Show operator photo and name** in **Branding → Human operator**, the widget shows the profile photo and first name of whoever replies. It's off by default. Each person uploads their photo in **My account → Profile** (see [Manage your account](https://docs.chatnorris.ai/en/cuenta-y-facturacion/gestionar-cuenta.md#profile-photo)). ### Quick replies Suggestion buttons that appear below the welcome message so the visitor can start the conversation with one click (up to 6). They're configured in **Texts → Quick replies**. Each quick reply can optionally have an icon — there's a built-in emoji picker to choose it without leaving the form. #### Floating quick replies You can also show quick replies as buttons **over the closed chat icon**, so the visitor can start chatting without opening the widget first. Tapping one opens the chat and sends that question (as soon as the chat is ready, for example after a required Lead Form). In **Texts**, turn on **Show over the chat icon on desktop** and/or **on mobile**, and choose: * **Behavior** — show once every 24 hours per visitor, or on every visit. * **Delay duration** — seconds from page load until the buttons appear (0 = immediately). Only the first 3 quick replies are shown over the icon. If the [hovering message](#hovering-message) is also on, the buttons appear below it, with the same style and frequency, but each with its own delay (for example, the message at 2 s and the buttons at 4 s). The **×** closes both. ### Loading text The text shown while the agent is generating a reply (by default something like "Typing..."). Customizable from **Texts → Loading text**, up to 60 characters. ### Footer text Free text in the widget footer, configurable from **Texts → Footer text**. ## How to edit the customization after creation **1. Go to the agent's detail page** In the sidebar, click **Agents** and then the agent you want to modify. **2. Open the Customize tab** There you'll find five sub-sections: | Sub-section | What it includes | | - | - | | **Branding** | Logo, colors (primary and foreground), Header Icon, Bot Avatar, Chat Button, chat background (color or gradient) and advanced appearance (typography, roundness, message density). | | **Interface** | Chat width and **maximum height** on desktop (height between 400 and 900 px, 700 by default), widget language, position (bottom right or left) and horizontal and vertical spacing. On shorter screens the chat shrinks on its own so the header always stays visible. | | **Visibility** | **Public** or **Private** widget status, a visibility schedule and hiding it on specific pages of your site. | | **Texts** | Agent name, welcome message, quick replies (with optional icons and the option to show them over the chat icon), loading text and footer text. | | **Configure** | See the full details in the table below. | **3. Make your changes** Edit the fields you need. Changes are reflected in the preview in real time. The preview also shows the closed chat, with the hovering message and the floating buttons (without the delay, so you see them instantly). **4. Save** Click **Save**. Changes are applied immediately to the widget installed on your site. ### What Configure includes The **Configure** sub-section groups the rest of the behavior toggles: | Option | What it controls | | - | - | | **Hide "Powered by ChatNorris" text** | Hides the ChatNorris branding in the widget footer. Requires the Premium plan or the add-on to remove branding. | | **Custom branding text** | Only visible if you've already removed the branding — lets you show your own text in that spot of the footer instead of leaving it empty. | | **Display rating for AI responses** | Shows 👍/👎 icons on each bot reply, with visual confirmation and a button to copy the message. | | **Capture contact after an unhelpful response** | If the visitor marks a reply with 👎, it offers them to leave their email so a human agent can follow up. Requires response rating to be on. | | **Allow users to download chat transcript** | Lets the visitor download the chat history. | | **File attachments** | The visitor can attach images (PNG, JPG, WebP or GIF, up to 5 MB) and PDF documents (up to 15 MB) during the conversation. | | **AI response sources** | Shows the visitor how many Knowledge Base sources were used to generate the reply. | | **Google Analytics integration** | Sends widget events (open, messages, etc.) to the Google Analytics of the customer's own site (gtag.js/GTM) — it doesn't require credentials from you; it connects with the GA already installed on the page. | | **Hovering Message** | A text bubble that appears next to the floating button to catch attention before the visitor opens the chat. See [Hovering message](#hovering-message). | | **Auto-open chat** | Opens the widget on its own, on desktop and/or mobile, after a configurable wait (**Delay duration**), once every 24 hours per visitor or on every visit. | | **Voice input** | Shows a microphone button in the text field so the visitor can dictate their message instead of typing it, using the browser's speech recognition (Chrome, Edge and Safari). The text is inserted in the field, not sent automatically, and the audio doesn't reach ChatNorris. You can set the recording's **Max duration** (5 to 120 s, 60 by default). Voice notes as messages are received on the [messaging channels](https://docs.chatnorris.ai/en/guias/canales-whatsapp-instagram.md#voice-notes), not in the widget. | ### Hovering message The hovering message appears over the closed chat icon. Clicking the message opens the chat; the **×** only closes it (and it's always visible, also on touch screens). It's configured in **Configure → Hovering Message**: | Option | What it controls | | - | - | | **Style** | **Card** (default: white, with the agent's avatar and name), **Glass** (translucent, shows the site behind) or **Brand color** (with the widget's primary color and text color). | | **Behavior** | Show once every 24 hours per visitor, or on every visit. With "once every 24 hours", it also doesn't appear during that period if the visitor closed the message or opened the chat. | | **Delay** | Seconds before showing the message (0 = immediately). | > [!NOTE] > > If **auto-open** would open the chat before the hovering message (or the floating buttons) appears, the tab shows you a warning so you can adjust the delays. Auto-open no longer silences the hovering message forever: only opening the chat manually or closing it silences it for 24 hours. > [!NOTE] > > The fields in this table don't necessarily follow the same order inside the dashboard's **Configure** tab — they're grouped in blocks (branding, response rating, and "Other settings", which brings together file attachments, AI sources and Google Analytics). > [!NOTE] > > You don't need to reinstall the snippet on your site when you change the customization. The widget loads its configuration dynamically from ChatNorris servers. > [!NOTE] > > In the web widget, links the agent shares in its replies (`[text](URL)`) are shown as real hyperlinks, clickable and opening in a new tab — and text in `**bold**` is shown in bold. The agent decides when to use this formatting; it's not something you configure manually. This formatting is only rendered in the web widget: on WhatsApp, Instagram and Telegram, replies are sent as plain text. > [!NOTE] > > If the visitor reloads the page while they have an open conversation, the widget automatically restores the message history (and any pending Lead Form) on reload — the visitor doesn't need to start the conversation over. ## Lead form — request details before or during the chat The lead form is no longer configured from the widget customization: it's now an agent **action**. It's configured from `My agents → [your agent] → Actions → Lead Form`, where you can define whether it's required, which fields to ask for, when it should be shown and the form's texts. See the full guide in [Agent actions](https://docs.chatnorris.ai/en/guias/acciones.md#lead-form). The details are automatically recorded in the dashboard's **Leads** section. ## Frequently asked questions > [accordion] Do widget changes apply immediately? > > Yes. When you save the changes, the widget updates on your website without reinstalling the code or changing anything in the HTML. Visitors who open the widget for the first time after the change will see the new configuration. > [accordion] Can I use the same widget on several sites with different looks? > > Currently, each agent has a single widget configuration. If you need different looks for different sites, you can create separate agents with different visual settings and use the corresponding snippet for each one. > [accordion] What size and format should the avatar be? > > We recommend a square image of at least 100×100 px. PNG, JPG, SVG or WebP up to 2 MB are accepted. If you turn on **Circular shape**, the widget crops it into a circle. > [accordion] Can I hide the widget on certain pages? > > Yes, without touching code: from `Customize → Visibility → Hide on specific pages` you can specify which pages of your site the widget shouldn't show on. You can also set a visibility schedule from the same section. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.