# Announcement Bar

## Introduction

The Announcement Bar extension on the Fynd Commerce lets you add a customizable bar to the top or bottom of your website. You can use this bar to display upcoming sales and promotional offers or highlight important information like shipping deadlines.

## Steps to use Announcement Bar Extension

1. Go to **Extensions** on the Fynd Platform.
2. Click on the **Announcement Bar** Extension.


![QG4](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/1.png)

center
em
Figure 1: Opening Announcement Bar
br
Once you install the extension, it will be available in the extension list.

1. Select the desired sales channel. Here, we have selected “**shubham**“.


![QG4](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/2.png)

center
em
Figure 2: Selecting Sales Channel 
br
1. Click **Manage Bar.** This is where you will see all the announcement bars that you have configured and saved.


![QG4](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/3.png)

center
em
Figure 3: Clicking Manage Bar 
br
### Manage Bars

You can create and customise a new announcement bar, or update an existing one.

1. Click **Manage Bar**. A list of announcement bars will be displayed.


![QG4](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/3.png)

center
em
Figure 4: Clicking Manage Bar
br
1. Click **Create New.**


![QG4](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/4.png)

center
em
Figure 5: Clicking Create New
br
The list will be empty if you haven't configured and saved any announcement bar for your sales channel already.

1. Select from the various options available for the **Announcement Bar**.


![QG4](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/5.png)

center
em
Figure 6: Different Announcement Bars
br
* **Announcement Bar** enables users to display important announcements or promotions to their website visitors.
* **Countdown Timer Bar** enables users to display an attention-grabbing timer bar to their website to increase urgency and encourage customers to take action.
* **Free Shipping Bar** enables users to display notification bar to their website, informing customers of a free shipping promotion or offer.
* **Contact Form Bar** enables users to add a contact form to their website's announcement bar.
* **Social Share Bar** enables users to add social media sharing buttons to their website's announcement bar.
* **Rotating Announcement** enables users to add multiple announcements in a single announcement bar.


1. To configure your announcement bar, first, enter a name for it in the text field labelled **Enter Campaign name** (e.g., Christmas Countdown).
2. Click **Configure**.


While each type of announcement bar has different configurations for you to modify, most configurations are common for all types of bars, this includes:

* **Display Configuration**
* **Content**
* **Call to Action**
* **Delay Timer**
* **Target Page and Platform**


