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.

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.

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:
  • TileWide310x150PeekImageAndText01
  • TileWide310x150PeekImageAndText02
  • TileWide310x150ImageAndText02
  • TileWide310x150ImageAndText01
  • TileSquare310x310ImageAndText01
  • TileSquare310x310ImageAndText02
  • TileSquare310x310ImageCollectionAndText01
  • TileSquare310x310ImageCollectionAndText02

 

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.
  • Check for valid templates, matched tags (such as <tile>, <visual> or <binding template>.
  • Check for duplicate ids. If you have two lines of text, make sure they are marked id="1" and id="2".
  • Make sure you have a template defined for the size of your static tile. For example, no large template when choosing a large tile.
  • Make sure you have required interim sizes defined as well. For example, if you just have a medium and large tile, the large one fails because the wide size isn't present.
Images don't show.
  • Be sure that you put in the fully qualified path if the image isn't on the same server.
  • Make sure that relative paths are correct based on the location of the HTML file.

 

Choosing a template

Creating Live Tiles with Pinned Sites

Windows tile template catalog