Epigraph-Tour
Allow visitors to interact with 3D objects on your page + shows hotspots/annotations to highlight certain features of the product.
Prerequisites
To get the most out of this quickstart guide, you will need:
- A product with a SKU assigned from Epigraph.
- A production or staging domain added to your Epigraph account.
1. Add the Epigraph-Solutions script to your page
Add the Epigraph-Solutions script to the head of the page that you would like to enable Augmented Reality on.
<head>
<script async type="module" src="https://cdn.jsdelivr.net/npm/@epigraph/solutions"></script>
</head>2. Place an <epigraph-tour> to the page
<epigraph-tour> to the pageSimply add the <epigraph-tour> component to your page wherever you'd like to enable AR. To connect it to the correct content, you'll need to add the SKU attribute to the button.
<body>
<!-- Website Content -->
<epigraph-tour sku="<insert-the-product-sku>"></epigraph-tour>
<!-- Website Content Continued -->
</body>3. Epigraph will handle the rest
Epigraph will load the 3D model for sku that was requested in the Epigraph-Tour. From here visitors to your site can rotate a 3D model, see dimensions and open the product in AR.
4. Accessing the API
To access the public functionality exposed with these solutions, you first need access to the element itself and any member that is exposed without the "_" or "__" prefix, can be utilized for customizing the experience on your own terms.
// in your javascript file or script tag. Make sure to replace the ID below
const epigraphTourElement = document.querySelector("#<replace-with-the-id-you-gave-to-the-component>")
// Example of calling a valid public function
epigraphTourElement.launchAR();
// Example of calling an invalid function (Not public and subject to change without any notification)
epigraphTourElement._someProtectedMethod(); // Do not use
epigraphTourElement.__someProtectedMethod(); // Do not useUpdated 2 months ago