Customizing Colors
NotifyBubble gives you full control over the colors used in your notifications so you can match your store's branding perfectly. Here's a guide to every color option available.
Primary Color
The primary color is the most prominent color in your notification. It's used for:
- The header background of the notification panel
- The bubble button background (for Bubble type)
- The CTA button background (unless you set a custom button color)
The default primary color is #0EA5E9 (a vibrant sky blue). To change it, click the color field and pick a new color or enter a hex code directly.
Tips for Choosing a Primary Color
- Use your store's brand color for a cohesive look
- Choose a color that contrasts well with white text (since the default title and icon colors are white)
- Avoid very light colors for the primary, as the title text may become hard to read
Content Background Color
This controls the background color of the notification's body area (where your content and button appear). The default is white (#FFFFFF).
You might change this to:
- A light gray for a softer look
- A brand accent color for a bold appearance
- A dark color if you want a dark mode style notification (remember to adjust your content text color too)
Text Colors
Title Color
The color of the text in the notification header. Default is white (#FFFFFF). This should contrast well with your primary color.
Content Color
The color of the body text in the notification. Default is #465563 (a dark gray). This should contrast well with your content background color.
Button Colors
Button Background Color
By default, the CTA button uses your primary color. You can override this with a custom color to make the button stand out from the header.
Button Text Color
The color of the text on the CTA button. Default is white (#FFFFFF).
Icon Color (Bubble Only)
Controls the color of the icon inside the floating bubble button. Default is white (#FFFFFF). This should contrast with your primary color since the bubble button uses the primary color as its background.
Pill Colors (Bubble Only)
If you've added pill text to your bubble, you can customize:
- Pill background color — default is #4BA951 (green)
- Pill text color — default is white (#FFFFFF)
Color Combinations That Work Well
| Style | Primary | Content BG | Content Text | Button BG |
|---|---|---|---|---|
| Clean and modern | #0EA5E9 | #FFFFFF | #465563 | #0EA5E9 |
| Bold and dark | #1A1A2E | #16213E | #FFFFFF | #E94560 |
| Warm and inviting | #FF6B35 | #FFF8F0 | #2D3436 | #FF6B35 |
| Nature inspired | #2D6A4F | #F0FFF4 | #1B4332 | #40916C |
| Professional | #2B2D42 | #FFFFFF | #333333 | #EF233C |
Best Practices
- Test readability — always make sure your text colors have enough contrast against their backgrounds
- Stay on brand — use colors from your store's existing palette
- Keep it simple — you don't need to customize every color; the defaults work well with most primary colors
- Preview first — use the editor preview to see how your color choices look before saving