• Public
  • Public/Protected
  • All

The configuration for the Perception Toolkit. This is done by putting a PerceptionToolkit object on window which contains your custom configuration.


// Config - place above the embedding script element.
window.PerceptionToolkit = window.PerceptionToolkit || {};
window.PerceptionToolkit.config = {
  // The element used to launch the experience.
  button: document.getElementById('get-started')

The options available are listed below.


  • PerceptionToolkitConfig



Optional artifactSources

artifactSources: string[]

Location of ARArtifact sources which should be loaded on startup. Sources could be individual html pages or json-ld files. It's best to load json-ld files, with only the ARAartifacts needed for toolkit.

Example (html pages):

artifactSources: [ 'products/one.html', 'products/two.html' ]

Example (json-ld):

artifactSources: [ 'artifacts/ar-artifact-map.jsonld' ]

Optional button

button: HTMLElement

The button to hook onto for launching the experience.

Optional buttonSelector

buttonSelector: undefined | string

The selector to use to find the button, and is an alternative to providing a direct reference to it. If button is specified it takes precedence over the buttonSelector.

Optional buttonVisibilityClass

buttonVisibilityClass: undefined | string

The class to toggle on the button element (default: visible). This allows for the button to be shown or hidden depending on the device capabilties. For example, if the device does not support capturing the camera feed the buttons visibility class will be added.

Optional cardContainer

cardContainer: HTMLElement

The element into which any generated cards will be appended. This property is only required if the Perception Toolkit is adding cards. If you choose to add them manually you do not need to provide this property.

Optional cardMainEntityLabel

cardMainEntityLabel: undefined | string

The label to use for any mainEntity properties specified in the arContent object. (default: "Launch")

Optional cardShouldLaunchNewWindow

cardShouldLaunchNewWindow: undefined | false | true

Whether or not the buttons on the card should trigger a new window. If set to false (the default) the current page's location will be replaced when the user clicks on the button.





Optional cardUrlLabel

cardUrlLabel: undefined | string

The label to use for any url properties specified in the arContent object. (default: "View Details")

Optional debugLevel

debugLevel: DEBUG_LEVEL

Debug level. Takes one of the following:

  • error: Errors only. (default)
  • warning: Warnings and errors.
  • info: Info, warnings and errors.
  • verbose: All.
  • none: None.

Optional detectionMode

detectionMode: "active" | "passive"

Which detection mode to use:

  • passive: capture is always on. (default)
  • active: the user must tap to capture a frame for processing.

Optional hintTimeout

hintTimeout: undefined | number

The time, in milliseconds, to wait before showing a notification to the user suggesting that they ought to try positioning the marker more centrally to the camera feed.

Optional onboarding

onboarding: undefined | false | true

Whether or not to show the onboarding flow. If true then onboardingImages must also be set.



Optional onboardingImages

onboardingImages: string[]

The images to use for onboarding the user. Please note: All images should be the same dimensions.

Optional onload

onload: undefined | function

A callback that is fired after the initial bootstrapping, at which point the global PerceptionToolkit object will have been populated with any elements, events, or functions it has.

Optional root

root: undefined | string

The location from which the toolkit should be loaded. Typically this will be the node_modules directory, e.g. node_modules/perception-toolkit.

Optional shouldLoadArtifactsFrom

shouldLoadArtifactsFrom: function | string[]

A callback or set of strings used to determine if artifacts are allowed from a given origin.

Example (function):

shouldLoadArtifactsFrom: (url) => url.origin === 'https://perceptiontoolkit.dev'

Example (strings):

shouldLoadArtifactsFrom: ['https://perceptiontoolkit.dev']

Optional showLoaderDuringBoot

showLoaderDuringBoot: undefined | false | true

Whether or not to show the loader during bootup. If false the developer takes responsibility for displaying appropriate messaging to the user.


  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method

Generated using TypeDoc