Attributes

Attribute Example

This example sets the sku and button-mode attributes of the AR Button:

<epigraph-ar
	sku="INSERT-SKU"
	button-mode="mobile desktop"
></epigraph-ar>

CSS Custom Properties

CSS Custom Property Example

This example sets the AR button active background color custom property to blue:

epigraph-ar {
     --ar-button-active-background-color: blue;
 }

CSS Shadow Parts

CSS Shadow Part Example

This example sets the width and height of the ar-button-container CSS shadow part to 100px:

epigraph-ar::part(ar-button-container) {
    width: 100px;
  	height: 100px;
}

Slots

Slot Example

This example sets the ar-button slot to a new button element:

<epigraph-ar>
     <button slot="ar-button"></button>
</epigraph-ar>

Events

Event Usage Example

This example listens for the epigraph-ar-model-loaded event on the first instance of epigraph-ar on your page:

let arElement = document.querySelector('epigraph-ar');
arElement.addEventListener('epigraph-ar-model-loaded', (e) => {
  console.log('Model Loaded');
});