trillion-viewer v0.31.2
Trillion Viewer
This is Trillion Viewer that allow you to integrate Trillion SDK in your site. For more information please visit https://trillion.jewelry
Installing
Using npm:
npm install trillion-viewer
Using yarn:
yarn add trillion-viewer
How to use:
First of all get your API key from https://dashboard.trillion.jewelry/integration
Then you need to create an empty div element for viewer initialization. For example:
<div id="trillion-viewer"></div>
Then, in your js code (don't forget to set your API key):
import {TrillionViewerApp} from "trillion-viewer"
const elem = document.getElementById('trillion-viewer')
const trillionViewer = new TrillionViewerApp()
trillionViewer.init(elem)
trillionViewer.setServiceActivationKey("YOUR_API_KEY_HERE")
trillionViewer.setJewelryID('demo-ring')
trillionViewer.refresh()
For typescript:
const elem = document.getElementById('trillion-viewer') as HTMLElement
Instance methods
trillionViewer.init()
- Create viewer on the provided HTML elementtrillionViewer.setServiceActivationKey(KEY)
- Set API key for apptrillionViewer.refresh()
- reload viewer after changing parameterstrillionViewer.setJewelryID(sku)
- Set the id(SKU) of the jewelry to loadtrillionViewer.getJewelryID()
- Get the id(SKU) of the uploaded jewelrytrillionViewer.setStartSize(number)
- Set the start size of the jewelrytrillionViewer.getStartSize()
- Get the start size of the jewelrytrillionViewer.setZoomMin(number)
- Set the minumum zoom valuetrillionViewer.getZoomMin()
- Get the minumum zoom valuetrillionViewer.setZoomMax(number)
- Set the maximum zoom valuetrillionViewer.getZoomMax()
- Get the maximum zoom value
Model configuration methods
Available colors and cuts depends on a model
trillionViewer.configuratorController.changeColor({color: '#f5f5f5', materialName: 'metal'})
change color of material. Available materials names can be retrieved from API in future
trillionViewer.configuratorController.changeCut({name: 'oval', frame: 'oval', band?: 'oval'}, RING_CUTS)
change cut of the stone. RING_CUTS
- all available ring cuts, can be retrieved from API in future
and band
- is optional param, used where band is also changed
trillionViewer.configuratorController.engrave('text to engrave')
change engrave for a model, max length 15 symbols
trillionViewer.configuratorController.changeLetter('A', LETTERS)
change engrave for a model, max length 15 symbols LETTERS
- all available letters, can be retrieved from API in future
Events
'VIEWER_LOADED_EVENT' will be fired when viewer is loaded and ready for any user interactions. Here is an example of subscription to that event
document.addEventListener('VIEWER_LOADED_EVENT', () => {
console.log('Viewer is loaded!');
})
Using CDN to get Trillion Viewer
use this pattern:
unpkg.com/:package@:version/:file
For example:
import {TrillionViewerApp} from "https://unpkg.com/trillion-viewer@0.2.17/build-lib/trillion-viewer.js"
React component
This library also provides the React component for widget.
How to use
import component:
import { TrillionViewer } from "trillion-viewer";
use somewhere in your React application:
function MyComponent() {
return (
<div className="MyComponent">
<TrillionViewer jewelryId={'demo-ring'}/>
</div>
)
}
12 days ago
14 days ago
14 days ago
18 days ago
21 days ago
24 days ago
26 days ago
27 days ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
7 months ago
7 months ago
7 months ago
6 months ago
6 months ago
6 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
11 months ago
8 months ago
11 months ago
8 months ago
11 months ago
7 months ago
11 months ago
10 months ago
10 months ago
10 months ago
10 months ago
12 months ago
12 months ago
11 months ago
8 months ago
11 months ago
8 months ago
10 months ago
11 months ago
7 months ago
10 months ago
7 months ago
10 months ago
7 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
7 months ago
11 months ago
9 months ago
9 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago