Skip to main content

Custom Smart Stickers

VideoEditor SDK supports implementation of custom smart stickers which gives you a full control on how sticker is rendered. If input from the user is needed, smart sticker API allows presentation of custom view controller, that you can use to prompt the user to enter needed data.

In this example we will show how you can implement a custom smart sticker that holds the URL that is entered by the user. We will implement LinkSmartSticker and LinkSmartStickerViewController.

Define LinkSmartSticker#

We need to define our LinkSmartSticker here. This class is used to describe how the sticker is rendered. It has access to the metadata that is provided by LinkSmartStickerViewController, which is defined below in this example.

We will create a link sticker that allows us to enter a link that will then be rendered next to an icon in a prettyfied form. Full link that was entered or copied to the prompt will be available in the field metadata on StickerSpriteModel when the sticker is placed so it can be used in a later stage for processing along with other data.

Define sticker properties#

We will define multiple properties that will be used when rendering the sticker. Some are constant and are not changing between variations.

Set sticker prompt#

We need to override prompt with our custom view controller defined below. This view controller will be presented when our LinkSmartSticker is selected in the sticker selection menu. Make sure that you pass the instance of self to the prompt, so the renderer knows what sticker to render.

Implement rendering methods#

There are 2 methods that need to be implemented. First we need to implement size(for metadata: [String: String]? = nil) -> CGSize which will tell the renderer what size is requested based on the given metadata. Then we need to implement draw(with metadata: [String: String]?, context: CGContext, size: CGSize, scale: CGFloat) which is responsible for rendering.

Implement LinkSmartStickerViewController#

Here is the implementation of the LinkSmartStickerViewController which will be shown to enter data. Most of this is our user interface code, but note that there are 2 important methods that need to be called. These are done and cancel. done is used to pass the metadata to the sticker renderer so it can be placed on the canvas, and cancel method is used to dismiss the prompt.

Define variations of LinkSmartSticker#

This class begins by creating a Video object from an image in the app bundle, and then creating an AssetCatalog object with default items. Next, it defines several variations of a LinkSmartSticker object, which is a subclass of SmartSticker that can be used to open a URL when tapped. These variations are defined by different colors for the background box, text, and icon.

Create a StickerCategory with the MultiLinkSmartSticker#

The LinkSmartSticker variations are then added to a MultiImageSticker object, which allows users to switch between the variations by tapping on the sticker on the canvas. The MultiImageSticker is then added to a StickerCategory object, which holds all the stickers that will be available to the user.

Create a Configuration object#

Finally, a Configuration object is created and assigned the AssetCatalog object that was created earlier. This configuration is then passed to a VideoEditViewController object, which is presented to the user. The current class is also set as the delegate of the VideoEditViewController to handle export and cancelation.

Query the URLs#

When the image is exported, we can access the entered metadata from our custom stickers.