May 18, 2018 12:00 pm

A new product badge for Microsoft Store applications

By / Principal Software Engineering Lead, Microsoft Universal Store Team

Applications with new web badge for Microsoft Store products.

As many of you know, building quality apps is quite a commitment and investment in time. Once your app is in the Store, the next challenge is getting the word out about your new title and driving traffic to your product. Today, we’d like to announce a new tool for marketing your apps in your own blogs and websites. We’d like to introduce our new web badge for Microsoft Store products.


The new badge will render in your own website pulling localized logo, pricing (including sale pricing!), ratings and artwork directly from the store catalog. To render this badge for 8 Zip simply embed this script using its Store Id (9wzdncrfhwb8). Please note you must add the Id in two places in the badge script, the “class=” and inside the “mspb-“.




<div id="mspb-nc9jl2ngc1i" class="9wzdncrfhwb8"></div>


<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fstorebadge.azureedge.net%2Fsrc%2Fbadge-1.6.1.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0Amspb('9wzdncrfhwb8'%2C%20function(badge)%20%7B%0Adocument.getElementById('mspb-nc9jl2ngc1i').innerHTML%20%3D%20badge%3B%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

The button click on the badge will direct your customers to the proper Product Description Page where they make the actual purchase. You can add multiple badges to any single page, just make sure they all use a unique div Id, as shown above.

To see the badge in action, check out XBOX’s @majornelson (www.majornelson.com) who is using the badge to promote Xbox content on his blog.

Example post here: https://majornelson.com/2018/05/03/xbox-live-gold-members-play-for-honor-xcom-2-and-just-cause-3-for-free-this-weekend/.

That’s it! Feel free to promote your apps and games on your own sites.

Updated June 6, 2018 3:17 pm

Join the conversation

  1. I like the new batch, but I rather see the ‘Get it now’ button placed at the right of the price. Now it adds some unnecessary space at the bottom of the badge when squared app images are shown.

    • Hi Dennis,
      We’re updating the design for the badge again soon. I’ll make sure the design team looks at this.
      Cheers!
      /Eric

    • Hi Tsutomu,
      mspb- stands for Microsoft Product Badge. This exists in case you want to have multiple badges on a single page. This value must be unique so that the proper product data can be bound from our catalog. Please let me know if you have any other questions.

        • You could definitely do that if you like! We didn’t reuse the app store ID because some may want to have multiple badges (with the same app id) on a page. Resulting in elements with duplicate DOM ids.