Notification Feed
Notification Feed
Welcome to the “Notification Feed” documentation.
Looking to integrate a notification feed into your website? Our block helps you keep your users informed about the latest events and announcements.
In this guide, we'll show you how to use the editor to customize your notification feed block.
Step 1: Open the Editor
1. Go to Notification Feed template.
2. Click on "Edit" after choosing your template.
class="" alt="">Step 2: customize the content
In this panel, you will edit each of sidebar content and button style.
class="flex justify-center items-start h-auto w-96" alt="">1. Begin with the sidebar, where you can easily add, remove or rearrange notifications as needed.
class="flex justify-center items-start h-auto w-auto" alt="">2. Customize each notification by uploading an image, inserting a link, and editing the content, including the title and description.
Additionally, you have the option to add, remove, and edit tags.
class="" alt="">3. When configuring the button, start by selecting its display style: Float or Inline.
class="flex justify-center items-start h-auto w-auto" alt="">Then, for each style, customize its roundness, margin, and position, edit the label and icon, and choose whether to show or hide the ping.
class="flex justify-center items-start h-auto w-auto" alt="">Step 3: Configure settings
Here, you'll handle the notifications settings where you can make decisions on whether to display the overlay, fine-tune the roundness of cards and tags, select the sidebar position, and input labels for each header and tooltip share.
class="flex justify-center items-start h-auto w-auto" alt="">Step 4: Choose Colors
Within this panel, you can select colors that match your website's design.
class="flex justify-center items-start h-auto w-96 h-auto " alt="">Step 5: Preview
Lastly, you can click on “Preview” to see how your notification feed block looks on both desktop and mobile devices. After this, you can proceed to the next step.
class="flex justify-center items-start h-auto w-auto" alt="">