New Features for Shoutem Apps

We’ve been working hard on making platform improvements in the last couple of months. The time has come to introduce new, robust, powerful features to all of our users for free.

Empower your apps with scheduled and segmented push notifications, a CSS editor, a client settings Page, Home screen Carousel, and Composite pages.

Scheduled Push Notifications

Scheduled push notifications are the first upgrade to our current push notification module. These push notifications allow app owners to schedule push messages, making time management easier and providing more strategic and planning options. App owners can schedule push messages to be sent to users on a specific date and time. You can schedule messages on a weekly or monthly basis, so there’s no more need to go inside the app builder on a daily basis.

Once they’re scheduled, you will see the status of push messages in the queue; if you need to change the date or time at which the messages will be sent, simply click on the push message and apply the changes. You can find a tutorial on how to use Scheduled push notifications in our support center at this link.

Segmented Push Notifications

The second upgrade to our push notifications is Segmented push notifications. As the name implies, app owners can now send push messages to specific segments of app users. With segmented push notifications, you don’t have to broadcast push messages to all your app users. Segmenting app users allows you to target users better, which leads to better conversion rates and sales.

App users can choose which segment (group) they want to opt into and receive push notifications based on their preferences. Segmented push notifications also bring more recognizability since you can add icons to different groups; these icons will appear as part of a push message once the user receives it. Adding icons is helpful for users, especially if they are subscribed to many groups since they can instantly recognize to which group a push message belongs.

You can find a tutorial on how to use Segmented push notification in our support center at this link.

CSS Editor

CSS, which stands for Cascading Style Sheets, is a style sheet language used to describe the presentation of a document written in a markup language. Shoutem apps have always supported some custom HTML and CSS, but with the dedicated CSS editor, app owners now have many more design customization options available.

The CSS editor allows app owners to apply custom styling to all markup elements in the app, such as buttons, images, and loading icons; owners can also change the positions of or hide elements. The possibilities are almost endless. At this time, we do not have a list of all the classes/methods used in our default app design, but the documentation will be released in the near future. Until the documentation is ready, here’s how you can find specific CSS classes/elements.

Here are some examples of app elements our team created using the CSS editor.

Example 1. Custom slide in menu setup

– Partial slide in menu screen coverage with transparent background

– Unique static menu element at the bottom

– Different item styling, starting with specific elements in the menu

Example 2. Custom news list feed

– Dynamic leading image sizes

– Custom article arrangement

– Custom bordering and scrolling mechanisms

We hope this article gives you an idea of the possibilities and helps you build your own unique app. If you don’t feel like messing around with the CSS on your own, get in touch with us and our design team will work their magic to give your app a unique look and feel.

Client settings page

The Client settings page is a unique app improvement because it combines some of the app elements used in other features and brings a few new functionalities.

In the client settings page, you will find the following elements:

– Push notification groups

Push notification groups allow you to create lists of different groups to which users can subscribe. Let’s say you run an e-commerce website with different product categories. Under push notification groups, you can create the following groups: Books, Consumer Electronics, Vinyl, Comics, and Collectibles. Once the different groups are created, users can opt in to one or more groups based on their interests.

More importantly, push notifications groups to allow you to target your app users. If you’re running a special promo for books, you can send that special promotion only to the users who subscribed to the books group. You don’t need to send the promo to all users and risk being labeled as spammy. With highly targeted push notifications, you can convert more users and make more profit.

Note: this one feature requires segmented push notifications to be enabled for the same app.

– Separator

Now, the separator can also be found under the client settings page, but its functionality hasn’t changed. You can use the separator to split your app’s content and structure the design of the app.

– Review this app

The “review this app” feature allows you to ask app users to review your app. Once a user taps the feature, the app will redirect the user to the App Store or Google Play Store depending on which device he or she is using. This feature provides you instant feedback on your app so you can improve the app’s UX and UI based on the reviews.

– Share application

Once your app hits the app stores, you want to reach as many users as possible so they will download your app. Now, you can add the “share application” feature and ask your users to spread the word about your app via Facebook, Twitter, email, or SMS.

– Tweet support

Looking for the fastest way for customers to reach you and engage on social networks? Add ”Tweet support” feature and enter your Twitter username (handle). When users tap on this feature, they can contact you directly on Twitter.

– Email support

Similar to the Twitter support feature, tapping on this feature will open up the user’s default email client so they can send you an email from his or her phone.

– Text page

The “Text page” feature creates a simple, static text page on which you can enter any kind of text information you want to add to your app, such as additional info about your business. this feature also allows you to include some custom HTML and CSS code to style the text page content.

Composite pages

Composite pages allow you to create a more complex, deeper app structure in your app using new design options. Until now, app owners could add and group content inside a folder. However, the folders were limited by the structure, meaning that it could only be expanded and you could add as many items as you wanted to it.

From now on, you can use composite pages instead of a folder to “nest” content in the app. Nesting allows app owners to nest new pages under a “parent” page, providing a deeper content structure and better categorization of items.

On the content side, composite pages provide the option to connect one of your news feeds/news collections to a page. Instead of manually adding content to the page, you can mix things up and add a related news feed at the bottom of the composite page.

Composite pages also provide new design options, although they are very similar to folders; folders and composite pages both include description boxes, image galleries, and item icons. The main design differences are that the items can be additional pages and you have the option to define how the icons are displayed. They can be presented in a grid with a customs number of columns or as a regular list.

Read our support article on how to set up Composite pages.

Homescreen Image Carousel

The home screen image carousel is another design improvement available to all users starting today. The carousel of images allows you to rotate up to four photos on the home screen of your app.

You have the option to choose from two behaviors for the home screen image carousel:

  • Auto-slide images
  • Manually

If the carousel is set to “auto-slide images,” the images will automatically rotate on your home screen. You can also set the frequency of the auto slider and choose how long the images will be displayed before another one displays.

The home screen carousel can also be used to monetize your app and for advertising purposes. For each image you add to the carousel, you can set a URL that will open once the user taps on the image.

Read our support article on how to set up Homescreen Image Carousel.

All these features are available to all our users as of today, July 16. Even better, this is just the first set of improvements we plan to release in the coming weeks. We encourage you to keep sending us feedback on these new features. Together, we can improve the best app builder in the world and make it even better!

Go to your app and try new features now!