The Rep Console allows you to customize your chat widget button style to match your brand and optimize customer engagement. All button customization options are available through the Settings interface with a live preview to see changes in real-time.
- Access button style settings
- Button style options
- Color customization
- Position and advanced settings
Access button style settings
- Log into Rep Console at the following link: https://app.hellorep.ai/home
- In the left-hand menu, navigate to Settings > Chat Widget.
- Select the Design tab at the top and scroll down to the Button section. After making any changes, click Save and Preview.
Button style options
Available Button Styles
| Style Option | Description | Best For |
|---|---|---|
| Store Icon | Uses your store's favicon or uploaded icon | Maintaining brand consistency (default) |
| Round Icon | Circular chat icon without text | Clean, minimal appearance |
| With Text | Displays "Chat with us" button text | Clear call-to-action for new visitors |
| Hidden | Button is not visible | Special layouts or programmatic control |
Button Size Options
| Size Option | Desktop Size | Mobile Size | Use Case |
|---|---|---|---|
| Extra Large | 64px | 48px | Maximum visibility and prominence |
| Large | 56px | 42px | Enhanced visibility |
| Normal (Default) | 48px | 36px | Standard size for most stores |
| Small | 40px | 30px | Subtle presence, minimal layouts |
Note: The system automatically adjusts button sizes for mobile devices to ensure optimal touch targets.
Color customization
Button Color
- Set the primary button color using HEX codes
- Example:
#FF5722for orange,#2196F3for blue - This color applies to the button background
Notification Color
- Controls the color of notification badges that appear on the button
- Used when the AI has pending messages or proactive notifications
- Input HEX color codes (e.g.,
#FF4444for red notifications)
Position and advanced settings
While button style is the primary customization, you can also adjust:
- X and Y Axis: Fine-tune button placement
- Align To: Choose preset positions (bottom-right, bottom-left, etc.)
- Hide Chat Under Elements: Prevent overlap with site modals or headers. For more information, please refer to the following Rep help center article: Hide the Rep widget under certain page elements
Need help or advice? Reach out to us at: support@hellorep.ai