Customizing Chat Appearance

The Look & Feel section gives you control over how your Widgion widget looks and how users interact with it. You can customize the widget’s colors, layout, launcher button, tabs, widgets, fonts, and translations to match your brand and support experience.

Go to Customize, then the Look & Feel section to access these settings.

Colors & Appearance

The Colors & Appearance section lets you customize the visual identity of your chat widget to match your brand. You can select the widget theme, set your primary and text colors, configure the dark mode color, and use custom HEX values where needed.

You can also add your brand logo and upload a background image for the widget. These settings allow you to bring your existing brand elements into the chat experience while keeping the interface visually consistent with your website.

Widget Layout

The Widget Layout section controls how the chat interface is structured and how users navigate through it. You can choose between the Modern Layout and Classic Layout, depending on the type of experience you want to provide. The Modern Layout includes dedicated sections such as Home, Messages, Help, FAQs, and News, giving users access to different areas of your support experience from within the widget.

The Classic Layout provides a simpler experience focused primarily on conversations. It displays the chat message interface without the additional navigation sections available in the Modern Layout, making the interface more focused on direct communication.

Display Type

The Display Type section determines how the chat widget is presented when users interact with it on your website. Widgion provides two options: Bottom Placement and Side Drawer, allowing you to choose how the widget occupies space within the page.

With Bottom Placement, the chat opens as a floating interface at the bottom of the page. Side Drawer opens the chat from the side of the screen and provides a larger surface for the support experience.

Widgets

The Widgets section allows you to control the elements available within your chat interface. You can configure existing widgets to determine how they appear and behave, while also adding new widgets when you need to provide additional functionality to users.

Available widgets include Ask a Question, Knowledgebase Articles, FAQs, and News & Release. These elements can be managed according to the type of support content and actions you want users to access from within your widget.

Configure Tab Menus

The Configure Tab Menus section allows you to control which navigation tabs are displayed within your chat widget. You can enable or disable tabs such as Home, Messages, Help, FAQs, and News, giving you control over the sections users can access from the widget interface.

You can also select the language used for these tab labels. This makes it possible to keep the navigation consistent with the language and terminology used throughout your support experience.

Font Family

The Font Family section allows you to choose the typeface used throughout your chat widget. Select a font that fits your brand and provides a consistent visual experience across the different areas of the widget.

The selected font is applied to the widget interface, helping maintain consistency between your support experience and the rest of your website.

Translations

The Translations section gives you control over the text displayed throughout your chat widget. You can select a language and customize different interface messages instead of relying solely on the default wording provided by Widgion.

Translations are organized into areas such as Homepage Translations, Messages, and Conversation Terms. This allows you to customize greetings, search prompts, AI prompts, messaging actions, conversation controls, and other interface text to match your preferred wording and language.

Launcher Button

The Launcher Button section lets you customize the button visitors use to open your chat widget. You can control its position and type, choose how the button is displayed, and customize its icon to match the visual style of your website.

You can also adjust the button’s horizontal and vertical spacing for more precise placement and apply an animation to the launcher. These options give you control over how the launcher looks, where it appears, and how it behaves when users interact with it.

Putting It All Together

Once you’ve configured your widget’s appearance, layout, launcher, widgets, navigation, fonts, and translations, you can use the preview to see how everything comes together. This gives you a clear view of how the widget will appear and behave for users across the different areas you’ve customized.

Take a moment to review each setting and make any adjustments needed to keep the experience consistent with your brand. When you’re satisfied with the result, save your changes to apply the updated configuration to your widget.