A banner is an item that appears in a collection browse page. There are two types of banners:
Basic banners – A basic banner is an image that appears in the browse page. Tapping a banner can either do nothing or it can trigger an action. For example, tapping a banner can launch a web page, link to another article or collection, or send an email, text message, or phone call. Banners are also useful for displaying branding or providing a visual divider in a browse page.
Dynamic banners – A dynamic banner displays HTML content on a browse page. For example, dynamic banners can display stock quotes, slideshow carousels, or social media feeds. By leveraging Cordova plugins, you can take advantage of AEM Mobile specific features such as allowing users to tap a slide in a banner to navigate to an article or to display the entitlement sign-in prompt.
The appearance of the banner is determined by the card to which it's assigned. The banner image is centered, scaled, and cropped as needed to fill the card area to which it's mapped. Create a banner image that is large enough to display properly within the card. See Optimizing content for AEM Mobile.
-
Select None if the banner should do nothing when the user taps it.
If you want the banner to perform an action, choose one of the following options:
http:// – Opens the specified webpage (http: or https:) in an in-app browser when the user taps the banner.
Example: http://www.adobe.com
navto:// – Jumps to the specified article or collection. Note that links to page numbers within an article are not supported. For information about navto formats, see Hyperlinks in AEM Mobile articles.
Example: navto://collection/coffeeProducts
mailto: – Uses the device's default email app to send an email message.
Simple example: mailto:jane@example.com
Detailed example: mailto:jane@example.com?cc=maria@example.com&subject=Thanks%20Again&body=Thank%20you%20for%20your%20support.%0D%0A%0D%0ANew%20line.
sms: – Uses the device's messaging app to send a text message.
Simple example: sms:1-206-555-2323
Detailed example (iOS): sms:+1206-555-2323&body=Text%20message
Detailed example (Android): sms:+1206555-2323?body=Text%20message
tel: – Uses the device's phone app to make a phone call.
Example: tel:1-206-555-2323
Navigate to Home Collection – Returns to the first article or collection in the top-level collection.
Navigate Back – Returns to the previous browser page or article from which the user tapped or clicked to navigate to the current browse page. (Swipe gestures on mobile devices are not included in back navigation.)
-
For example, you can create a card that covers the width of the device, and you can create a rule that maps the card to any banner. See Creating cards and layouts.
Dynamic banners display HTML content in browse pages.
- If you use multiple dynamic banners on a browse page, test the experience on your target devices to make sure that the performance is reliable. If the browse page takes too long to load or if you experience other problems, consider using fewer dynamic banners on the browse page.
- Using thumbnail images for banners is optional. Images can be useful if the user is offline or to appear behind transparent HTML content.
- If you use Cordova plugins in your dynamic banner, make sure that you select the Enable extensibility features in dynamic banner properties.
- When referencing external content in your HTML files, we recommend that you use HTTPS protocol instead of HTTP. The Desktop Web Viewer requires HTTPS protocols.
- You can use the <video playsinline autoplay> element to autoplay a video in the dynamic banner. If the video autoplays before the banner comes into view, consider using JavaScript that plays the video on the window.onAppear event and pauses the video on the window.onDisappear event.
Use this HTML content to create an entitlement dynamic banner. If the user is not signed in, a sign-in prompt appears in the banner. If the user is signed in, a Sign Out button appears in the banner. When you create the dynamic banner, make sure that you select the Enable extensibility features to enable Cordova plugins.
Download
-
-
For example, you can create a card that covers the width of the device, and you can create a rule that maps the card to any banner. See Creating cards and layouts.
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.