This is Trillion AR Widget that allow you to integrate Trillion SDK in your site. For more information please visit https://trillion.jewelry
Using npm:
npm install trillion-widget
Using yarn:
yarn add trillion-widget
First of all get your API key from https://dashboard.trillion.jewelry/integration
Then you need to create an empty div element for widget initialization. For example:
<div id="trillion-widget"></div>
Then, in your js code (don't forget to set your API key):
import {TrillionWidgetApp} from "trillion-widget"
const elem = document.getElementById('trillion-widget')
const trillionWidget = new TrillionWidgetApp()
trillionWidget.init(elem)
trillionWidget.setServiceActivationKey("YOUR_API_KEY_HERE")
trillionWidget.setJewelryID('demo-pendant-ar')
trillionWidget.setJewelryType('necklace')
trillionWidget.refresh()
For typescript:
const elem = document.getElementById('trillion-widget') as HTMLElement
-
trillionWidget#init()
- Create widget on the provided HTML element -
trillionWidget#setServiceActivationKey(KEY)
- Set API key for app -
trillionWidget#refresh()
- reload widget after changing parameters -
trillionWidget#setWidgetMode(mode)
- Set widget mode (basic, ring_carousel, two_hands) -
trillionWidget#getWidgetMode(mode)
- Get current widget mode -
trillionWidget#setJewelryID(sku)
- Set the id(SKU) of the jewelry to load -
trillionWidget#getJewelryID()
- Get the id(SKU) of the uploaded jewelry -
trillionWidget#setCarousel(sku[])
- Set a group of jewelry. If set, the widget shows selector with all elements of the group and ignores jewelry from setJewelryID By default, widget will load first element of the group -
trillionWidget#setCarousel()
- Get a group of jewelry -
trillionWidget#setJewelryType(type)
- Set the jewelry type (earrings, ring, necklace) to load. Deprecated, type will be detected automatically -
trillionWidget#getJewelryType()
- Get the uploaded jewelry type. Deprecated, type will be detected automatically -
trillionWidget#setUsePerformanceCheck(use)
- use performance check -
trillionWidget#getUsePerformanceCheck()
- get performance check -
trillionWidget#setDisableIntro(boolean)
- force disable intro -
trillionWidget#getDisableIntro()
- get disable intro -
trillionWidget#setLanguage(language)
- set language. Availiable languages: 'en', 'kr' -
trillionWidget#getLanguage()
- get language
use this pattern:
unpkg.com/:package@:version/:file
For example:
import {TrillionWidgetApp} from "https://unpkg.com/trillion-widget@0.2.17/build-lib/trillion-widget.js"
This library also provides the React component for widget.
import component:
import { TrillionWidget, JewelryTypeName } from "trillion-widget";
use somewhere in your React application:
function MyComponent() {
return (
<div className="MyComponent">
<TrillionWidget jewelryId={'demo-earrings'} jewelryType={JewelryTypeName.Earrings}/>
</div>
)
}