Colors
Every notification has several color options you can customize to match your brand:
| Color Setting | What It Controls |
|---|---|
| Background Color | The main background of the notification panel |
| Text Color | The color of your notification content |
| Pill Color | The color of the floating bubble or pill badge |
| Bubble Icon Color | The color of the icon inside the bubble |
Tips for Choosing Colors
- Use your brand colors to make notifications feel like a natural part of your website
- Make sure there's enough contrast between background and text colors for readability
- Choose a pill color that stands out from your website background so visitors notice it
- Test your colors using the live preview before saving
Dimensions
You can adjust the size of your notification panel:
- Width: Control how wide the notification box appears (in pixels)
- Height: Control how tall the notification box appears (in pixels)
The notification will automatically scroll if your content is longer than the set height, so visitors can always read everything.
Recommended Sizes
| Content Type | Suggested Width | Suggested Height |
|---|---|---|
| Short announcement | 300px | 200px |
| Detailed update | 350px | 300px |
| Long form content | 400px | 400px |
Positioning
Choose where your notification appears on the page:
- Bottom Left: Common for chat style notifications
- Bottom Right: Popular for announcements and updates
- Top Left: Good for navigation related notices
- Top Right: Great for alerts and warnings
- Center: Best for important messages with overlay enabled
Margins
Fine tune the exact position with margin sliders:
- X Margin: Adjusts the horizontal distance from the edge of the screen
- Y Margin: Adjusts the vertical distance from the edge of the screen
Use margins to make sure your notification doesn't overlap with other elements on your website like navigation bars, chat widgets, or cookie banners.
All notifications are automatically responsive and will adapt to mobile screens. They will never extend beyond the edges of the screen on any device, regardless of the width and margin settings you choose.