Help Center

The 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.

Adding a Notification Bar dialogue

1. Navigate to the Dialogues menu.
2. Click the Add dialogue button.
3. 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

1. Open the What section.
2. Enter the URL of the page where you want to display your notification bar in the navigation bar.
   
3. Click Place on this page to add the notification bar. 
   
   A default notification bar is added to the top of the page.

Styling settings

1. Open the sidebar by hovering over the right side of the page. You can pin the sidebar to keep it opened.
2. The sidebar contains the Properties widget where you can inspect and change the configuration properties of the dialogue. Select Styling settings from the menu.
   
3. 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.

   
4. 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:
   
   Here you can edit the default HTML, JavaScript, and CSS of the example. When a user loads this example, its default HTML, JavaScript, and CSS will overwrite the respective settings in the dialogue. Don't forget to click Save example afterwards!
5. Optional: Enter a height for the notification bar, e.g. "300" or "10%".
6. Optional: Enter the URL of a CSS stylesheet.
7. 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.  

Positioning settings

• In the Properties widget in bar on the right, select Positioning settings from the menu.
• Check the Use new positioning box to remove the use of inline styles on the dialogue.
• 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

1. In the Properties widget in the bar on the right, select When to appear from the menu.
2. 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

1. In the Properties widget in the bar on the right, select How to appear from the menu.
2. Select how you want the navigation bar to appear: without effect, by sliding in, or by fading in.

Close settings

1. In the Properties widget in the bar on the right, select Close settings from the menu.
2. 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.
3. 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.

JavaScript settings

1. In the Properties widget in the bar on the right, select JavaScript settings from the menu.
2. Optional: Enter the URL of a JavaScript library that you want to load when the navigation bar is shown.
3. Optional: Enter JavaScript that you want to execute when the navigation bar is shown.

Advanced settings

1. In the Properties widget in the bar on the right, select Advanced settings from the menu.
2. 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.

Testing and troubleshooting dialogues

For tips on testing your dialogues with the BlueConic Simulator, see the video and tips in Testing Your Dialogues. Also see the troubleshooting dialogues article.