What is an Alert banner and how to create one. What is an Alert banner and how to create one.

What is an Alert banner and how to create one.

Irina Antonova Irina Antonova

The Alert banner is used to announce urgent information to your end users and/or agents.
A message will be displayed when someone visits your helpcenter.


The "Alert banner" add-on is included in each Premium Plus theme. For all other themes, we can implement the Add-on. The cost will depend on the theme being used. 


1. Create an article

Create an article with a title and content. This information will be used as content for your Alert banner. 

2. Add "alert" tag

Add the alert tag to the label field. This will initiate the alert settings for the article.

3. Choose the type of the message

There are totally 5 types of alert banners. You can choose one by putting its name as a label in the article settings. Each type has its own colour settings.

  • alert (keeping a default tag from step 2)
  • alert-info
  • alert-success
  • alert-warning
  • alert-danger. 

Alert_Step_2.png  Alert_step_1.png

4. Add colour to the Alert banner

If you want to modify the colours, you can do so on the settings panel of the theme



If you select the "alert" label, the banner will be white.


5. Choose the position for the Alert banner

There are several positions for the Alert banner. You can change the position by adding a label.

           alert-tl  (top-left)                              alert-tc  (top-center)                      alert-tr (top-right)
           alert-bl (bottom-left)                       alert-bc (bottom-center)               alert-br (bottom-right)



If you add no location label, the Alert banner will be placed top-center by default



6. Define the content to be displayed

The Alert banner text is taken from the article you created. Each article contains a title and body.
You can display both options (as a standard) or specify what you want to show via the labels below.

  • alert-title - displays only the title of the article
  • alert-body - displays only the body of the article
  • alert-link - will display the whole Alert block as a link to an article

7. Publish the article

And here you go 🚀🚀🚀