How To Install The Notification Box Component

The Notification Box component displays attention-grabbing notifications styled like text messages. This guide covers installation, configuration, and customization options including avatar, CTA buttons, positioning, and animations.

Quick Start

Insert the Notification Box component at the page level, at the bottom of the page, or in a Page Template
Set the component height to 1px in the properties panel so it doesn't take up space on the canvas
Set your notification text and link URL in the Content section
Choose the position (top-left, top-right, bottom-left, or bottom-right)
Customize the avatar, styling, and CTA button as needed
Set the delay time if you want the notification to appear after page load
Test in preview mode to see the slide-in animation

Important: This component should be placed at the page level, at the bottom of the page, or in a Page Template, and set to 1px height. The notification will appear as a floating element and won't affect your page layout.

Properties

Property	Description
Notification Text	The main message text displayed in the notification box
Link URL	Select a page from your site or enter a URL. Uses Framer's native Link control to show available pages
Open in New Tab	Toggle to open the link in a new tab (Yes) or the same tab (No)
Position	Corner position for the notification (top-left, top-right, bottom-left, bottom-right)
Inset X	Horizontal distance from the edge of the screen
Inset Y	Vertical distance from the edge of the screen
Z-Index	Controls the layering order of the notification
Max Width	Maximum width of the notification box
Delay	Time in seconds before the notification appears (0-10 seconds)
Show Avatar	Toggle to show or hide the avatar image
Avatar Image	Image displayed as the avatar
Avatar Size	Size of the avatar in pixels
Gap	Space between avatar and text content
Container Background	Background color of the notification box
Padding	Internal spacing of the notification box
Border Radius	Corner rounding of the notification box
Border Width	Thickness of the border (set to 0 to remove border)
Border Color	Color of the border
Border Style	Style of the border (solid, dashed, dotted)
Shadow	Toggle to enable or disable the drop shadow
Text Color	Color of the notification text
Text Font	Font styling for the notification text
Show CTA Button	Toggle to show or hide the call-to-action button
CTA Text	Text displayed on the CTA button
CTA Style	Button style option (text only or with background)
CTA Background	Background color of the CTA button (when style is "background")
CTA Text Color	Text color of the CTA button
CTA Padding	Internal spacing of the CTA button
CTA Border Radius	Corner rounding of the CTA button
CTA Font	Font styling for the CTA button text
CTA Gap	Space between notification text and CTA button
Show Dismiss	Toggle to show or hide the dismiss text link
Dismiss Text	Text displayed for the dismiss option
Dismiss Text Color	Color of the dismiss text
Dismiss Font	Font styling for the dismiss text

Troubleshooting

Issue: Notification doesn't appear

Check that the delay setting isn't too long, and verify the component is properly placed on the canvas. The notification appears after the delay time has elapsed.

Issue: Notification appears in wrong position

Adjust the Position property and use Inset X and Inset Y to fine-tune the exact placement. The notification slides in from the direction matching its position.

Issue: CTA button doesn't open link

Verify that the Link URL is properly set and includes the full URL (e.g., https://example.com). The link opens in a new tab when clicked.

Issue: Notification overlaps other content

Increase the Z-Index value to ensure the notification appears above other elements. Default is 999, but you can set it higher if needed.

Issue: Avatar image not showing

Make sure "Show Avatar" is enabled and that you've uploaded an image in the Avatar Image property. Check that the image URL is valid and accessible.

Component Doc

Quick start tutorial