Windows 10: Engaging customers with Live Tiles and toast notifications (10 by 10)

Brink · Aug 17, 2015

Last week, we talked about how you can do three things to get your apps discovered and launched by Windows 10 customers. This week, we’d like to continue with how to increase customer engagement through some of the most loved features of Windows apps: Live Tiles and toast notifications.

If you’re already a Windows app developer, you are probably familiar with Live Tiles and toast notifications. If not, the increasing amount of Windows 10 customers is certainly a good motivator to start thinking about implementing them. Here’s what’s new:

Universal Action Center – After toast notifications are received, they now go into a system area called Action Center. With Windows 10, we’re bringing Action Center to Windows desktops, laptops and tablets, in addition to phones where it was already available. This means customers can get back to notifications they might have missed due to the transient nature of the initial toast and can interact with them in new ways.

Adaptive and interactive toast notifications – Toast notifications across Windows devices can now display interactive UI, so customers can immediately provide input and take action. This means you can capture input, and even run app code, without pulling the customer from their current context. Toast notifications can also be enriched with images in addition to text.

Adaptive Live Tile templates – Content on Live Tiles can now be described using simple markup language, giving you full flexibility on how content is displayed on the Live Tile. Adaptive Live Tiles also adapt to different screen density devices, so you can ensure the Live Tile looks great on any device.

Improved secondary tile pinning behavior – Requesting to pin a secondary tile is now done without any customer or system interaction, so your app can immediately execute additional code after the tile is pinned. This also allows you to pin multiple tiles at once and send tile notifications to them immediately after pinning.

Synchronizing Live Tiles and toast notifications – A new type of background task trigger, called ToastNotificationHistoryChangedTrigger, allows background tasks to be triggered when the app’s notification collection is changed by anything other than the app itself. This means you can execute code when a customer dismisses notifications in Action Center, when notifications expire, or when new notifications are pushed through Windows Push Notification Services (WNS), making it easy to keep your Live Tile up –to date.

Badge unification – Last, but not least: Live Tile badges are now unified across devices, so the glyphs that were previously only available on Windows are now also available on devices running Windows 10 Mobile. This also ensures your Live Tile displays consistently across devices.

Let’s take a look at how to engage customers with new notifications and Live Tiles, making sure your app gets the usage it deserves.

Sending adaptive and interactive toast notifications

In Windows 10, toast notifications can be customized to display text, images and custom interactions. Previously, sending a toast notification meant choosing from the toast template catalog, which offered limited flexibility in appearance and no options for customer input. The sound that plays when the notification appears can also be easily customized. An example of this is shown below:
1
2
3
4
5
6
7
8
9
10
11
12
13
14 <toast>
<visual>
<binding template="ToastGeneric">
<text>Sample</text>
<text>This is a simple toast notification example</text>
<image placement="AppLogoOverride" src="oneAlarm.png" />
</binding>
</visual>
<actions>
<action content="check" arguments="check" imageUri="check.png" />
<action content="cancel" arguments="cancel" />
</actions>
<audio src="ms-winsoundevent:Notification.Reminder"/>
</toast>

As mentioned, these interactive elements can be used to execute code through a background task in your app, to help customers stay in their current context while still interacting with your app. Start by declaring a new background task in the Package.appxmanifest, using the new Push notification type:

In the background task itself, you can now use the pre-defined arguments and user inputs as follows:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 namespace Tasks
{
public sealed class ToastHandlerTask : IBackgroundTask
{
public void Run(IBackgroundTaskInstance taskInstance)
{
//Retrieve and consume the pre-defined
//arguments and user inputs here
var details = taskInstance.TriggerDetails as NotificationActionTriggerDetails;
var arguments = details.Arguments;
var input = details.Input.Lookup("1");
// ...
}
}
}

For more information on adaptive and interactive toast notifications, read the in-depth blog post from the team.

Implementing adaptive Live Tiles

Similar to toast notifications, Live Tiles in Windows 10 you now have the flexibility to visualize a tile through markup language. Previously this required selecting a tile template from the tile template catalog for prior versions of Windows. The adaptive nature of Live Tiles allows you to group content, so Windows can automatically adjust the amount of information shown on the Live Tile to the current device’s screen.

As an example, an app that displays e-mails on the Live Tile might display one e-mail message preview on the Live Tile on a small screen phone, but can display two e-mail message previews on larger screen phones simply by grouping the e-mails in the tile markup:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 ...
<binding template="TileWide" branding="nameAndLogo">
<group>
<subgroup>
<text hint-style="subtitle">Jennifer Parker</text>
<text hint-style="captionSubtle">Photos from our trip</text>
<text hint-style="captionSubtle">Check out these awesome photos I took while in New Zealand!</text>
</subgroup>
</group>

<text />

