Announce Product Updates Or New Features In Your Web App (In 5 Minutes!)

If you operate in the SaaS industry or distribute apps in your business then you'll know how often you're required to roll out new updates or features.

More often than not, users will appreciate being notified of the changes you've made to an app that they use regularly. This allows for a smoother user experience by managing expectations and letting your users know that you have their best interest at heart.

Gleam Capture allows you to craft product updates or feature announcements using the new Notification template. With our highly customisable behavioural rules, you can rest assured you're only sending notifications to relevant users.

Notifications can be scheduled to pop up on specific dates or times, and you can even make multiple notifications ahead of time. When the update has expired, simply archive it and it won't show to users anymore.

The best thing about our popups? Capture only needs one line of JS code in your app to realise its full functionality. That means there's no need to go back and forth to update your code every time there's a new release. All the logistics of your Notifications can be managed through our Gleam dashboard.

In this post, we're going to show you how you can create Notifications in your own app with Gleam Capture.

We're going to use our own web app as a demo:

Click on New Capture from your Capture dashboard and pick Notifications template. For this tutorial, we're going to use the Messages layout to take advantage of the extended text area. We'll be using the text area to list out important details about our new features.

You can pick from the two variations, Light or Broadcast:

Once you enter the Design tab, feel free to customise the announcement as you like with our extensive customisation options.

Your custom design will also be immediately reflected in the preview pane:

Apart from the Messages layout, we also offer other variants like the Image, Bar or Text layout.

The Image layout is great for focusing on image banners and minimal detail:

And the Bar layout is simply an announcement on the top of your page. You generally won't have room to go over the finer details of your update with bars, but you can include a link in the bar for users to find out more if they wish.

You can also set it to stick to the top or bottom of your page on scroll, or without. It's fully customisable!

If you have a simple and straightforward call to action, you can opt for the Text layout which emphasises on the goal you'd like to achieve:

At the end of the announcement, you may want to include a call-to-action so the user can find out more about a particular feature or start using your new feature immediately.

Typically, this means a link to the new feature's documentation, or a link that brings users right to your app. You can also include a link to your main Updates page so users can go check out what they might have missed out.

If you're using the Light variation, you can add a link to the footer text of your announcement. This option can be found under the Design tab:

If you like, you can also leave this section blank and not include a footer. The section will be automatically removed from your Capture.

If you're using the Broadcast variation, you'll have the option of including a button in your announcement. Under the Design tab, enter your CTA text in the Button Text field.

If you prefer not to have a button, just leave the Button Text field empty.

This button's behaviour can then be configured in the Post Capture tab:

Once you're happy with how your Notification looks, it's time to configure the behavioural rules so that your announcement shows up to the right users.

Gleam Capture comes with a variety of behavioural rules that allow you to show different notifications to a custom audience or segment. This is particularly useful if an update is only available to users of a specific plan, or if the message is for admins only.

Let's look at a few rules you can use to configure your announcement. Note that the rules specified here should be grouped together to form a custom audience:

By default, this rule is included in each Capture so that they don't show up to users who have closed the particular Capture. We recommend keeping this rule so that you don't annoy your users by continuously showing them the same message.

In some cases your update may only be available to users from certain countries. Feel free to use the Country rule to show the announcement to users from a certain country only.

We detect users via their IP address:

You can show the announcement on particular parts of your web app using the Current URL rule. For example, you might have multiple apps under the same platform like we do, so specifying the path is particularly useful for differentiating updates between apps.

The announcement will only show depending on where you set the URL to be.

CSS Selectors are great for picking up keywords or elements on your app so that you can show your announcement to selected users only. It works by looking for a specified element on your page.

In the example below, we're looking for the keyword 'admin' under the user name element:

1. Go to your web app and find the element you would like to match against.
2. Highlight the text in that element and right click, then select Inspect.
3. In the Inspector tool, right click on the highlighted element and select Copy > Copy Selector.

When announcing product updates, you'll want to make sure they are displayed in a timely manner. It's also important to restrict the announcement to a time frame so users don't get the notifications months after a feature has been released.

You can use the Date rule to set a timeframe:

If your CSS selectors or keywords don't show up on the page where you'd like to make an announcement, then you can opt for the Javascript rule. Simply enter a function name from your app that will determine who the announcement gets shown to.

Once again, this could be used for determining if a user is an admin, or if they are using a paid plan, etc.

If none of those rules work for you, feel free to trigger the announcement manually using Javascript. Just insert the manual code anywhere you'd like your announcement to show:

Behavioural rules work better if they are grouped together. It allows you to create more granularity with your segment and make sure that your updates reach a highly relevant audience.

Once you've figured out your audience and compiled a set of rules, they may look something like this:

So there you go! You can now improve visibility of new features by implementing announcements or notifications in your web app.

Feel free to extend the capability of Captures to include welcome messages for new users, or check in with your users if they have idled for awhile. Have you got any more ideas? Let us know 😊

Make Your Own Feature Announcements

Check out our helpful documentation for step by step instructions on setting up your own Notification or get started right away!