Announcement bar - Ghost Changelog

News
1

Share big stories, special offers, or breaking news at the top of your site with the new announcement bar feature.

To add an announcement to every page of your site, go to Settings → Announcement bar and add your announcement copy, pick a background color, and select the visibility of your announcement:

The visibility options allow you to share different types of announcements based on what makes sense for your audience. For example:

  • Highlight breaking news for everyone on your site
  • Share a special offer for your paid tiers just with new visitors and free members
  • Exclusively invite your paid members to join your community

Announcements can be removed at any time by either removing the message or toggling off visibility for everyone in your settings and hitting Save.

Ghost(Pro) users can log in and start enjoying all of this right away! If you're a developer, self-hosting Ghost, you'll need to update to the latest version to get access to everything that's new.

2 Likes
2

Great feature Ghost Team. How to you add a hyperlink to a website/post into the announcement bar? Thanks for the support.

1 Like
3

Seconded! The announcements bar is great, but it definitely needs to a clickable action! :)

4

If you hover over the text you want to linkify, you can do so:

image
image1524×320 44 KB

You can also select + paste if you don’t want to use your mouse, just like in the post editor

2 Likes
5

Thanks! I’d totally missed that!

1 Like
6

This is great.

Its usability would grow multiple fold if we are allowed to show different announcements for different membership levels. One for free member, another for paid members etc.

2 Likes
7

Damn…totally missed that. Thanks :smiley:

1 Like
8

Is it possible to disable the injection of the announcement bar CSS into the <head> element? I’m looking to replace his CSS from theme to theme, but even if I remove that import, the CSS is still injected… :thinking:

9

Oops, I wasn’t redefining anything, the ghost/announcement-bar/src/components/AnnouncementBar.js file isn’t even in the Docker image. :sweat_smile:

In fact, the CSS is injected from a script located in the head section:

<script defer="" src="https://cdn.jsdelivr.net/ghost/announcement-bar@~1.1/umd/announcement-bar.min.js" data-announcement-bar="http://localhost:18697/" data-api-url="http://localhost:18697/members/api/announcement/" crossorigin="anonymous"></script>

I don’t know how I’m going to replace the announcement bar CSS now! :sweat_smile:

10

Is it possible to modify/create new announcements via API? Can’t find any information on that, would be quite useful.

11

Not officially, no (so, use this with caution and rather as a proof-of-concept :wink:)

I had a quick look in the network requests in my browser console and there is a way to change announcement bar settings via the Admin API:

All you need to do is send a request to PUT /ghost/api/admin/settings/.
Important here: this endpoint is off-limits for integrations or staff tokens and you’ll need to authenticate your request with session-based authentication.

The settings endpoint accepts an array of key-value-pairs and, according to the current source code (5.49.0 as of writing this post) there are three keys that are relevant for the announcement bar:

'announcement_content',
'announcement_background',
'announcement_visibility',

So, a request body would look like this:

{
  "settings": [
    {
      "key": "announcement_content",
      "value": "<p dir=\"ltr\"><span>This is a test</span></p>"
    },
    {
      "key": "announcement_visibility",
      "value": "[\"visitors\"]"
    },
    {
        "key": "announcement_background",
        "value": "accent"
    }
  ]
}

As mentioned, this is not documented here and therefore not an official API endpoint. It can change at any point and I rather see this as an experiment of what’s possible :wink:

12

very cool, thenx :) Let’s hope an official endpoint is underway, Can see quite some use in integrating the banner with i.e. daily changing content.

1 Like
13

Also just ran into this issue, when I tried to style the announcement bar for a theme.

Would be great to move the standard styles into a proper stylesheet – or at least not have them injected into the end of the <head> tag.

This makes it pretty much impossible to style the bar without injecting some JS on our own :grimacing:

14

There are (at least) two ways to style the announcement bar at the moment:

  1. Use Code Injection or CSS and append your properties with !important. This will override the default values.

  2. Add your styles after ghost_head in a theme. As long as the selector specificity is the same, they will take precedence because they’re further down the cascade.

1 Like
15

I have a sticky nav bar on my theme so that it is always displayed at the top of the page.The announcement bar is causing an issue where when you scroll down the announcement bar disappears, but the head still keeps the space above it.

Screenshot 2023-05-26 at 10.57.50 am
Screenshot 2023-05-26 at 10.57.50 am3456×730 276 KB

16

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.