<group>
<subgroup>
<text hint-style="subtitle">Steve Bosniak</text>
<text hint-style="captionSubtle">Build 2015 Dinner</text>
<text hint-style="captionSubtle">Want to go out for dinner after Build tonight?</text>
</subgroup>
</group>
</binding>
...

Desktop Tablet High-Density Mobile

As seen in the above example, Live Tiles can now be fully defined in markup language, breaking away from the previously-needed pattern of generating an image (from XAML) and sending that to the Live Tile to display. For example, say you want a Live Tile that displays an image cropped to a circle with two large text labels below. You can simply define it like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14 ...
<binding template="TileLarge" hint-textStacking="center">
<group>
<subgroup hint-weight="1"/>
<subgroup hint-weight="2">
<image src="Assets/Apps/Hipstame/hipster.jpg" hint-crop="circle"/>
</subgroup>
<subgroup hint-weight="1"/>
</group>

<text hint-style="title" hint-align="center">Hi,</text>
<text hint-style="subtitleSubtle" hint-align="center">MasterHip</text>
</binding>
...

For more information on adaptive Live Tiles and the new markup language, read the in-depth blog post from the team.

This week: spend some time on your app’s Live Tile to delight customers
Hopefully we’ve provided a quick, but comprehensive look at some of the improvements we’ve made to support you in engaging customers with Live Tiles and notifications in Windows 10. Our suggestion for the week:

Think about how you can use the new Live Tile markup language in your app to create a beautiful Live Tile to delight customers

If you display information on your Tile that can be grouped, make sure you utilize adaptive Live Tiles to cater to customers with high screen density devices

Make use of the new interactive toast notification capabilities to expand your current notifications to provide additional information and support customer interaction

Be sure to head on over to DVLUP for the “It’s ALIVE!!!!!!” challenge, so you can claim points and XP for updating your apps, in addition to boosting customer engagement. Also, check out the full Windows 10 by 10 development series schedule for the 10 topics we have and will be covering in the series.

Finally, below you’ll find some additional resources to dive into this week’s topic. We’re looking forward to hearing what you’ll build via @WindowsDev and #Win10x10.

Build 2015: Tiles, Notifications and Action Center

What’s new with live tiles in Windows 10

What’s new/different with toast notifications and action center in Windows 10

Tiles and Toasts team blog

Click to expand...

Source: Engaging customers with Live Tiles and toast notifications (10 by 10) | Building Apps for Windows

:)

garym123 · Aug 17, 2015

My Nokia Lumia 1320 doesn't show me any notifications from the apps.

Above I asked:

The ones you listed facebook, instagram, viber, Skype. In settings is the a switch for notifications? on

I took a look at the facebook app today Take a look at your settings for the app. Menu on top right, settings, notifications. Across the top are the notification settings.

'Toast and Live Tile' should be selected. If it is still not working set it to 'No Notifications', accept at the bottom, Close the app and power cycle the phone. Go back into Notifications and set it to 'Toast and Live Tile', accept the change. Now wait
to see if it w0rks.

stoneprophet · Aug 17, 2015

ME Tile Notifications not working

I'm not getting any push, toast or tile notifications on my ME tile. All it ever displays is my profile picture. If I click on it and scroll over to notifications it shows me the notifications in text form I've had pending but I never get these on the
actual live tile itself. Also I get no Facebook notifications from the app even though I've enabled all notifications for tile and toast I have yet to receieve a single notice from any comment, post or status update.

Is there a setting I need to enable first before this can work? I've synced my FB account with Windows Live and have pulled in all my contacts but I still get no notifications of any kind on the ME tile. Any help would be greatly appreciated.

jimbo45 · Aug 17, 2015

Hi there

All very interesting -- But who dreams up these stupid names.

Where I come from if you say something's TOAST - it means it's Gone -- Bad / rubbish / disaster etc.

I'm sure the application works fine -- but those Names !!!!!.

Live tiles though is a great idea - especially if they can be "Undocked" from the Start Menu and don't have to launch a "Metro" app..

Cheers
jimbo

swarfega · Apr 4, 2018

Toast as a description of a function has been around a while now in Computing. Its another name for pop-up notification.

Windows 10: Engaging customers with Live Tiles and toast notifications (10 by 10)

Engaging customers with Live Tiles and toast notifications (10 by 10)

Engaging customers with Live Tiles and toast notifications (10 by 10)

Engaging customers with Live Tiles and toast notifications (10 by 10)

Engaging customers with Live Tiles and toast notifications (10 by 10) - Similar Threads - Engaging customers Live

Native toast notifications not displaying on Windows 10

Native toast notifications not displaying on Windows 10

Native toast notifications not displaying on Windows 10

Live Tiles not working at custom scale.

Live Tiles not working in custom scaling.

Windows 10 Notification (Toast?) Area

Windows 10 Live tile

Windows 10 Toast notification

Chasable Live Tiles, Adaptive notifications coming to Windows 10