Customizing the Appearance of Your Chat Widget
Your Chat Widget may be one of the first interactions a visitor has with your brand. Give them a consistent experience by customizing your widget to reflect your brand’s colors, images, and personality.
In this article:
- Changing Widget Appearance
- Selecting Launcher Appearance
- Choosing Colors
- Choosing Position
Changing Widget Appearance
Turn your widget into a true reflection of your brand. Head to Settings > Messenger Setup > Chat Widget to get started.
In the Appearance tab, choose a launcher icon, primary color, text color, and widget position. Any changes will update in the Widget preview. Press Save Settings to update on your site.
Selecting Launcher Appearance
Visitors access the widget through the launcher. Make your launcher as visible or discreet as you need it to be.
Let your visitor know you’re ready to chat with a catchy message and graphic.
Don’t have much space to spare? Use the more subtle, circle launcher.
Use the Tab option to let visitors know they can get in touch via video, voice, or chat.
Custom Launcher Icon
Have a brand logo or custom graphic you’d rather use? Custom Launcher lets you choose any picture you want. Upload a jpeg, png, or even a gif. The best part? Your image automatically resizes to fit the circle launcher, so no heavy editing required.
Create a branded look by customizing your widget’s color. Primary Color changes your launcher and widget’s background color. Color Scheme changes your launcher and widget’s text. Type in a Hex color code or select a color from the palette.
Tip: Use a dark Primary Color with white, or a light Primary Color with black, to make your messages pop!
Choose the position that makes the most sense for your website. All widgets start at the bottom right (0,0).
Got lots of text images on one side of your site? Set your widget’s Alignment to the left or right as needed (measured in pixels).
You can also choose how far left or right with Side Spacing.
Move your widget up with Bottom Spacing.
Click Save Settings when you’ve finished making any changes.
Want more flexibility? Style the widget with Custom CSS by heading to Settings > Messenger Setup > Advanced Settings.