EASYW100 - AntiDark

Demo and AR /3D Integration Helper

AR Integration

3D-Viewer Integration

Unique Article ID
AR-2023619161215

*Note: This ID will be replaced by

the your own ProductID/SKU
Number after production to make it
much easier for integration

Section 2 : WEB AR
INTEGRATION HELPER
The WebAR functionality suppor ted by most modern
Android and iOS devices lets your users place a vir tual
version of your product at home!

Include the Charpstar AR

Script
The script is very small (~8KB Size) and tells
the mobile browser to open the AR links in their
respective default native applications and
additionally does AR Support Checks

<script
src="https://js.charpstar.net/demo/demoscript
-V2-vert.js" defer></script>

Include the AR Code inside an

AR Badge Image or Button
element
The Image (which can be anything like an
AR Icon/Badge) or Button acts as the
activation element for the AR experience.
You can style this however you want
We hide the element on unsupported
devices and browsers with our script by
selecting its id property
"charpstarARViewer"
The 'data-articleid' attribute should contain
the Charpstar Unique articleid allocated to
the AntiDark product. After you've signed
on as a client, we'll replace this ID with
your own ProductID/SKU Number to
streamline integration.
The 'data-desktopqr' attribute enables a
direct QR Link to the AR model and makes
the AR Button visible on desktops. Remove
this attribute if you don't need this feature
The 'data-language' attribute controls the
display language selection for the QR
Popup. Supported values are "en-gb", "en-
us", "sv-se", "no-no", "da-dk", "de-at", "de-
de", "lv-lv", "cs-cz", "pl-pl", "sk-sk", "et-ee",
"a-a", "lt-lt"
In cases where integration is required for a
large number of products, please Contact
our CTO, Arjun Sudhakaran at
arjun@charpstar.com and we will assist
you in making the integration process
quickerr

<img id="charpstarARViewer" style =

"display:none" width = "65px"
src="https://charpstar.se/AR.gif" data-
articleid="AR-2023619161215" data-desktopqr
data-floor data-language="en-gb">

Section 3 : OPTIONAL
3D VIEWER
INTEGRATION HELPER
The 3D Viewer functionality is useful for Desktop devices
that do not suppor t AR and is included free with all our
plans

Include the Google Model

Viewer Script
The 3D Viewer is very customizable. If you
require extended functionality that is not
shown here, contact us and we will assist you

<script
src="https://js.charpstar.net/demo/model-
viewer-main.js"></script>

Use the model viewer code to

link to the 3D model
Here the src attribute should contain the
Charpstar Unique articleID associated with the
AntiDark product

<div class="model-viewer-wrapper">
<model-viewer id="threeDViewer" reveal="auto"
src="AR-2023619161215"
environment-
image="https://cdn2.charpstar.net/HDR/HDRI-
Default.hdr"
shadow-intensity="1.6" shadow-softness="1"
exposure = "1.3"> </model-viewer> </div>

Basic CSS Styling to enable

the 3D View to inherit parent
container sizing. Can be
modiaed as required
<style>
.model-viewer-wrapper {
position: relative;
padding-top: 100%;
margin: 0
}

model-viewer {
width: 100%;
height: 100%;
position: absolute;
top: 0;
height: calc(100% - 8px)
}
</style>