This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library
Copy & Paste the Component
Customize the Styling
Set a unique Banner ID for your banner.
Publish the Component: Deploy the component so it can be viewed in the browser.
Preview in Browser: Open the published component in your web browser.
Dismiss the Banner: Click the close button to dismiss the banner. Upon refreshing the page, you'll notice the banner no longer appears.
Reset the Banner: To display the banner again, either:
Change the Banner ID: Update the Banner ID property to a new unique value, which will reset the dismissal status.
Clear Local Storage: Open your browser's developer tools, navigate to Application > Storage, and clear all site data.
It leverages localStorage to remember if a user has dismissed the banner, ensuring it only appears if the user has not dismissed the banner. The component manages visibility states, handles user interactions like clicks and hovers, and provides extensive customization options through Framer's property controls.A key part of the implementation is the "ID" Field. The idea of the ID is that even if the user dismissed once, you can change the ID and show the banner again to the user since its a "new" announcement
For any queries and help setting up the component, contact hello@segmentui.com
If a component does not function as advertised and the issue cannot be resolved, you are eligible for a full refund under our quality guarantee. Refunds will not be provided for any other reasons, including change of mind, accidental purchase, lack of use, or expectations of features not explicitly advertised.
Nabeel
