The Rep widget can be fully customized to match your brand's aesthetic and positioned exactly where you want it on your website. This guide will walk you through changing the widget's colors, positioning, and appearance using the Rep Console.
Access widget customization options
- Log into the Rep console at the following link: https://app.hellorep.ai/home
- Navigate to Settings > Chat Widget
- You'll see two main tabs:
- Design: Controls colors, appearance, and positioning
- Settings: Controls visibility and deployment options
Customize widget colors
Color options available
In the Design tab, you can customize the following color elements:
- Primary Color: Main color for message bubbles and buttons
- Secondary Color: Accent color for UI elements
- Background Color: Chat window background
You can also use the toggle named "Use different colors for proactive approach mode" to further customize the colors used for Rep's proactive sales approach. For the proactive mode, you can change the following colors:
- Message color
- Button X
- Chip
- Chip text and border
Change colors
To adjust any of the widget colors:
- Click on any color field to open the color picker.
- Enter a HEX color code (e.g.,
#FF5733) or use the visual color picker.
The second slider controls the transparency level—moving the slider all the way to the left will make the background color completely transparent, whereas moving the slider all the way to the right will make it completely opaque.
- Colors will update in real-time in the Live Preview Panel on the right.
Position your widget
The Rep widget offers flexible positioning options.
In the Align To field, you can choose any of the following preset positions:
- Bottom Right (default)
- Bottom Left
- Top Right
- Top Left
- Bottom Center
- Top Center
- Center Left
- Center Right
Alternatively, for precise control, you can set the following custom coordinates:
- X-axis: Distance from left or right edge (e.g., 20px, 5%)
- Y-axis: Distance from top or bottom edge (e.g., 85px, 10%)
- Horizontal Alignment: LEFT or RIGHT
- Vertical Alignment: TOP or BOTTOM
Need help or advice? Reach out to us at: support@hellorep.ai