A Plug and play app for mezzanine CMS to provide live tile and notifications for new website content for your Windows 8,Windows 8.1, Windows 10, or Windows Phone visitors.

pip install mezzanine-live-tile


Mezzanine Live Tile

A Plug and play app for mezzanine CMS to provide live tile and notifications for new website content for your Windows 8,Windows 8.1, Windows 10, or Windows Phone visitors.


In Windows 8 and above Microsoft introduced the start screen with Metro UI. Every app is represented by a static tile, and the app can make that tile live by providing notifications which Windows will cycle between them instead of displaying a static tile.

Internet Explorer and Microsoft Edge took this further by enabling websites owners to insert a special meta tags in the head of their pages in order to provide live tile functionality to their visitors.

Visitors can click on Favorites and then Pinn To Start and a new tile will be added to their start screen.

This app makes it easier for sites built on top of mezzanine CMS to provide this functionality without any hassle, just plug the app, configure settings as descried billow, and you are ready to engage your visitors and push updated content to them right to their start screen.


  1. Run $ pip install mezzanine-live-tile

  2. In add mezzanine_live_tile to your INSTALLED_APPS above mezzanine apps.

  3. Include mezzanine_live_tile urls in your projects as follows::
    from mezzanine_live_tile import urls as tile_urls


    url(r"^tile/", include(tile_urls, namespace="tile")),

  4. Run migrate::

    $ python migrate mezzanine_live_tile

  5. Tweak settings as described below



In your base.html insert the meta tags required to pin your site by loading tile_tags and inserting the following template tag in the head:
{% tile_meta %}
By default the app uses settings.SITE_TITLE to get the name that Windows will display for the tile in the start screen (analogous to app name). Alternatively you can pass a name to the tile_meta template tag to be used instead:
{% tile_meta "My Awesome Site" %}

Tile Images:

You must provide 4 different size images to be used as tile images for different tile sizes. For your convenience here are the recommended sizes taken from this MSDN page:: - small (128x128) - medium (270x270) - wide (558x270) - large (558x558)

To override the provided food truck place-holder images, you should upload your own images to <static_dir>/tile/images/.

For each image the name is the same as image size ("small" for small, "medium" for medium..etc.), we expect a ".png" image format in our template.


The app provide live tile notifications for new contents and updates, when a visitor pin your site windows notification system will pull updates from your server regularly and cycle between them in his start screen.

In order to support live tile notifications, you need to configure a class from which the app pulls new notifications which windows will cycle between in the live tile.

By default, If is installed, then the app will use BlogPost model as the notification class, this simply means that the live tile will cycle between the recent five blog posts, this is fine for most situations.

If is not installed then the app has its own fallback Notification class which will be listed in the admin, and in this case you must edit the notifications manually to ensure that your users get updated content.

Also you can configure your own class to be used as a notification class by configuring WINDOWS_TILE_MODEL setting in your It is a tuple of two items, the first item is the dotted path to the model class and the second one is a dictionary mapping notifications field names to your class field names:

WINDOWS_TILE_MODEL = ("my_app.models.MyCustomNotificationClass",
  "headline": "title",
  "body_text": "description",
  "image": "featured_image",

Editable Settings

A handful of options are provided to customize the look and behavior of your tile, you can edit those options in the admin > settings. here is a quick run through:: - TILE_COLOR

A background/accent color to use in the tile, this must be in the format (009900)
    How many notification windows will cycle between in the live tile.
    How often windows will pull updates from your website (default to one hour).
    What will windows display in the corner of the live tile (default to web site's favicon)
    Restrict cycling in certain tile sizes.

Overriding Notification Templates

By default the app uses a (header - body) text-only template for all tile sizes, but you can override the default template to use your own notification template instead.

First read this MSDN article about template catalog.

After you are comfortable with the template design, copy the template from "<mezzanine_live_tile>/templates/tile/tileconf/notification.xml" to your project's templates path or your own app templates path, in the latter case your app must appear in the INSTALLED_APPS list before mezzanine_live_tile.

Then you can edit your newly copied template. To make your life easier you may make use of wrap_text and text_node_for template tags, see the original template for sample usage.

Note also that you must test your templates before shipping them to your visitors, because you do not have any way to debug those templates it can be a little tricky to design custom templates, so make sure they are working for all tile sizes before shipping them.


Copyright (c) 2015 Musharraf Omer

Mezzanine Live Tile is licensed under the MIT license (See LICENSE for more details).