Embedding the SDK

JS SDK Reference

The Variant JS SDK is used to generate links to product variations. Please always use the SDK and don’t copy/paste links generated by it manually (this is because the system makes heavy use of caching via specific features of the SDK, and url formats will also change as development continues).


Getting Started

Importing

<script async src="https://sdk.variant.app/js/variant.min.1.0.js?v=1.0.5">
</script>


Initialising

var settings = { teamId: TEAM_ID };

Variant.init(settings);

Currently API Key auth is not available, so team ID must be specified.


Launching a Quicklook

var data = {
  options: {
      TAG1 : {
          material?: string,
          enabled?: boolean
      },
      TAG2 :{...},       
  },
   productCode: PRODUCT_CODE
};

Variant.launchQuicklook(data);

This function is only guaranteed to work if called via user input (click/tap).

Pass in an object with an ‘options’ key. 

The ‘options’ object should contain keys for each customisable tag. 

enabled’ toggles objects on or off, and for now should always be set to the desired value, as there is no default behaviour officially specified.

material’ replaces the tagged object’s material with the named one. If no material property is specified, the default material will be used. It’s recommended to always set a material explicitly.


iOS Banner customisation

You can customize the iOS quicklook via Apple’s settings 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


QR Code Generation

Variant.generateQr(
           url : string,
           el: DOMElement,
           pixelSize: int
         );

This will generate a QR code img inside the element you specify. This is particularly useful for desktop users, to prompt them to open the page on their phone.

Note: the element supplied can be an off-screen DOM element, if you intend to move the generated image elsewhere (e.g. to multiple modals).


Future Roadmap

  • Improved error reporting
  • Generation of QR links directly to products
  • Generation of ‘plain’ urls for custom Quicklook button integrations
  • Model-Viewer url generation & integration
  • Desktop Viewer