Learn more about [Common Configurations](https://platform.fyndx1.de/commerce/docs/extensions/available-extensions/announcement-bar#common-configurations).
Learn more about the configurations that are specific and unique for each bar here, [Unique Configurations](https://platform.fyndx1.de/commerce/docs/extensions/available-extensions/announcement-bar#unique-configurations)

### Common Configurations

##### Display Configuration

![QG4](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/6.png)

center
em
Figure 7: Display Configuration Options
br
1. **Bar Position**: Choose where to display your announcement bar - Top or Bottom of the screen.
2. **Bar Background**: Select the type of background - Solid or Pattern, for the bar background.
  1. **Solid**: Click on it to keep your bar background a solid colour.
  2. **Pattern**: Click on it to select the pattern from the drop-down menu for your bar background.
3. **Background Color**: Select the solid colour background for your announcement bar.
4. **Close Icon**: Turn on to display a close icon for users to dismiss the announcement bar.
5. **Icon Color**: Choose a colour for the close icon.
6. **Make the bar sticky**: Enable this option to keep the bar in a fixed position on the page even when the user scrolls.


##### **Content**

![QG4](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/7.png)

center
em
Figure 8: Content Configuration Options
br
To showcase your message in the announcement bar of your website, enter the desired content in the provided space.

##### **Call to Action**

![QG4](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/8.png)

center
em
Figure 9: CTA Configuration Options
br
1. **Call To Action**: You can turn on or off by toggling this button - to add or remove CTA.
2. **Type**: Select the suitable type of call to action from the options - Button and Link.
3. **Category**: Select the desired category for your CTA.
  1. **Link**: When someone clicks on the link, it will redirect the user to that web page.
  2. **Email**: When someone clicks on the Email, it will redirect the user to the compose email screen.
  3. **Mobile Number**: When someone clicks on the Phone number, it will redirect the user to the call screen.
4. **Button Text**: Enter the desired text for your button or link, which will appear as a button text or link text, respectively.
5. **Link**: Enter the relevant input based on the category you have selected.
6. **Button Color**: Choose the colour of the button.
7. **Text Color**: Choose the colour of the text on the button.
8. **Wiggle Button**: By enabling this feature, your Button Text will be accompanied by a three-second shake animation. This animation can help draw attention to the button and add a dynamic element to your announcement bar.


##### **Delay Timer**

![QG4](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/9.png)

center
em
Figure 10: Delay Timer Configuration Options
br
1. **Delay Timer**: Enabling this feature allows you to control the delay time for displaying the announcement bar on your website.
2. **Show Bar**: Select the delay duration for when the announcement bar should appear on the page when it is loaded for the first time.
3. **Timer**: Please input the desired time in seconds for the announcement bar to reappear after the user has closed it.


##### **Target Page and Platform**

![QG4](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/10.png)

center
em
Figure 11: Target Page and Platform Configuration Options
br
1. **Page**: Select the web pages where you would like your announcement bar to appear on your website.
2. **Platform**: Select the platforms where you want to display your announcement bar.


### Unique Configurations

##### For Announcement Bar

The Announcement Bar does not contain any unique configurations. Only refer to [Common Configurations](https://platform.fyndx1.de/commerce/docs/extensions/available-extensions/announcement-bar#common-configurations).

##### For Countdown Timer Bar

![QG4](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/11.png)

center
em
Figure 12: Countdown Timer Bar Configuration Options
br
1. **Start Date**: Select the start date for your announcement bar.
2. **Start Time**: Select the start time for your announcement bar.
3. **End Date**: Select the end date for your announcement bar.
4. **End Time**: Select the end time for your announcement bar.
5. **Font Color**: Select the colour for the countdown timer.
6. **Background Color**: Select the colour for the background colour of the countdown timer.


The announcement bar will become visible on your storefront after the start date and time you set are reached. Similarly, the bar will disappear from your storefront once the end date and time set by you are reached.

##### For Free Shipping Bar

![QG4](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/12.png)

center
em
Figure 13: Free Shipping Bar Configuration Options 1
br
1. **Min. Cart Value:** Enter the minimum cart value required to avail the free shipping offer.
2. **Test Cart Value:** You can track your free shipping bar behaviour using this (testing-only).


This field is simply for you to try and simulate the addition of products to the cart. It will not have any impact on your actual website.

You need to create a free shipping promotion under your desired sales channel under Marketing followed by Promotion in the platform too.

![QG4](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/13.png)

center
em
Figure 14: Free Shipping Bar Configuration Options 2
br
1. **Start Message**: Enter the message that will be displayed when the announcement bar commences and the cart value is zero. Once the customer adds an item to their cart, the start message will be replaced by the progress message.
2. **Progress Message**: Enter the message that will appear when a user adds an item to their cart.
3. **Success Message**: Enter the message that will appear when a user has added enough items to meet the free shipping threshold.


##### For Contact Form Bar

![QG4](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/14.png)

center
em
Figure 15: Contact Form Bar Configuration Options
br
1. **Name**: Enter the placeholder text here. For eg. Enter Your Name or Enter Your First name.
2. **Email address**: Enter the placeholder text here. For eg. Enter your email address.
3. **Success Note**: Enter the success message here. This message will display when the user has submitted the contact details on the contact form bar.


Any data collected from the Contact Form Bar will be stored in the Analytics section.

##### For Social Share Bar

![QG4](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/15.png)

center
em
Figure 16: Social Share Bar Configuration Options
br
**Social Media:**

1. **Social Media**: Select the social media icons you want to add to your announcement bar.
2. **Icon Color**: Choose the colour of your social media icons.


**Social Media Links:**

1. **LinkedIn**: Enter URL of the LinkedIn account where you want to redirect your users.
2. **Facebook**: Enter URL of the Facebook account where you want to redirect your users.
3. **WhatsApp**: Enter URL of the WhatsApp account where you want to redirect your users.
4. **Twitter**: Enter URL of the Twitter account where you want to redirect your users.
5. **Instagram**: Enter URL of your Instagram account where you want to redirect your users.


##### For Rotating Announcement

![QG4](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/16.png)

center
em
Figure 17: Rotating Announcement Bar Configuration Options
br
1. **Transition Style**: Select the suitable transition style from the option - Fade, Slide, Push.
2. **Transition Speed**: Select the suitable transition speed from the option - Slow, Med, Fast.


![QG4](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/(16).png)

center
em
Figure 17: Rotating Announcement Bar Configuration Options
br
By default, one announcement bar is already added. You can make modifications to the default bar.

To add more announcement bars, follow the steps given below:

* Click on the **three dots** in the **Add Bar** button.
* Select the type of bar you want to add from the menu.
* Click on the selected bar and configure it.
* Click **Save**.


Adjust the priority of the bars by sliding them up or down, which determines the order in which they will appear on the storefront.

## Activating/Deactivating Announcement Bar

![QG4](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/17.png)

center
em
Figure 18: Activate/Deactivate Announcement Bar Icon
br
* To **Activate** the announcement bar, open the extension and turn ON the toggle button (present on the features page) after selecting the sales channel.
* To **Deactivate** the announcement bar, open the extension, select the sales channel, and turn OFF the toggle button.


## Analytics

![QG4](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/18.png)

center
em
Figure 19a: Clicking Analytics
br
![QG$](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/(19).png)

center
em
Figure 19b: Analytics Data
br
Analytics is a feature that collects and presents all the data that is collected from Contact Form Bar.

To search for a person, simply enter their name in the designated field. You can also narrow your search by selecting a start and end date range to view those who joined on specific dates. You can export the data to your system by clicking on the **Export** button.

## Adding Announcement Bar Extension in Theme

To attach the Announcement Bar extension to your storefront, follow these steps:

1. Click **Themes** in the Appearance section of your sales channel on Fynd Platform.
2. Click **Edit** to open the theme editor.
3. In the theme editor, click **Settings** and then select **General**.
4. Scroll down to Extension Position and choose where you want to add to display your Announcement Bar. You can choose from the following positions:
  1. **Header Bottom**: Displays the Announcement Bar below the header.
  2. **Footer Bottom**: Displays the Announcement Bar below the footer.
  3. To add the extension, click on the **Add** icon and select the Announcement Bar extension from the drop-down menu.
  4. Select the wrapper placement for your announcement bar, as shown below from the second dropdown;
    1. Select Announcement Bar Header in Header Bottom
    2. Select Announcement Bar Footer in Footer Bottom
![QG$](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/20.png)
Figure 21: Extension Position

  1. Once you have made the necessary adjustments, click **Save**.


## Final Output

![QG$](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/21.png)

center
em
Figure 22a: Announcement Bar
br
![QG$](https://cdn.pixelbin.io/v2/doc/original/searchlight/extensions/announcement-bar/22.png)

center
em
Figure 22b: Social Media bar
br