Getting StartedPOWER Commerce
3D ViewerAugmented realityPOWER Engage
Why POWER Engage?Engagement programsOur ModulesCollectiblesQuestsRewardsSDKAsset Manager
3D FilesDocumentation
This section will guide you on how to integrate POWER.xyz AR module & offer AR capabilities to your users Various integration types are available: - as a standalone button - or integrated as part of our 3D viewer, you’ll access all informations to propose AR in your platform with a simple script.
Standalone AR buton
You only have to trigger our component through the following function:
<power-viewer-ar-button
standalone
standalone-qr-template="modal"
company-eid="-5286354827860524208"
button-id="dibOS1U9WCU"
text="Standalone AR Button"
icon="view_in_ar"
ar-scan-text="Scan this code to view in AR"
ar-close-text="Click anywhere to close">
</power-viewer-ar-button>Specify your wanted integration type “standalone” in this case Retrieve from our platform your company-eid & dedicated SKU you want to display & you’re all set! 🛠️Check out our integration example here
ARGUMENT | TYPE | DESC | INTEGRATION |
id | string | DOM id for your button (for later use) | All |
for | string | viewer id (usefull if you have multiple viewers in one page) | AR offered alongside a viewer but outside the power-viewer |
text | string | button text | All |
icon | string | button icon, could be either image URL or Google material icon code | All |
color | string (color hex) | text color | All |
background-color | string (color hex) | background color | All |
position | string (two words format, ex. "top left") | button position inside the viewer | Inside power-viewer |
standalone-button-id | no value | Offer AR capabilities without POWER 3D Viewer. Is used to identify a AR button & can be used for analytics purposes | standalone |
company-eid | string | get your company-eid from POWER.xyz platform | all |
sku | string | Your product SKU (needs to be setup on POWER Platform) | Inside power-viewer |
standalone-qr-template | string ("modal" or "inline") | "inline" just displays the qrCode at the button location, "modal" displays it on a modal window | standalone |
ar-scan-text | string | Text displayed below the qrCode, call to scan | all |
ar-close-text | string | Text displayed below the qrCode, "click anywhere to close" | all |
The generated HTML is fully accessible via console or javascript and is easy to customize.
Integrated within our 3D viewer
AR can also be proposed to your consumers as part of our 3D viewer 🛠️Checkout our integration example here In order to do so you simple have to use the following (arguments are the same as detailed below) :
<power-viewer id="myViewer"
company-eid="COMPANY_ID"
viewer-eid="COMPANY_ID"
sku="PRODUCT_SKU"
>
<power-viewer-ar-button
position="top right"
text="View in AR"
icon="view_in_ar">
</power-viewer-ar-button>
</power-viewer>Every argument other is optional. However if your button is put outside a power-viewer element, you need to specify the viewer id with for