Customizing Notification Design

Notifications that look native to your site perform better than ones that look like third-party widgets. Activly's design editor gives you full control over appearance, position, animation, and timing — so the notification feels like it belongs on your site rather than sitting on top of it.

Design options

Colors

Background — the fill color of the notification card. White or a very light tint of your brand color tends to work well on most sites.
Text — the color of the message text. Dark colors on light backgrounds are the most readable. Aim for at least a 4.5:1 contrast ratio.
Border — a subtle border can help the card stand out from the page without a heavy drop shadow. Set to your brand color at low opacity, or disable it entirely.
Accent color — used for the product name, links, and icon highlights. This is where a brand color can add character without overwhelming the notification.

Enter hex codes directly in the color fields to match your brand exactly.

Typography

Font size — 13px or 14px is standard. Smaller than 12px becomes difficult to read at a glance.
Font family — choose "Inherit from site" to use whatever font your page already loads. This is the recommended setting for a seamless look. Alternatively, choose from Activly's bundled font options.

Border radius

Controls how rounded the notification card corners are. Options range from 0px (sharp, square corners) to 16px (visibly rounded). Match this to your site's general aesthetic — if your site uses rounded buttons and cards, match that radius in the notification.

Position

Bottom-left (default and most common)
Bottom-right
Top-left
Top-right

Bottom-left is the conventional position for social proof notifications across the web. Visitors are accustomed to it and it does not interfere with typical page interactions. Top positions are more intrusive — reserve them for high-priority messages.

Size

Standard — full notification with icon, message text, and optional product image.
Compact — a smaller format with reduced padding. Useful if you find the standard size too prominent for your site.

Timing options

Initial delay — seconds after page load before the first notification appears. A delay of 5-10 seconds gives visitors time to orient before seeing the notification. Appearing immediately on page load can feel abrupt.
Display duration — how long each notification stays visible. 5-7 seconds is the optimal range. Long enough to read comfortably; short enough that it does not overstay.
Gap between notifications — the pause between sequential notifications in a queue. A gap of 4-6 seconds prevents notifications from feeling like a rapid-fire stream.
Loop — when enabled, the notification queue replays after the last notification has shown. Useful for high-traffic pages where you want continued exposure. When disabled, each notification shows once per session.

Animation

Slide in from bottom (default) — the notification slides up into position. Subtle, familiar, and works well in any position.
Fade — the notification fades in and out. Softer than the slide; good for low-urgency notifications or announcement bars.
None — the notification appears and disappears instantly with no transition. Useful only in specific contexts.

Mobile behavior

Show on mobile — toggle to enable or disable notifications entirely on mobile devices.
Mobile position — independent of the desktop position setting. Bottom is strongly recommended on mobile — top positions risk overlapping with browser UI.
Mobile size — notifications automatically scale down on smaller screens. If the standard size feels large on mobile, switch to compact.

Tips

Use your exact brand hex codes. Approximate color matches are noticeable.
Bottom-left is the least intrusive position. If you receive feedback that notifications are disruptive, try bottom-left before reducing frequency.
5-7 seconds display duration consistently outperforms both shorter (too fast to read) and longer (starts to feel intrusive) durations.
If your site uses a chat widget in the bottom-right corner, place your notifications in the bottom-left to avoid overlap.