Adding Quicklook Banners
Add banners to your quicklooks that let you show more information or link to other pages/quicklooks
For a detailed walkthrough of how to create and customise iOS Quicklook banners, read our article Using Banners in AR Quicklooks

iOS Banner customisation

You can customize the iOS quicklook using the settings outlined by Apple here:
The following properties work:
  • callToAction
  • canonicalWebPageURL
  • applePayButtonType
  • checkoutTitle
  • checkoutSubtitle
  • price
  • custom
  • customHeight
  • allowsContentScaling
Add an ios object to the data sent when launching a quicklook, with the appropriate settings. The SDK will handle URI encoding as needed.
1
var data = {
2
options: {...},
3
productCode: PRODUCT_CODE
4
ios:{
5
callToAction: "Buy Now!",
6
canonicalWebPageURL: "https://example.com",
7
applePayButtonType: "plain",
8
checkoutTitle:"Red Car",
9
checkoutSubtitle:"Convertible with custom rims",
10
price: "$25"
11
}
12
};
Copied!

Fully custom banners

Embedding an existing DOM element as a banner works as well. Simply pass the url to the HTML, as specified in Apple’s documentation. You will also need to set a customHeight:
1
var data = {
2
options: {...},
3
productCode: PRODUCT_CODE
4
ios:{
5
custom: "https://example.com/banner.html",
6
customHeight: "large",
7
}
8
};
Copied!

Receiving iOS tap events from Banner

If you specify a banner with a call to action, you can receive taps on the banner by providing a tapCallback callback inside the ios object:
1
var data = {
2
options: {...},
3
productCode: PRODUCT_CODE
4
ios:{
5
callToAction: "Buy Now!",
6
tapCallback: myFunction
7
}
8
9
};
Copied!
You will receive a standard event object from the callback.

Android Banner customisation

You can customize the Android quicklook via Google’s configuration flags.
The following properties work:
  • link
  • title
  • sound
  • resizable
  • browser_fallback_url
Last modified 6mo ago