AR Component

Samples detailing the use and integration of our AR component.

Import

To use the latest version, include the following script:

-- CODE language-html --

<head>
<script async type="module" src="https://www.unpkg.com@epigraph/spinner/dist/epigraph-ar.min.js"></script>
</head>

Default usage with poster

-- CODE language-html --

<epigraph-ar
class="card col s12 m6"
sku="abc123"
viewer-visible
poster="./poster.jpg"
>
</epigraph-ar>

Changing poster using poster attributes

-- CODE language-html --

<epigraph-ar
class="card col s12 m6"
sku="abc123"
viewer-visible
poster="./poster.jpg"
>
</epigraph-ar>
<epigraph-ar
class="card col s12 m6"
 sku="abc123"
 viewer-visible
 poster="./poster.jpg"
>
</epigraph-ar>

Replacing poster using slots

-- CODE language-html --

<epigraph-ar class="card col s12 m12" sku="abc123" viewer-visible
 poster-foreground="./assets/images/3D_icon.png"
 poster="./poster.jpg">
</epigraph-ar>

HTML Example: Using attributes to change loading indicator

-- CODE language-html --

<epigraph-ar class="card col s12 m12" sku="abc123" viewer-visible
 poster-foreground="./assets/images/3D_icon.png"
 poster="./poster.jpg">
</epigraph-ar>

HTML Example: Using slots to replace modal contents

-- CODE language-html --

<epigraph-ar
 class="card col s12 m6"
 sku="abc123"
>
<h5 slot="modal-title">Replacement Title</h1>
<p slot="modal-instruction">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
   eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<img slot="modal-qr-image" src="./assets/images/qr_img.png" />
</epigraph-ar>

HTML Example: Styling the QR modal with attributes

-- CODE language-html --

<epigraph-ar
 class="card col s12 m6"
 sku="abc123"
 modal-style="width: 738px; height: 561px; padding: 24px; background: #FFFFFF; border-radius: 4px;"
 modal-done-button-style="border-radius: 0px; padding: 10px 24px; width: 237px; height: 43px; background: #D40029; margin-left: 50%; margin-top: 50%;"
 modal-close-button-style="height: 24px; line-height: 24px; font-family: Font Awesome 5 Pro; font-style: normal; font-weight: normal; font-size: 24px; position: absolute; top: 25px; right: 25px;"
 modal-title-text-style="text-align: left; top: 25px; left: 24px; font-family: Roboto; font-style: normal; font-weight: 500; font-size: 24px; line-height: 32px; text-transform: capitalize; color: #333333;"
 modal-instruction-text-style="text-align: left; font-family: Roboto; font-style: normal; font-weight: normal; font-size: 14px; line-height: 20px; color: #413D3A;"
 modal-qr-container-style="width: 256px; height: 256px; position: absolute; left: 50%; transform: translateX(-50%); margin-top: 6%;"
>
</epigraph-ar>

HTML Example: Using slot to replace default ar button

-- CODE language-html --

<epigraph-ar
 class="card col s12 m6"
 sku="abc123"
>
<button slot="ar-button" class="center waves-effect waves-light btn-large red" style="position: absolute; top: 50%; left: 50%; transform: translate3D(-50%, -50%, 0);">
<i class="material-icons left">view_in_ar</i>View in Your Space
</button>
</epigraph-ar>