Announcement Bar: Overview and Working

Welcome to the Announcement Bar setup guide!

The Announcement Bar is a powerful tool designed to help you communicate important messages to your customers directly on your website.

Whether you're promoting sales, sharing updates, or highlighting special offers, this feature ensures your announcements are seen by visitors. 

In this overview, we'll guide you through the initial setup and customization options to maximize the impact of your announcements and enhance your customer engagement.

Want to set up your Kefi Announcement Bar? Here’s how.

STEP 1

Start with the onboarding. Click on ‘Next’.

STEP 2

Enable Kefi Core Snippet and click on ‘Next’.

Here’s how you can Enable Core Snippet to see bars in your shop, if it isn’t already enabled.

On the redirected page, enable ‘Kefi Core Snippet’ and then click on ‘Save’ and ‘Next’.

STEP 3
To create your First Bar, click on ‘Create Bar’

STEP 4

Get back to your Kefi App. In this case, we’d be working with the ‘ANNOUNCEMENT BAR’. Select on ‘Create Bar’.

STEP 5

You can select from the sample templates - All, Simple, Gradient, Image. Or, you can click on ‘Custom Template’ to create your template.

STEP 6

On the redirected page, begin with the Content section. You can add the details here such as the messaging information - name, announcement type and announcement message.

An announcement message is a brief, attention-grabbing notification displayed on your website to inform visitors about important updates, promotions, or events.


Additionally, you can also upload an icon to enhance the look of your free shipping bar and attract more attention from customers. Or, even add Subtext and Call to Action.

Once satisfied, click on ‘Next’. The preview of the same is also available side-by-side.

STEP 7

In the Design section, you can work on your bar design and styling. On the right side, as you make the changes, you can also view the preview for Desktop and Mobile.

1. Templates: Choose from a variety of pre-designed templates to quickly set up your announcement with a professional look.

2. Styling: Customize the colors, fonts, and layout to match your store's branding.

3. Additional Styling: In this section, you can select the bar position, link to the button, set a button animation from various options and more.

STEP 8

In the Additional Styling section, you can set the Bar Position, Call to Action Styles, Text Color, Background Color, Button Animation, and Include Close Button.

STEP 9

On completion of the design of your announcement bar, click ‘Next’.

STEP 10

The ‘Target’ section is divided into four parts:

1. Page Targeting: Select specific pages where the announcement bar will be displayed to ensure it reaches the intended audience effectively.

2. Device Targeting: Customize the appearance of the announcement bar for both desktop and mobile devices to ensure a consistent and engaging experience.

3. Customer Targeting: Display the announcement bar to particular customer groups based on their behavior, location, or purchasing history. Personalize the experience to increase relevance and engagement.

4. Advanced: Implement custom rules and conditions to optimize the bar’s performance and effectiveness, tailoring it to your unique needs and marketing strategies.

STEP 11

In the Target section, start with Page Targeting.  You can decide on which page you want to show your announcement bar. Simply select the option that best suits your requirements.

STEP 12

Next, move on to ‘Device Targeting’. In this step, you can select the device on which you wish to display your Announcement bar.

STEP 13

Then comes the ‘Customer Targeting’ section, wherein you can select the kind of customers you want to target your announcement bar. 

STEP 14

Finally, move on to the ‘Advanced’ section. Here, you will get more options to target your specific audience/customers to display your announcement bar. Make the necessary changes.

STEP 15

You can check the preview of the Announcement Bar from the right side of the screen. Switch easily between Desktop and Mobile devices. Once you are happy with what you see, click ‘Save’.

STEP 16

Now, activate your Announcement bar by clicking on ‘Activate’ to display the announcement bar on your store.

And Congratulations! Your Announcement Bar is ready!