Contact Widget Design
The Design section enables full customization of the widget’s appearance to ensure consistency with your brand identity and user experience standards.
All modifications applied in this section are instantly reflected in the interactive live preview, allowing you to review visual changes in real time.
You can also toggle between desktop and mobile views to verify how the widget will adapt to different device types and screen sizes.
The following configuration options are available within this section:
- Header Background and Patterns: Choose either a solid color, a gradient, or a pattern for the header background. You can select the one of predefined patterns to enhance the visual appeal or upload your own custom pattern that fits your brand, creating a unique look for the widget.
- Basic color: Set the primary color for the widget, which will be used throughout its various elements. Additionally, customize the colors of specific elements such as icons, fonts, and buttons to ensure consistency with your branding.
- Header Size: Select whether the widget should have a longer or shorter header to fit your design preferences.
- Company Logo: Upload your company logo to be displayed within the widget, enhancing brand recognition.
- Avatars: Add custom agent avatars to personalize the interaction or choose from a selection of pre-made avatars that are available.
- Corner: Adjust the widget’s shape by selecting more rounded corners or sharper edges, allowing for further customization of its appearance.
- Fonts: Choose from a selection of available fonts to customize the text appearance within the widget, ensuring it aligns with your brand identity.
- Widget Icon: Choose from a variety of available icons to be displayed on the widget button, making it visually appealing.
- Video backgrounds – Enables the Agent to personalize their video view by uploading a custom background image.
- Positioning: Decide whether the widget will appear on the right or left side of the webpage, ensuring it fits seamlessly into your layout. Define the pixel margin from the edge of the page to prevent overlap with other elements, ensuring the widget is easily accessible and visually integrated.