--- id: "faq-9534" type: "faq" lang: "en" title: "How to configure the widget's appearance?" url: "https://binomai.com/faq/how-to-configure-the-widgets-appearance/" translation_group: "faq-9326" translations: ru: url: "https://binomai.com/ru/faq/kak-nastroit-vneshnij-vid-vidzheta/" markdown: "https://binomai.com/ai/ru/faq/kak-nastroit-vneshnij-vid-vidzheta.md" uk: url: "https://binomai.com/ua/faq/kak-nastroit-vneshnij-vid-vidzheta/" markdown: "https://binomai.com/ai/ua/faq/kak-nastroit-vneshnij-vid-vidzheta.md" published: "2026-07-30T19:28:11Z" updated: "2026-10-21T01:05:25Z" --- # How to configure the widget's appearance? *Updated: 21.10.2026, 01:05 UTC* Visual customization makes the chat an organic part of your website, which increases users' trust in the brand. **How to set up** 1. In the branding settings ([Integrations section → Widget tab](https://app.binomai.com/cabinet/binom/integrations?tab=2)), upload the company logo and background image. 2. In the integrations section, set up the color palette (background, buttons, fonts), the corner rounding radius of the window, and the widget's position on the screen. 3. Set up the greeting text and the button label. **Result** You get a uniquely designed widget that fully matches your company's corporate style. --- ## Updated on 19.10.26 You can customize the Binom chat widget (color, logo, button label, window size, and how often the greeting appears) in Integrations → Widget. This makes the online consultant button look like part of your website, and visitors immediately understand that it is your company's consultant. ## Where to configure Open [Integrations → Widget](https://app.binomai.com/cabinet/binom/integrations?tab=2). All changes appear on the right, in the "Chat preview" block. To save them, click "Update". You don't need to change the code on your site: the widget picks up the new settings automatically. ## Window size In the "Chat size" block, specify the width and height of the window in pixels. ## Colors and window style By default, the widget uses the shared colors from [Settings](https://app.binomai.com/cabinet/binom/settings) → the "Branding" tab, the same ones used for the iFrame and the public link ([how to set a unified brand style](https://binomai.com/faq/brand-colors-chat-window/)). To give the widget its own colors, select "Configure appearance separately". The following blocks will appear: - "Chat color": "Chat background color", "Chat icon color", "AI employee message background color", "AI employee message font color", "User message background color", "User message font color", "Message input font color", "Message input icon color"; - "Style and design": corner rounding, inner padding, and the spacing between messages. ## Widget button In the "Widget icon settings" block: - **"Priority icon language"**: the language of the labels on the button. - **"Show greeting card"**: "On every page" or "Once per session". Choose the second option if you don't want the greeting to appear on every page transition. - **"Custom icon label"**: a short text next to the button, for example "Ask a question". - **"Label display time (seconds)"** and **"Label color"**: how many seconds the label is visible and what color it is. - **"Widget logo"**: PNG, JPEG, WebP, or GIF up to 5 MB. An animated GIF is shown both on the button and in the pop-up panel. ## Greeting The text of the first message is set not here but in [Settings](https://app.binomai.com/cabinet/binom/settings) → the "Main" tab, in the "Welcome message" field (up to 250 characters). For product pages, there is a separate "Product page greeting" field. Click "Save changes": the page will reload to apply the settings. ## Possible issues ### The message "Choose PNG, JPEG, WebP, or GIF up to 5 MB" **What to do:** save the logo in one of these formats and reduce the file size. **How to tell it's resolved:** the logo appears in the preview. ### The card is gray and marked "Not available on your plan" **What this means:** the public chat, iFrame, and Widget are included in one plan option, and it is not part of your plan. On the free Free plan, installing the widget and iFrame is not available ([Free plan limitations](https://binomai.com/ru/faq/v-chem-klyuchevye-ogranicheniya-besplatnoj-versii-free-po-sravneniyu-s-platnymi-tarifami/)). In the code block, instead of the code, you will see the message "Your plan does not include the widget integration". **How to upgrade to the required plan:** 1. Find out which plan you need: in the [Integrations](https://app.binomai.com/cabinet/binom/integrations) section, hover over the gray card. The tooltip "Upgrade to the plan ..." will name the most affordable plan that includes this integration. For how the Free, Basic, Pro and Business plans differ, see [how much Binom AI costs](https://binomai.com/ru/faq/skolko-stoit-ispolzovanie-platformy-binom-ai-i-ot-kakih-faktorov-zavisit-itogovaya-stoimost/). 2. Open [Subscription](https://app.binomai.com/cabinet/subscription). If you are on the free plan, click "Choose plan". If you are on a paid plan, click "Compare plans". 3. Select a plan and a billing period (monthly, every 3 months or annually), then click "Confirm and pay". The payment page will open. 4. After payment, you will see "Subscription payment successful!". Go back to [Integrations → Widget](https://app.binomai.com/cabinet/binom/integrations?tab=2). The card will be marked "Available". Want to try it first? The 7-day trial includes the features of the Basic plan: [how to subscribe or start a trial](https://binomai.com/faq/how-to-subscribe-or-start-a-trial/). If you see "Payment was not completed. Your plan has not changed" after paying, try the payment again or write to support@binomai.com, including your account email and the plan you selected. ## More Questions ### How do I change the color of the chat button on my website? On the [Integrations → Widget](https://app.binomai.com/cabinet/binom/integrations?tab=2) tab, select "Customize appearance separately" and set the colors. If this is not selected, the [general chat appearance from the "Branding" tab](https://binomai.com/faq/brand-colors-chat-window/) is used. ### Can I add my own logo to the chat? Yes, in the "Widget logo" field on the [Widget](https://app.binomai.com/cabinet/binom/integrations?tab=2) tab: PNG, JPEG, WebP or GIF up to 5 MB. ## What's Next - [How to install the widget on your website](https://binomai.com/faq/how-to-install-the-widget-on-the-website/) if the widget is not yet on your site - [How to set a single brand style for all chats](https://binomai.com/faq/brand-colors-chat-window/) - [How to set up the AI employee's communication style to match the brand's Tone of Voice](https://binomai.com/faq/how-to-adjust-an-ai-employees-communication-style-to-match-my-brands-tone-of-voice-spirit-and-values/)