.NET Passport Cobranding Overview

.NET Passport Cobranding Overview

Cobranding is the process by which your site can customize the Web pages hosted by Microsoft® .NET Passport. The pages that you can cobrand include the Registration and Sign-in pages and the .NET Passport Member Services pages. You can specify nearly all aspects of the layout and content of .NET Passport pages, with the exception of specific user-interface (UI) areas such as forms used for the actual sign-in or registration process.

You cobrand .NET Passport pages by creating a cobranding template file. Your site hosts this file and determines its implementation. Your site can also host a cascading style sheet to modify the styles of the HTML elements on .NET Passport pages.

The following example shows the .NET Passport Sign-in page cobranded to look like an integral part of the Adventure Works sample site.

Single Sign-In Page with Cobranding

After a customer signs in to .NET Passport at your site, you are encouraged to display a personalized greeting from the .NET Passport profile. In addition, you can use the .NET Passport Unique ID (PUID) to look up records for repeat visitors in your database in order to display individualized content such as order status, travel itineraries, or preferences.

Welcome Page after Sign-In

Why Cobrand?

From usability studies, Microsoft has found that when a user identifies the connection and verifies the implicit trust between the .NET Passport pages and your site's .NET Passport-enabled pages, that user is more likely to proceed with an initial .NET Passport sign-in or registration.

A recommended use for cobranding is to provide step-by-step documentation to tell users what to do when they find themselves on a .NET Passport page. These instructions can be tailored to your particular audience. Use this opportunity to explain what the .NET Passport service offers and why your site uses .NET Passport for authentication. For example, on a cobranded Registration page, you could explain why obtaining a new .NET Passport is necessary before the user can continue using your site.

Using Cobranding

There are three ways that you can incorporate cobranding into your .NET Passport enabled site.

Establish Basic Cobranding When You Register Your .NET Passport Site

When you register to become a .NET Passport participating Web site, you must supply the URL of a banner image for your site. This image will be incorporated into .NET Passport service pages. This is the most basic level of cobranding and is required to become a live participating site. While your site is in development, you may modify the URL of your banner image and other cobranding URLs at any time. For more information, see Registering Your .NET Passport Site.

In addition to the banner image URL, you may also provide a URL indicating the page to which users will be directed if they click on your banner on one of the .NET Passport pages.

Using Flexible-Layout Cobranding

Another way of adding cobranding support to your site is to create a flexible-layout cobranding template file. This file defines several JavaScript variables of global scope, named in accordance with the cobranding specifications. The values assigned to these variables will be strings of HTML code that define your cobranding layout. The .NET Passport service pages will include your template file using a SCRIPT tag and use the variables defined in your template to generate the HTML for each service page. For more information about creating a cobranding template file, see Basic Cobranding Template.

In addition to the basic cobranding template, you may use .NET Passport's cobranding functionality to change the look and feel of your cobranding based on a particular context. For example, imagine that your site has a "Preferred Customer" section and a regular section. You can use existing contextual information about your site (the originating URL, for example) to pass a query string variable on to your cobranding template code. Your cobranding template in turn contains branching code based on this variable, and produces cobranded HTML content for a preferred customer that is entirely different from what it produces for a regular user. For more information, see Using the coBrandArgs Parameter for Flexible-Layout Cobranding.

Using a Cascading Style Sheet File to Define Styles on .NET Passport Pages

Providing a custom style sheet allows your site to change basic style elements on .NET Passport pages—elements such as text colors and fonts. Even a simple style sheet will go a long way toward improving the user experience during transitions between your site and .NET Passport pages. For more information, see .NET Passport Cobranding Style Sheets.