Attributes

The Product Tour, as an extension of the 3D Viewer, shares many of its attributes. For reference, please visit this page.

Attribute Example

This example shows how to use the sku, viewer-visible, and product-tour-visible attributes:

<epigraph-ar
	sku="INSERT-SKU"
	viewer-visible
	product-tour-visible
></epigraph-ar>

CSS Custom Properties

CSS Custom Property Example

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

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

CSS Shadow Parts

CSS Shadow Part Example

This example sets the opacity of the hotspot button CSS shadow part to 0.5:

epigraph-ar::part(hotspot-button) {
  opacity: 0.5;
}

Slots

Slot Example

This example sets the mobile-product-tour-button slot to a new button element:

<epigraph-ar>
     <button slot="mobile-product-tour-button"></button>
</epigraph-ar>

Events

Event Usage Example

This example listens for the product-tour-requested event on the first instance of epigraph-ar on your page, provided that the suppress-tour-modal attribute is enabled:

let arElement = document.querySelector('epigraph-ar');
arElement.addEventListener('product-tour-requested', (e) => {
  console.log('Product Tour requested');
});

Methods

Method Usage Example

This example shows how to call the collapse method on the Product Tour element within the shadow root of the first instance of epigraph-ar on your page:

<script>
  let arElement = document.querySelector('epigraph-ar');
	let tourElement = arElement.shadowRoot.querySelector('product-tour');
	tourElement.collapse();
</script>