A BlueConic Notification Bar dialogue displays a full width bar with a message at the top or the bottom of the page. The bar inserts itself at the very top or bottom of the page without overlapping with your original content. You can set the bar to remain sticky at the top of the screen when the user scrolls, or to scroll out of vision with the page.
This example shows a pink sticky Notification Bar at the top of the page:
Adding a Notification Bar dialogue
- Navigate to the Dialogues menu.
- Click the Add dialogue button.
- A pop-up window appears. Check the Show all box. Enter "notification" in the Search bar. Click Notification Bar. A new notification bar dialogue will be opened.
Configuring the Notification Bar
Configure the notification bar dialogue like any other dialogue by configuring the Who, When, and Where sections. Configuration of the What section is explained below.
Placing the notification bar
- Open the What section.
- Enter the URL of the page where you want to display your notification bar in the navigation bar.
- Click Place on this page to add the notification bar.
A default notification bar is added to the top of the page.
- Open the sidebar by hovering over the right side of the page. You can pin the sidebar to keep it opened.
- The sidebar contains the Properties widget where you can inspect and change the configuration properties of the dialogue. Select Styling settings from the menu.
- We added some great notification bar examples for you to start from. Click Load examples to open the example gallery.
Loading an example will overwrite your current content and styling with example content and styling. This is why we recommend you pick an example first, then to edit the content to your liking.
- Optional: Edit an existing example by hovering over the gallery example and clicking the edit icon on the right side. Alternatively, click Add new example to edit a new example and add it to the gallery. The example editor will open:
- Optional: Enter a height for the notification bar, e.g. "300" or "10%".
- Optional: Enter the URL of a CSS stylesheet.
- Optional: Enter CSS styling or click Reset to default CSS to revert to the default CSS styling.
Editing the content
Click Edit to edit the content of the notification bar. You have all the power of the content editor available to you, like e.g. images, links, forms, and dynamic profile properties.
Click Save to finalize and store your edits.
- In the Properties widget in bar on the right, select Positioning settings from the menu.
- Select Top or Bottom to determine where the navigation bar appears on the page.
- Select Sticky or Non-sticky to determine whether the navigation bar will stick to its position in the browser when the customer scrolls the content of the page, or whether the navigation bar will scroll with the content of the page.
When to appear
- In the Properties widget in the bar on the right, select When to appear from the menu.
- Select when you want the navigation bar to appear by activating one or more options. These options are available:
- On page load is the default if you do not select anything else.
- On scroll will reveal the navigation bar when the customer scrolls the page
- Scroll depth will reveal the navigation bar when a certain part of the page is in view. Enter the percentage of the page that should be in view.
- Clicked element will reveal the navigation bar when a certain element is clicked. Enter the jQuery selector for the element, or pick the element using the Visual picker by clicking the link.
- Content appears will reveal the navigation bar when a certain content element is present on the page. Enter the jQuery selector for the content element, or pick the element using the Visual picker by clicking the link.
How to appear
- In the Properties widget in the bar on the right, select How to appear from the menu.
- Select how you want the navigation bar to appear: without effect, by sliding in, or by fading in.
- In the Properties widget in the bar on the right, select Close settings from the menu.
- Optional: Activate Close via close icon if you want to show an icon to close the navigation bar. When activated, you can determine the position of the icon or upload a custom close icon. You can also choose to never show the notification bar again when the close icon is clicked.
- Optional: Insert a close button or "do not show again" link in the editor. First click "edit" to open the editor and place the cursor in the position where you want to add the item. Then click Insert close item and select the item you want to insert into the editor.
- In the Properties widget in the bar on the right, select Advanced settings from the menu.
- Optional: Register a click event for the notification bar dialogue when a specific element is clicked. Enter the jQuery selector for the element, or pick the element using the Visual picker by clicking the link.