
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
trillion-widget
Advanced tools
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 elementtrillionWidget#setServiceActivationKey(KEY)
- Set API key for apptrillionWidget#refresh()
- reload widget after changing parameterstrillionWidget#setWidgetMode(mode)
- Set widget mode (basic, ring_carousel, two_hands)trillionWidget#getWidgetMode(mode)
- Get current widget modetrillionWidget#setJewelryID(sku)
- Set the id(SKU) of the jewelry to loadtrillionWidget#getJewelryID()
- Get the id(SKU) of the uploaded jewelrytrillionWidget#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 grouptrillionWidget#getCarousel()
- Get a group of jewelrytrillionWidget#setJewelryType(type)
- Set the jewelry type (earrings, ring, necklace) to load. Deprecated, type will be detected automaticallytrillionWidget#getJewelryType()
- Get the uploaded jewelry type. Deprecated, type will be detected automaticallytrillionWidget#setUsePerformanceCheck(use)
- use performance checktrillionWidget#getUsePerformanceCheck()
- get performance checktrillionWidget#setLanguage(language)
- set language. Available languages: 'en', 'kr', 'ru'trillionWidget#getLanguage()
- get languagetrillionWidget#useExternalUi()
- Hide native UItrillionWidget#getScreenshot()
- Get screenshotSetting up the carousel mode:
trillionWidget.setWidgetMode("ring_carousel") // Enables carousel mode
trillionWidget.setCarousel(["ring-sku-1", "ring-sku-2", "..."]) // Sets the SKUs of rings used
If you want to control switching between carousel items yourself, you can hide the native UI and manually update the currently selected carousel item. For example:
trillionWidget.useExternalUi(true)
trillionWidget.refresh()
customButton1.addEventListener('click', () => {
trillionWidget.updateCarouselItem('ring-sku-1')
})
customButton2.addEventListener('click', () => {
trillionWidget.updateCarouselItem('ring-sku-2')
})
use this pattern:
unpkg.com/:package@:version/:file
For example:
import {TrillionWidgetApp} from "https://sdk.trillion.jewelry/widget/latest/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>
)
}
FAQs
Trillion AR Widget
We found that trillion-widget demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.