Looking for
or
?
We've rebranded!
v5.8
v5.7
v5.6
v5.11
v5.10
v5
v4
API Docs

Stickers

Stickers tool

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
        }
      }
    }]
  }]
}