> For the complete documentation index, see [llms.txt](https://docs.ninjateam.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ninjateam.org/notibar/how-it-works/content.md).

# Content

The Content tab controls the message and call-to-action button for each bar.

<figure><img src="https://2063119859-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F35jzYIZxvumkpSJGtFtc%2Fuploads%2FybE785pA88tQxIeOJMAF%2FCustomize%20the%20content%20of%20Notibar.png?alt=media&amp;token=7792e143-4132-4dca-83f1-1a88cdf5bbaa" alt=""><figcaption></figcaption></figure>

Below are the detailed settings available in this section:&#x20;

### Text

* **Bar Name:** Internal label for admin, not shown to visitors.
* **Text Area:** Enter the main message for the notification bar. You can use plain text or include HTML elements such as links, bold text, or line breaks.
* **Merge Tags:** Insert a variable to show a live value inside your bar text, such as the post title, current date, or site name, instead of typing it manually.
  * Click the **Insert Variable** button and choose a tag from the list to add it into the text area.
  * Add a fallback value with a pipe (|) in case the variable has no value for a visitor, e.g. {user\_first\_name|there} will show "there" if the visitor's first name isn't available.
  * Avoid using per-visitor variables (such as {user\_first\_name}) on pages that are fully cached, since cached pages may show the same value to every visitor instead of the correct one for each person.

<figure><img src="https://2063119859-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F35jzYIZxvumkpSJGtFtc%2Fuploads%2FSYBnWkiv168c0bnvXxcz%2FInsert%20variable%20content%20to%20text%20of%20Notibar.png?alt=media&amp;token=334bba6c-27ac-493d-83a0-fcd70c3912d5" alt=""><figcaption></figcaption></figure>

Available variables are grouped as follows:

* **Visitor**: First name, Last name, Display name, Role, Country
* **Date & Time**: Date, Time, Weekday, Month, Year
* **Site**: Site Name, Tagline, Users count, Post count
* **Current Post**: Title, Author, Category, Published Date
* **WooCommerce**: Recently viewed product

### Call-to-Action Button

* On/Off Toggle: Enable or disable the button on the bar.
* Button Text

Input Field: The label displayed on the button. For example: "Learn more" or "Shop Now".

* Button URL

Input Field: The web address the button links to.

* Font Weight

Dropdown Menu: Choose the weight for the button label.

* Open in new window: When toggled this button, clicking the button opens the destination in a new browser tab.

#### Button Animations - per-button attention and hover effects

Add an animation effect to your button to help it stand out and catch the visitor's attention.

* **Attention Animation**: Choose an animation that plays automatically on the button, drawing the visitor's eye to it.

Click the **Attention Animation** dropdown and select one of the following:

* None
* Wobble
* Shake
* Bounce
* Pulse
* Swing
* Jello
* Tada
* Rubber Band
* Heartbeat
* Flash
* Blink
* Vibrate
* Pop
* Bounce In

<figure><img src="https://2063119859-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F35jzYIZxvumkpSJGtFtc%2Fuploads%2FQURzAWn1FP1VkaIXpsOj%2FList%20of%20Button%20animations.png?alt=media&amp;token=850843a0-53d2-4baf-a559-4b3f5796b6d8" alt=""><figcaption></figcaption></figure>

Select **None** if you don't want any automatic animation on the button.

* **Hover Effect**: Choose an animation that plays when the visitor moves their cursor over the button.

Click the **Hover Effect** dropdown and select one of the following:

* **None**: No effect on hover.
* **Grow**: The button slightly increases in size.
* **Shrink**: The button slightly decreases in size.
* **Lift**: The button moves upward, giving it a raised appearance.
* **Glow**: A soft glow appears around the button.
* **Press**: The button looks pressed down, as if being clicked.
* **Shadow**: A shadow appears beneath the button.
* **Color Shift**: The button's color changes.
* **Slide Fill**: A fill color slides in across the button.

<figure><img src="https://2063119859-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F35jzYIZxvumkpSJGtFtc%2Fuploads%2F4f3N5QkeMavwjjrhMz21%2FList%20of%20Hover%20effect.png?alt=media&amp;token=36181db2-3ebc-46e0-bd30-384605f70e86" alt=""><figcaption></figcaption></figure>

Select **None** if you don't want any effect when visitors hover over the button.

#### Button Click Action

Choose what happens when a visitor clicks the button. Click the Action dropdown and select one of the following:

* Open link: Clicking the button takes the visitor to a URL you specify.
* Close bar: Clicking the button closes the bar for that visitor, instead of opening a link.

<img src="https://2063119859-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F35jzYIZxvumkpSJGtFtc%2Fuploads%2FciGXpe93nDIW82v0vKqw%2Funknown.png?alt=media&amp;token=995ccd4a-92ab-4cfe-89da-179f2533d896" alt="" height="216" width="504">

When the Close bar is selected, a Reopen after (days) field appears. Enter the number of days before the bar is shown to that visitor again after they close it. Leave this empty if you don't want the bar to reappear.

<figure><img src="https://2063119859-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F35jzYIZxvumkpSJGtFtc%2Fuploads%2FJuHBDxZTlOyibbuzLtYa%2FSelect%20Close%20bar%20action.png?alt=media&amp;token=9577ea2a-f310-4a38-8040-bcffd9c1671f" alt=""><figcaption></figcaption></figure>

### Different content for mobile?

* On/Off Toggle: Enable this to show a different message and button on mobile devices. When turned on, a second set of text and button fields appears for you to fill in.

Note: The live preview updates as you type, so you can see your changes in real time without needing to save.

### Countdown timers for bars (Pro)

This feature lets you show a live countdown inside your bar. It's useful for limited-time sales, flash promotions, or drawing attention to an upcoming deadline.

On/Off Toggle: Enable this to show a live countdown in the bar.

<figure><img src="https://2063119859-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F35jzYIZxvumkpSJGtFtc%2Fuploads%2Fy4qL56vHcQGZybEjfqX0%2Fcountdown%20timer%20on%20Notibar.png?alt=media&amp;token=152ee37a-8185-4f23-8f1a-b393677bdb4e" alt=""><figcaption></figcaption></figure>

#### **Countdown To**

Dropdown Menu: Choose what the countdown counts down to.

* **Fixed date & time**: Counts to a fixed moment in the site timezone. The same countdown is shown to every visitor.
* **Evergreen (per visitor)**: Each visitor gets their own countdown that continues across page reloads. Republishing the bar restarts every visitor's timer from the full duration on their next visit.
* **When the schedule ends:** Counts to the soonest time this bar's schedule closes it - its end date or daily-window end - set in the Behavior tab.

When **Fixed date & time** is selected:

* End Date & Time

Input Field: The exact date and time the countdown reaches zero.

**Style**

Dropdown Menu: Choose how the countdown numbers are displayed - Boxes, Flip clock, Circular, or Text with Labels.

**Show Units**

Checkboxes: Choose which units appear in the countdown - Days, Hours, Minutes, Seconds. Select any combination.

**Always Show All Selected Units**

* On/Off Toggle:
* Off: Hides leading units that are zero at load (e.g., "00 days").
* On: Always shows every unit selected in Show Units, even if its value is zero.

<figure><img src="https://2063119859-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F35jzYIZxvumkpSJGtFtc%2Fuploads%2F4QZl8FafDJhMcoL8lLdP%2Fevergreen%20system%20with%20notibar.png?alt=media&amp;token=28fc8f0d-0959-4f18-8864-f59e249a4b03" alt=""><figcaption></figcaption></figure>
