Adding HTML banners to non-entitlement apps

With the release of R25, the default library of all Digital Publishing Suite viewers has gotten a makeover. One of the improvements in R25 is the ability to insert larger HTML entitlement banners that can bleed off the edges and take up to 40 percent of the library screen real estate.

HTML banners can be used not only as a means for establishing publisher and title branding, but also to promote application subscriptions, cross-promotion of other applications, information on newsletters, and more. If the HTML banner is hosted on a remote web server, it becomes very easy to swap out imagery or create a slideshow to display multiple items.

Currently, the settings for the HTML banner live under the Entitlement options for the application, but it is not necessary to have entitlement authentication activated in your app to utilize the HTML banner spot. In this tutorial I will show you the little bit of trickery required to enable an HTML banner on a non-entitlement–based app.

Start out by creating a new application. If you want to offer Apple iTunes subscriptions, choose "Multi Folio with Entitlement and iTunes Subscription" as the application type. If you are not going to have any subscription options, then choose "Multi Folio with Entitlement" as the application type.

Expose the advanced options under the App Details page and find the two options for "Hide sign-in button in library" and "Hide subscribe button in library" (see Figure 1). You will definitely want to have the sign-in button hidden, but it is up to you if you want to also hide the subscribe button. If you intend on triggering subscription purchases directly from your HTML banner, then you may want to disable this button to avoid confusion.

The Entitlement Details page (see Figure 2) is where you fake the app into thinking that you are configuring an entitlement authentication service.

You can place whatever URL you want in the Service URL, Service Auth URL, and Forgot password fields. These URLs will not be accessible to the user. An Integrator ID is required; in this instance, I have used NULL as the integrator ID, as it will not be called from the app.

In the Entitlement Assets section (see Figure 3), select the option to enable the entitlement banner. The banner page URL should contain the web address of your live HTML banner. This field is not optional. Whatever URL you place in this field will be displayed to the user. Offline banner assets should be the same or similar to your online banner, as this will be displayed to the user when there is no Internet connectivity.

While there are icons that show options for SD and HD, the same banner assets are used in both instances. To avoid banner assets that look crummy on the iPad Retina display, you will want to investigate using media queries to deliver higher-resolution graphics when appropriate.

In the option for fixed vs. relative size, use fixed size if you have carefully crafted your HTML and CSS to fit a certain way. Otherwise, if you have coded your HTML with relative positioning, you will want to use relative size with a percentage defined.

In the Navigation Toolbar section of App Builder (see Figure 4), make sure to select the "Hide sign in button" option so that the sign-in button is not displayed on any other custom navigation tabs.

That's it! Now your app will be able to display a full-bleed HTML banner.

For more articles, videos, and resources, visit the Digital Publishing Suite Developer Center.