Adding Quicklook Banners

Add banners to your quicklooks that let you show more information or link to other pages/quicklooks.

Note: For a more 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:

Adding an Apple Pay Button or a Custom Action in AR Quick Look

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.

var data = {
  options: {...},
  productCode: PRODUCT_CODE
  ios:{
      callToAction: "Buy Now!",
      canonicalWebPageURL: "https://example.com",
      applePayButtonType: "plain",
      checkoutTitle:"Red Car",
      checkoutSubtitle:"Convertible with custom rims",
      price: "$25"
  }
};

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:

var data = {
  options: {...},
  productCode: PRODUCT_CODE
  ios:{
      custom: "https://example.com/banner.html",
      customHeight: "large",
  }
};

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:

var data = {
  options: {...},
  productCode: PRODUCT_CODE
  ios:{
      callToAction: "Buy Now!",

      tapCallback: myFunction
  }
  
};

You will receive a standard event object from the callback.

Android Banner customisation

You can customize the Android quicklook via Google’s settings here:

https://developers.google.com/ar/develop/java/scene-viewer#supported_intent_parameters_2

The following properties work:

• link
• title
• sound
• resizable
• browser_fallback_url