<epigraph-ar> v1

Version:
1.1.8

Quick Start

You need to import our web component module. We recommend that you do this in the head. It's important that type="module" is specified.

	
  	<!-- include this in your `<head>` -->
		<script async type='module' src='https://unpkg.com/@epigraph/ar/dist/epigraph-ar.min.js'></script>
    
    <!-- Use it just like other HTML Elements -->
    <epigraph-ar sku="valid-epigraph-product-sku" ua-code="your-valid-ua-code" viewer-visible></epigraph-ar>
  

Usage

You can insert <epigraph-ar> elements anywhere you'd like. <epigraph-ar> currently serves two purposes:


  1. View in your space: you can embed a button that will launch an Augmented Reality experience (mobile) or show a QR code modal for the user to scan to launch an Augmented Reality experience (desktop).
  2. 3d Viewer: you can embed a 3d model directly in your page.

You can use these features in combination, or in isolation, depending on the attributes specified for the element.

Properties

arButtonModeAttribute

sets ar button modes for the ar-button, maps to the enumeration empty string - NONE mobile - MOBILE desktop - DESKTOP mobile desktop - BOTH

Default:
"mobile desktop"
Type:
String
Attribute:
button-mode
arButtonStyle

The in-line CSS style to use for the ar-button. Only modifies the default button styles.

Default:
""
Type:
String
Attribute:
ar-button-style
cameraOrbit

sets the viewer camera orbit values

Default:
"55deg 69deg auto"
Type:
String
Attribute:
camera-orbit
interactionPromptThreshold

Requires viewer-visible to be true. Used to set the delay for interaction prompt, value in miliseconds, input can be any non-zero positive integer.

Default:
3000
Type:
Number
Attribute:
interaction-prompt-threshold
loadingColor

Requires viewer-visible to be true. Used to set the loading indicator color.

Default:
"#3f82f9"
Type:
String
Attribute:
loading-color
loadingRadius

Requires viewer-visible to be true. Used to set the radius of the loading indicator.

Default:
"183px"
Type:
String
Attribute:
loading-radius
loadingThickness

Requires viewer-visible to be true. Used to set the thickness of the loading indicator.

Default:
"8px"
Type:
String
Attribute:
loading-thickness
modalBackgroundStyle

The in-line CSS style to use for the background of the QR Modal.

Default:
""
Type:
String
Attribute:
modal-background-style
modalCloseButtonStyle

The in-line CSS style to use for the QR Modal's "close" button.

Default:
""
Type:
String
Attribute:
modal-close-button-style
modalDoneButtonStyle

The in-line CSS style to use for the QR Modal's "done" button.

Default:
""
Type:
String
Attribute:
modal-done-button-style
modalInstructionTextStyle

The in-line CSS style to use for the QR Modal's "instruction" text.

Default:
""
Type:
String
Attribute:
modal-instruction-text-style
modalQrContainerStyle

The in-line CSS style to use for the QR Modal's QR Container. You can leverage this to adjust the size of the QR code, for example.

Default:
""
Type:
String
Attribute:
modal-qr-container-style
modalStyle

The in-line CSS style to use for the QR Modal.

Default:
""
Type:
String
Attribute:
modal-style
modalTitleTextStyle

The in-line CSS style to use for the QR Modal's "title" text.

Default:
""
Type:
String
Attribute:
modal-title-text-style
poster

Requires viewer-visible to be true. This will show the specified image over the 3D viewer. This image should represent the product being displayed. When the poster is clicked, it will cause the 3d model to load and the poster will be dismissed.

Default:
""
Type:
String
Attribute:
poster
posterForeground

sets the source url for the icon to display on top of the poster, requires the attribute "viewer-visible" to be true

Default:
""
Type:
String
Attribute:
poster-foreground
shadowIntensity

Modifies the shadow intensity of the model, acceptable values are between 0 and 1

Default:
1
Type:
Number
Attribute:
shadow-intensity
sku

*Required* string value matching product skus stored in epigraph database

Default:
""
Type:
String
Attribute:
sku
uaCode

Insert your UA-XXXX code for Google Analytics for specifying where to send GA events for tracking and analytics purposes.

Default:
""
Type:
String
Attribute:
ua-code
viewerVisible

Used to determine if 3d Viewer is displayed or not.

Default:
FALSE
Type:
Boolean
Attribute:
viewer-visible

Methods

dismissPoster

Hides the poster and loads the model.

Type:
void
showPoster

Loads the poster and hides the model

Type:
void

Events

epigraph-invalid-product

Custom event to indicate product associated with the sku is invalid. Fired as soon as the validity is determined.

Type
epigraph-valid-product

Custom event to indicate product associated with the sku is valid. Fired as soon as validity is determined.

Type

Slots

This is some text inside of a div block.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Styling

No items found.