Wix Smart Chat: Designing and Customizing the Chat
Wix Smart Chat allows you to reflect your brand's voice and style by designing and customizing your chat interface. You can adjust colors, text, layout, and more directly in your editor, making it easy for visitors to use.
This personalized touch can make them feel more connected to your brand and more likely to complete their purchase. By encouraging site visitors to get in touch, you increase engagement and provide better service.
Customizing your chat layout
Choose how you want to display the chat on your site. Choose where on the page it appears and how new messages appear to visitors.
To customize your layout:
Wix Editor
Click the chat widget.
Click Settings.
Click the Layout tab.
Choose what you want to customize:
Position: Decide whether you want your chat box to appear in the bottom left or bottom right of your site.
Width and height: Choose your chat width and height, you can use default settings or customize it using the slider.
Studio Editor
Click the chat widget.
Click Settings.
Click the Layout tab.
Choose what you want to customize:
Position: Decide whether you want your chat box to appear in the bottom left or bottom right of your site.
Width and height: Choose your chat width and height, you can use default settings or customize it using the slider.
Note:
By default, the changes you make in this panel apply to all breakpoints.
Configuring the chat's text settings
Enter the text you'd like to appear when the chat is minimized or offline. Give your visitors upfront information such as its typical response time.
To configure your text settings:
Wix Editor
Click the chat widget.
Click Settings.
Click the Text tab.
Choose which mode you want to customize: AI Chat text or Manual Chat text.
Choose what you want to customize:
Header text: Enter the name you'd like to appear in the header when the chat box is open.
Input helper text: Set the default text prompting visitors to enter a message (e.g. "Type your message...").
When chat is online: Enter the text that site visitors see when your chat box is available to chat but minimized.
When chat is offline: Enter the text that site visitors see when your chat box is unavailable and minimized.
Note: This option is only available if you've selected a minimized chat layout that includes text in the Design tab.
Studio Editor
Click the chat widget.
Click Settings.
Click the Text tab.
Choose which mode you want to customize: AI Chat text or Manual Chat text.
Choose what you want to customize:
Header text: Enter the name you'd like to appear in the header when the chat box is open.
Input helper text: Set the default text prompting visitors to enter a message (e.g. "Type your message...").
When chat is online: Enter the text that site visitors see when your chat box is available to chat but minimized.
When chat is offline: Enter the text that site visitors see when your chat box is unavailable and minimized.
Note: This option is only available if you've selected a minimized chat layout that includes text in the Design tab.
Note:
By default, changes you make in this panel apply to desktop and tablet. To customize the design on mobile, go to the mobile breakpoint. Learn more about breakpoints.
Designing your chat
Design each component of the chat in your editor.
To design your chat:
Wix Editor
Click the chat widget.
Click Settings.
Click the Design tab.
Choose what you want to design:
Header
Customize your chat box header:
Background, font and button colors: Select a color from your site's theme or choose a custom color.
Font: Choose a style and font using the drop-down menus, and adjust the size using the slider.
Display AI icon: Click the toggle to display or hide the AI icon from the header.
Background
Choose how you want your chat box background to look:
Change colors: Select a color from your site's theme or choose a custom color.
Apply shadow: Click the toggle to display or hide shadow. Use the sliders to adjust the shadow opacity, blur, spread and direction.
Messages
Choose whether you want to design messages from visitors, AI messages, or cards, and customize their elements:
Colors: Select a color from your site's theme or choose a custom color.
Font: Choose a style and font using the drop-downs, and adjust the size using the slider.
Apply shadow: Click the toggle to show or hide the shadow. Use the sliders to adjust the shadow opacity, blur, spread and direction.
Customize borders: Use the sliders to adjust the border opacity, width and radius.
Input Field
Customize how the text input field looks for your users when they open the chat, hover over the field or focus (click) on it:
Customize borders: Use the sliders to adjust the border opacity, width and radius.
Colors: Select a color from your site's theme or choose a custom color.
Font: Choose a style and font using the drop-downs, and adjust the size using the slider.
Minimized Chat
Customize how your chat box looks when it's minimized.
Chat bubble: Customize the color, font, and shadow for when a chat message appears above the button.
Chat button: Customize the design for the chat button.
Design: Choose a chat box design:
Standard: The chat floats above the bottom corner of your site.
Tab: The chat is attached to the bottom border of your site.
Compact: The chat only shows your chosen AI icon without text.
Display: Choose a style for your minimized chat box: Text & icon, Text, or Icon.
Fill color: Select a color from your site's theme or choose a custom color.
Font style & color: Choose a style and font using the drop-downs.
Icon color: Choose a color for the icon (i.e. button).
Button icon: Choose an icon style from the available options.
Apply shadow: Click the toggle to show or hide the shadow. Use the sliders to adjust the shadow opacity, blur, spread and direction.
Apply nudge animation: Click the toggle to enable a nudge animation that plays when the Smart Chat sends a new message while the chat box is minimized.
Apply border animation: Click the toggle to enable an animation that brings attention to the chat.
Studio Editor
Click the chat widget.
Click Settings.
Click the Design tab.
Choose what you want to design:
Note:
By default, changes you make in this panel apply to desktop and tablet. To customize the design on mobile, go to the mobile breakpoint. Learn more about breakpoints.
Header
Customize your chat box header:
Background, font and button colors: Select a color from your site's theme or choose a custom color.
Font: Choose a style and font using the drop-down menus, and adjust the size using the slider.
Display AI icon: Click the toggle to display or hide the AI icon from the header.
Background
Choose how you want your chat box background to look:
Change colors: Select a color from your site's theme or choose a custom color.
Apply shadow: Click the toggle to display or hide shadow. Use the sliders to adjust the shadow opacity, blur, spread and direction.
Messages
Choose whether you want to design messages from visitors, AI messages, or cards, and customize their elements:
Colors: Select a color from your site's theme or choose a custom color.
Font: Choose a style and font using the drop-downs, and adjust the size using the slider.
Apply shadow: Click the toggle to show or hide the shadow. Use the sliders to adjust the shadow opacity, blur, spread and direction.
Customize borders: Use the sliders to adjust the border opacity, width and radius.
Input Field
Customize how the text input field looks for your users when they open the chat, hover over the field or focus (click) on it:
Customize borders: Use the sliders to adjust the border opacity, width and radius.
Colors: Select a color from your site's theme or choose a custom color.
Font: Choose a style and font using the drop-downs, and adjust the size using the slider.
Minimized Chat
Customize how your chat box looks when it's minimized.
Chat bubble: Customize the color, font, and shadow for when a chat message appears above the button.
Chat button: Customize the design for the chat button.
Design: Choose a chat box design:
Standard: The chat floats above the bottom corner of your site.
Tab: The chat is attached to the bottom border of your site.
Compact: The chat only shows your chosen AI icon without text.
Display: Choose a style for your minimized chat box: Text & icon, Text, or Icon.
Fill color: Select a color from your site's theme or choose a custom color.
Font style & color: Choose a style and font using the drop-downs.
Icon color: Choose a color for the icon (i.e. button).
Button icon: Choose an icon style from the available options.
Apply shadow: Click the toggle to show or hide the shadow. Use the sliders to adjust the shadow opacity, blur, spread and direction.
Apply nudge animation: Click the toggle to enable a nudge animation that plays when the Smart Chat sends a new message while the chat box is minimized.
Apply border animation: Click the toggle to enable an animation that brings attention to the chat.
