trillion-viewer v0.40.0
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 valuetrillionViewer.setTryon(true)
- Enables Try-On btn above the modeltrillionViewer.setCustomUrlTryOn('https://your-brand.com/tryon')
- Set the url for Try-On button
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!');
})
Styling
To change background for the loader screen, just call trillionViewer.setBackground('#FF5733')
before .refresh()
method.
To override default css variables, you need to define the external variables in your CSS. For example:
:root {
--font-family-main-external: 'Arial, sans-serif';
--overlay-item-background-external: rgba(50, 50, 50, 0.5);
--overlay-item-color-external: rgba(200, 200, 200, 1);
--primary-external: #FF5733;
--left-pos-external: 75%;
--bottom-pos-external: 30px;
}
Explanation of Variables
--font-family-main-external: Main font family for the application. Defaults to 'Montserrat, Helvetica, sans-serif'
--overlay-item-background-external: Background color for overlay items. Defaults to rgba(0, 0, 0, 0.35) ~light-gray
--overlay-item-color-external: Text color for overlay items. Defaults to rgba(255, 255, 255, 1) ~⬜
--primary-external: Primary color for the background for the error page. Defaults to #222D33 ~⬛
--left-pos-external: Horizontal position for an configurator panel. Defaults to 50%. ~center of the screen
--bottom-pos-external: Vertical position for an configurator panel. Defaults to 20px. ~up to 20px from the bootom
Using CDN to get Trillion Viewer
use this pattern:
unpkg.com/:package@:version/:file
For example:
import {TrillionViewerApp} from "https://sdk.trillion.jewelry/viewer/latest/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>
)
}
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
9 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
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months 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
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
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
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
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
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
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
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
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
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
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
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
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago