Epigraph-Button

Prerequisites

To get the most out of this quickstart guide, you will need:

A list of product variants 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

Simply 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. Enabling analytics tracking

All epigraph solutions support analytics tracking using GA4 out of the box. In order to enable this feature, the only requirement from the webpage is to add and attribute named ga-measurement-id="<your-ga-4-measurement-id>" and you should start seeing events being fired to your Google analytics.

<epigraph-button sku="<insert-the-product-sku>" ga-measurement-id="<your-ga-4-measurement-id>"></epigraph-button>

5. Hiding the default UI

Most of the UI within our solutions is designed keeping versatility of our customer websites in mind, there might be a need to customize the UI at times. We offer 2 different approach to do so:

Customize the existing designs using CSS, highlighted within multiple sections here: https://docs.myepigraph.com/docs/epigraph-button-knowledgebase

Hide the default UI and build your own using the APIs exposed

<epigraph-button sku="<insert-the-product-sku>" hide-ui></epigraph-button>

6. Accessing the API (optional)

API methods: https://docs.myepigraph.com/docs/epigraph-button-api

To access the public functionality exposed with these solutions, you first need access to the element itself and each solution should have an api exposed on it via solutionRef.api, shown below:

// 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.api.launchAR();