Epigraph-Button
Add AR capabilities to your website in minutes.
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-button> to the page
<epigraph-button> to the pageSimply add the <epigraph-button> 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-button sku="<insert-the-product-sku>"></epigraph-button>
<!-- Website Content Continued -->
</body>3. Epigraph will handle the rest
When a user requests to view content in Augmented Reality(AR), the button event handler will determine whether the device can natively open AR on the device. If the device doesn't support AR, we will show a modal with a scannable QR code that will bring the user back to your webpage on their mobile device and prompt them to open 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 epigraphButtonElement = document.querySelector("#<replace-with-the-id-you-gave-to-the-component>")
// Example of calling a valid public function
epigraphButtonElement.launchAR();
// Example of calling an invalid function (Not public and subject to change without any notification)
epigraphButtonElement._someProtectedMethod(); // Do not use
epigraphButtonElement.__someProtectedMethod(); // Do not useUpdated 2 months ago