Stickers
The PhotoEditor SDK ships with a categorized sticker library whose UI is optimized for exploration and discovery. You can easily leverage the API to complement the library with your custom sticker packages.
Adding custom stickers
You can add custom sticker categories and stickers by passing them using the categories
option
which should follow our Stickers JSON Schema.
If replaceCategories
is set to true, all default categories and stickers are removed. If it is
set to false
, your additional categories and stickers are appended.
const editor = new PhotoEditorSDK.UI.ReactUI({
controlsOptions: {
sticker: {
categories: [
{
name: 'some-category',
label: 'Some Category',
stickers: [
{
name: 'custom-sticker',
label: 'Custom Sticker',
images: {
mediaThumb: {
uri: 'stickers/thumb/customsticker.png',
width: 50,
height: 50
},
mediaBase: {
uri: 'stickers/base/customsticker.png',
width: 400,
height: 400
}
}
}
]
}
],
replaceCategories: true // `categories` replaces all other categories / stickers
}
}
})
Disabling sticker ratio
In order to disable the fixed ratio, set the fixedRatio
option to false
:
const editor = new PhotoEditorSDK.UI.ReactUI({
controlsOptions: {
sticker: {
fixedRatio: false
}
}
})
Providing stickers via an external JSON file
In order to easily manage your stickers via a server, you can make the UI load the stickers from an
external JSON file. Just pass the JSON url using the stickersJSONPath
option. In order to load
stickers from another host, use the JSONP format by adding callback=?
to the path.
The JSON response should follow our Stickers JSON Schema.
If replaceStickers
is set to true, all default stickers are
removed. If it is set to false
, your additional stickers are appended.
const editor = new PhotoEditorSDK.UI.ReactUI({
controlsOptions: {
sticker: {
stickersJSONPath: 'https://www.photoeditorsdk.com/stickers.json?jsoncallback=?', // Treated as JSONP request
replaceStickers: true // `additionalStickers` replaces all other stickers
}
}
})
Specifying the available stickers
Per default, all existing stickers (including your own) are available to the user. To make only
specific stickers available to the user, use the selectableStickers
option.
const editor = new PhotoEditorSDK.UI.ReactUI({
controlsOptions: {
sticker: {
selectableStickers: [
'glasses-sun',
'glasses-nerd',
'custom-sticker'
]
}
}
})
Stickers JSON Schema
In order to correctly use stickers in our UI, you need to follow our Stickers JSON Schema:
{
"version": "1.1",
"categories": [{
"name": "glasses",
"label": "Glasses",
"stickers": [{
"name": "sticker0",
"label": "Brown glasses",
"images": {
"mediaThumb": {
"uri": "https://xxxxxxxxxx",
"width": 100,
"height": 100
},
"mediaMedium": {
"uri": "https://xxxxxxxxxx",
"width": 500,
"height": 500
},
"mediaBase": {
"uri": "https://xxxxxxxxxx",
"width": 2136,
"height": 3216
}
}
}, {
"name": "sticker1",
"label": "Green glasses",
"images": {
"mediaThumb": {
"uri": "https://xxxxxxxxxx",
"width": 100,
"height": 100
},
"mediaMedium": {
"uri": "https://xxxxxxxxxx",
"width": 500,
"height": 500
},
"mediaBase": {
"uri": "https://xxxxxxxxxx",
"width": 2136,
"height": 3216
}
}
}]
}]
}