A notification banner sits across the top of your experience, above everything else on the page. Use it for a deadline, a closure, or a link you need visitors to follow. You can set up several banners, each shown to a different audience.
What the notification banner will look like on the front-end.
How to Set It Up
Prerequisites
- Know which audiences should see each banner, and which filters identify them
- If the banner needs a button, know where it should go: a full URL for an external site, or the page inside your experience
Navigation steps
- Navigate to Site options > Notification Banner
- Click "Add banner"
- On the Content tab, complete the banner:
- Language: The language this banner belongs to. On a single-language site this is English. A banner is only shown to visitors using the language you pick, so on a multilingual site add one banner per language.
- Display Notification: Switch this on. A banner stays hidden until you do.
- Notification Copy: Your message. You can make text bold and add links inside the copy.
- Button Group: The optional button. Leave Text empty if you do not want one. To add one, set Button type first, because it decides which fields you get next:
- Button type: External (Another website) or Internal (Within the platform). This is required.
- Text: The button label.
- For External: add the URL, and tick Open in modal? if it should open over your experience rather than navigating away.
- For Internal: choose a Click functionality. Visit another page (Default) then asks for an Internal link. The other two options, Launch personalisation modal and Launch global "Chat to our students" modal, need no link.
- On the Styles tab, set Style, Button alignment, Icon and Icon position if you want to change them.
- Open the Filter tab and choose the audiences that should see this banner. Leave every filter blank to show it to everyone.
- Repeat from step 2 for each additional banner.
- Drag the banners into order. Only the first banner matching a visitor is shown, so the order of the rows sets which one wins.
- Scroll to Notification Banner Styling and set Background Color, Text Color, Banner Icon and Icon Color. These apply to every banner on the site.
- Click "Update" to save.
Students see the banner across the top of the page with an Ok button to dismiss it. Dismissing hides that banner for the rest of the page visit; it returns on the next page load.
Best Practices & Use Cases
- Put your most specific banner first. A banner with no filters matches everybody, so anything below it will never be seen
- Keep the copy to a sentence or two. The banner pushes the rest of your content down the page
- Use the button when you want the action to be obvious, and a link inside the copy for background reading
- Set up one banner per audience rather than one banner covering several. A visitor only ever sees one
FAQs & Troubleshooting
Can I show different audiences different notification banners? Yes. Each banner has its own Filter tab. Leave the filters blank to show a banner to everyone.
Can I add a CTA in the notification banner? Yes. Fill in the Button Group on the banner's Content tab. Leaving Text empty gives you a banner with no button.
I have set up several banners but a visitor only ever sees one. That is expected, and it is why row order matters: Vepple shows the first banner matching that visitor and stops.
My filtered banner is not appearing. Check the visitor's personalisation matches the filters you set. A banner filtered to a subject area only appears once the visitor has that subject area selected.
My banner is not appearing at all. Check Display Notification is switched on for that row, and that its Language matches the language the visitor is using.
I filled in the button Text but no button appears. A button also needs somewhere to go. An External button with no URL, or an Internal button set to Visit another page with no Internal link, is not shown at all.
A visitor dismissed the banner and it came back. Dismissing lasts for that page only. The banner returns on the next page load.
Comments
0 comments
Please sign in to leave a comment.