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

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

Author

Helena Ng’s Picture

Helena Ng

Take 5 minutes to customise a notification banner for your product updates or feature announcements 😎

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.

Notification Capture

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:

In-App Feature Announcements

Create A Notification Popup

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:

Choose A Notification Template from Capture

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:

Capture Preview Pane

Other Notification Layouts

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

Image

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

Notification - Image Capture

Bar

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!

Capture Bar Template

Text

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:

Capture Bar Template

Call-To-Action

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:

Footer text in Capture

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

Post 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:

Post Capture Redirect

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.

Configure Behavioural Rules

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:

Closed Capture

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.

Closed Capture Behavioural Rule

Country

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:

Country Behavioural Rule for Capture

Current URL

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.

Current URL Behavioural Rule for Capture

CSS Selector

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:

CSS Selector Behavioural Rule for Capture

How To Find The Selector?

  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.

Date

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:

Date Behavioural Rule for Capture

Javascript

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.

Javascript Behavioural Rule for Capture

Manual

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:

Manual Rule for Capture

Group Behavioural Rules

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:

Capture Rule Grouping

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!

Let's Go