Build a live tile
Create live tiles for Internet Explorer 11 to entice users and get more site interaction.
Live tiles are used for many web apps such as games and social, news, and entertainment apps to keep users informed and involved. You can pin a live tile to show off what your site does best. Live tiles are a great way to get users to interact with your website.
Setting up a live tile for your webpage involves a few XML config files and a few lines of code in your webpage. Your configuration files sets up a time interval to pull the notifications from your site, and points to XML files that contain your messages and images. Using the Windows notification platform, your site can have up to five text and image messages that are cycled on a tile at a time. Let's look at a simple live tile example you can use to create tiles for your site.
Note This exercise assumes you have a website for the XML files and images, and your site provides updated content periodically that can be displayed on a live tile.
Note If something doesn't work, it fails silently. You currently can't debug XML config files or notifications when something doesn't work. See the debugging section toward the end of this article for some ideas when things go wrong.
Where to start
In the head element of your webpage, define the app name and a configuration filename. In this example, the app name is "Pin test" and the browser config file is called "ieconfig.xml."
<head>
...
<meta name="application-name" content="Pin test" />
<meta name="msapplication-config" content="ieconfig.xml" />
<link rel="shortcut icon" href="favicon.ico" />
...
</head>
The app name is displayed as the default title on the static tile, unless the user changes it when first pinning the tile. The browser config file defines the images for the static tile, and points to up to five tile schema files for notifications. The last line in this example is an optional custom favicon that is displayed in the address bar and as a logo on live tiles. You can add these lines to almost any webpage.
When the user pins the page to the Start screen, the user is given an option of the tile sizes listed in the browser config file, and the title is set to the app name.
.png)
This example uses all four static tile sizes by specifying images for each. While we define a small tile, it doesn't show notifications, but it can show a badge (small image or logo). The notification section in the browser config file points to tile schema files:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="images/smalltile.png"/>
<square150x150logo src="images/mediumtile.png"/>
<wide310x150logo src="images/widetile.png"/>
<square310x310logo src="images/largetile.png"/>
<TileColor>#009900</TileColor>
</tile>
<notification>
<polling-uri src="notifications/1.xml"/>
<polling-uri2 src="notifications/2.xml"/>
<polling-uri3 src="notifications/3.xml"/>
<frequency>30</frequency>
<cycle>1</cycle>
</notification>
</msapplication>
</browserconfig>
In the notification section, we're pointing to three tile schema files with the polling URI attributes. You can define up to five polling URIs. To change notifications, update the tile schema files periodically on your server. The frequency attribute tells Windows 8.1 how often to check back to your website for new notifications. This example is set for the minimum of 30 minutes. You can set it for 30, 60, 360 (6 hours), 720 (12 hours), or 1440 (1 day) minutes. When you set more than one notification, Windows 8.1 switches the tile between them every few seconds.
The cycle attribute sets how notifications are cycled so you can control whether changes are shown on all tiles, specific ones, or not at all. Setting cycle to 1 tells Windows 8.1 to put notifications on all size tiles.
When you put browserconfig.xml in the root of your site (for example, contoso.com/browserconfig.xml), more than one webpage can use the same tiles and notifications. You'll have the same behavior regardless of which webpage the site is pinned to.
The previous example shows how to create a browser config file to declare images and polling URIs, but you can also put metadata into the head element of your HTML page. This example shows how this looks in HTML:
<head>
...
<meta name="application-name" content="Pin test" />
<meta name="msapplication-TileColor" content="#009900" />
<meta name="msapplication-square70x70logo" content="images/smalltile.png" />
<meta name="msapplication-square150x150logo" content="images/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="images/widetile.png" />
<meta name="msapplication-square310x310logo" content="images/largetile.png" />
<meta name="msapplication-notification" content="frequency=30; polling-uri=notifications/1.xml; polling-uri2=notifications/2.xml; polling-uri3=notifications/3.xml" />
...
</head>
The results are the same as using an external browser config file, but it isn't shareable across other webpages.
You can also use JavaScript to define the notifications, as shown here:
document.addEventListener('mssitepinned', StartPeriodicUpdateBatch, false);
function StartPeriodicUpdateBatch()
{
var arrURI = ["notifications/1.xml", "notifications/2.xml", "notifications/3.xml"];
window.external.msEnableTileNotificationQueue(true);
window.external.msStartPeriodicTileUpdateBatch(arrURI);
The JavaScript version of the configuration listens for the mssitepinned event. The event fires when the site is pinned, and the msEnableTileNotificiationQueue method is called to enable notifications. When you use JavaScript to set the notifications, you still have to define your static tile in meta data or an XML file.
Writing notification files
The key to successful live tiles is in updating the notifications. Notifications are given to Windows 8.1 through tile schema files. The files are updated as often as you need new information. Windows 8.1 checks the site based on the frequency attribute set in the browser config file, and downloads the latest notifications. The basic file schema is shown in Creating Live Tiles with Pinned Sites, and uses pre-defined binding templates to display images and text. You can review template options in Choosing a template.
This example creates three different tile designs. For the medium tile, it uses a peek template, which alternatively switches the tile between the image and text. For the wide tile, an image is displayed with a line of text below it, and the large tile shows three small images with a title and text next to each.
<tile>
<visual lang="en-US" version="2">
<binding template="TileSquare150x150PeekImageAndText04" branding="name">
<image id="1" src="https://contoso.com/images/firstImage.jpg"/>
<text id="1">First image</text>
</binding>
<binding template="TileWide310x150ImageAndText01" branding="name">
<image id="1" src="https://contoso.com/images/firstImage.jpg"/>
<text id="1">First image</text>
</binding>
<binding template="TileSquare310x310SmallImagesAndTextList01" branding="name">
<image id="1" src="https://contoso.com/images/firstImage.jpg"/>
<image id="2" src="https://contoso.com/images/secondImage.jpg"/>
<image id="3" src="https://contoso.com/images/thirdImage.jpg"/>
<text id="1">Title Text 1</text>
<text id="2">Body Text 1.1</text>
<text id="3">Body Text 1.2</text>
<text id="4">Title Text 2</text>
<text id="5">Body Text 2.1</text>
<text id="6">Body Text 2.2</text>
<text id="7">Title Text 3</text>
<text id="8">Body Text 3.1</text>
<text id="9">Body Text 3.2</text>
</binding>
</visual>
</tile>
Tile schema files contain the text and image for a single notification. You can define up to three tile sizes in each file, medium, wide, and large. The size of the template that Windows 8.1 uses depends on the current size of the static tile. The templates use text, images, or both. Because the template you define is used only on a specific notification, there's no rule that says you must use the same type template for all sizes, or you have to use similar styles for each of several rotating notifications. You can even change templates when you update your tile schema files. For example, if you have five notifications, you can mix them up, having just a large line of text, an image and text, a two column list of 11 items, or multiple images and a couple of lines of text.
When you're experimenting with templates, consider unpinning and repinning your sample from the Start screen when you make changes so that Windows 8.1 looks for notifications right away. Otherwise, you might wait 30 minutes or more for the notifications to change.
Choosing an image file
When you define an image for a notification, use the same parameters you used for the static tile.
- Make sure your PNG, GIF, and JPG images are 200k or less in size and 1024x1024 pixels or smaller.
- Make your original images approximately 1.8x the size of the target tile to allow for scaling up and down. This means that for a 310x150 wide tile, the original is 558x270.
- Format your images based on the target tile size. When using a wide tile, a square image gets cropped considerably on the top and bottom. For the large square image, the format is not quite square. It's slightly wider than it is tall. If you use a square image, it's scaled for width, and slightly cropped on the top and bottom.
See the chart in Creating Live Tiles with Pinned Sites for more suggested dimensions.
Adding text
Depending on the template and size of tile you use, you can add up to eleven lines of text in a number of configurations. See the template catalog for more text configuration options you have with live tiles.
When figuring out the template you want to use, notice whether the text wraps or not. Most of the templates with multiple lines of text are one string per line. This means long lines of text are truncated with ellipses.
If you want a specific look, check the descriptions to see if the text wraps or not. For example, these two templates display text and images similarly:
| TileSquare310x310SmallImagesAndTextList01 | Displays three small images with titles and two regular lines of text. The titles on each image and the regular lines of text are each single strings, and subject to being truncated if too long. |
| TileSquare310x310SmallImagesAndTextList04 | Displays three images with titles and two lines of text as well. However, the regular text is a single string that wraps up to two lines. |
Both templates display three images with a title and two lines of text, but differ in how they truncate. If a wrapped line goes past the allowed number of lines, it also truncates the text with ellipses.
Showing a logo
When your website defines a favicon, you can also display it on tiles with text. To display your favicon, change the branding attribute to "logo" in the tile schema files. Now your favicon, or logo, shows on every tile.
<tile>
<visual lang='en-US' version='2'>
<binding template='TileSquare150x150PeekImageAndText04' branding='logo'>
<image id='1' src='https://contoso.com/images/firstImage.jpg'/>
<text id='1'>First image</text>
</binding>
<binding template='TileWide310x150ImageAndText01' branding='logo'>
<image id='1' src='https://contoso.com/images/firstImage.jpg'/>
<text id='1'>First image</text>
</binding>
<binding template="TileSquare310x310ImageAndText02" branding="logo">
<image id='1' src='https://contoso.com/images/firstImage.jpg'/>
<text id="1">First line of text</text>
<text id="2">Second line of text</text>
</binding>
</visual>
</tile>
There are three options for the branding attribute; none, name, and logo. Here's what they mean:
| Attribute | Description |
|---|---|
| none | Does not display a logo on any tile under any circumstances. |
| logo | Displays your website's favicon on all tiles. |
| name | Displays a logo on most tiles with the exception of these:
|
Controlling which size tiles get notifications
By default, all three tile sizes can display notifications that cycle through up to five different tiles at any given time. If the user changes from a medium to a large size tile, they'll get content that changes. If you set the cycle meta tag, you can fine tune Windows 8.1 to only display notifications on specific tile sizes. This table lists the cycle meta tag settings you use to tell Windows 8.1 which tile sizes display notifications:
- 0: (default if only one notification) Don't cycle.
- 1: (default if multiple notifications) Cycle notifications for all tile sizes.
- 2: Only cycle notifications for medium tiles.
- 3: Only cycle notifications for wide tiles.
- 4: Only cycle notifications for large tiles.
- 5: Only cycle notifications for medium or wide tiles.
- 6: Only cycle notifications for medium or large tiles.
- 7: Only cycle notifications for wide or large tiles.
The cycle attribute goes in the notification portion of the browserconfig file.
<notification>
<polling-uri src="notifications/1.xml"/>
<polling-uri2 src="notifications/2.xml"/>
<polling-uri3 src="notifications/3.xml"/>
<frequency>30</frequency>
<cycle>4</cycle> <!-- only cycle large tiles-->
</notification>
Note When you use a cycle other than the default, it can sometimes take a little time to adjust. This means that the notifications might start cycling when first pinned, regardless of the cycle setting. Tiles are excluded from notification cycling will eventually stop.
Testing and finding problems with live tiles
Here are a few ideas to help you find bugs when creating pinned sites and live tiles. Because you don't get error messages when live tiles are running, you need to be diligent in bug catching. Here are some ways to avoid introducing problems:
- For your XML files, use an editor that flags mis-matched tags and quotes.
- Copy and paste template names, as they're pretty long and many names are similar.
- Verify images are on the server and in the path you're pointing to.
If you're running into problems, there might be a simple solution:
| Symptom | Check this |
|---|---|
| No "Turn live tile off" option on the Start screen. | This means the tile is a static tile and live content isn't recognized. It usually signals that a component is missing, such as a browser config file, or there are some syntax errors in the code. Make sure tags are matched and closed. If you have quoted strings, such as a URL, be sure it's correct. |
| You're missing one or more of your notifications when running. | If you set up three notification files, but only one or two notifications are working, there is most likely an error in the files that aren't working.
|
| Images don't show. |
|