Creative Kit

Creative Kit lets users send photos or videos created in your app to the Snapchat camera preview. There, they can apply any of Snapchat’s creative tools to a photo or video and send it to friends. They can also add a caption, sticker, and URL attachment to the Snap before sending it to Snapchat.

Users must be logged into Snapchat to use Creative Kit’s features in your app.

iOS

Creative Kit iOS gives you access to four Snapchat camera and creative flows for a range of creativity.

Requirements

Getting started

In your app project in Xcode, add SCSDKCoreKit.framework and SCSDKCreativeKit.framework into General > Embedded Binaries.

Next, add the paths to the added frameworks to Build Settings > Framework Search Paths in your app target.

Then add the following fields in your application’s Info.plist file:

  • SCSDKClientId (string): Your application’s client ID
  • SCSDKRedirectUrl (string): The URL Snapchat will redirect to if there’s an error
  • LSApplicationQueriesSchemes (string-array): Must contain snapchat
  • CFBundleURLSchemes (string-array): Must contain your redirect URL’s scheme — so if your redirect URL is my-app://abc/xy/z, this field must contain my-app

Features

Preparing a photo or video to send to Snapchat

Conditions

  • Images or videos must be JPEG or PNG 15MB or smaller.
  • All resource URLs should be local.

Let users send still photos from your app to Snapchat with the SCSDKPhotoSnapContent interface. For example, if someone wants to brag about game progress by tapping the Snapchat button in your app, you would set snapImage to the current game play screen’s PNG.

// swift

/* Main image content to be used in the Snap */
let snapImage = /* Set your image here */
let photo = SCSDKSnapPhoto(image: snapImage)
let photoContent = SCSDKSnapPhotoContent(snapPhoto: photo)
// objc

/* Main image content to be used in Snap */
UIImage *snapImage = /* Set your image here */;
SCSDKSnapPhoto *photo = [[SCSDKSnapPhoto alloc] initWithImage:snapImage];
SCSDKSnapPhotoContent *photoContent = [[SCSDKSnapPhotoContent alloc] initWithSnapPhoto:photo];

Alternately, you can set the photo using a URL:

// swift

let photo = SCSDKSnapPhoto(imageUrl: snapImageUrl)
// objc

SCSDKSnapPhoto *photo = [[SCSDKSnapPhoto alloc] initWithImageUrl:snapImageUrl];

To send a video, use SCSDKSnapVideoContent instead of SCSDKSnapPhotoContent. For example, if a user wants to send a clip of their game play to friends by tapping the Snap button, you would set the local URL to the video of user’s current game play:

// swift

/* Main image content to be used in Snap */
let videoUrl = /* prepare a local video URL */
let video = SCSDKSnapVideo(videoUrl: videoUrl)
let videoContent = SCSDKSnapVideoContent(snapVideo: video)
// objc

/* Main image content to be used in Snap */
NSURL *videoUrl = /* prepare a local video URL */;
SCSDKSnapVideo *video = [[SCSDKSnapVideo alloc] initWithVideoUrl:videoUrl];
SCSDKSnapVideoContent *videoContent = [[SCSDKSnapVideoContent alloc] initWithSnapVideo:video];

Now that you prepared the visuals in your app for users to Snap, learn how to enhance them in the next section.


Adding captions, stickers, or URL attachments to photos or videos

You can choose to add a caption, sticker, or URL attachment to a set photo or video.

Conditions

  • Only one sticker is allowed.
  • A still sticker must be a PNG 1MB or smaller.
  • An animated sticker must be a GIF or WebP (preferred) 1MB or smaller.
  • Captions are limited to 250 characters.
  • The attachment URL must be a properly formatted URL in string format.

Try the following options for addding a sticker, caption, or URL attachment to a photo:

// swift

/* Sticker to be used in the Snap */
let stickerImage = /* Prepare a sticker image */
let sticker = SCSDKSnapSticker(stickerImage: stickerImage)
/* Alternatively, use a URL instead */
// let sticker = SCSDKSnapSticker(stickerUrl: stickerImageUrl, isAnimated: false)

/* Modeling a Snap using SCSDKPhotoSnapContent */
let snap = SCSDKPhotoSnapContent(snapPhoto: photo)
snap.sticker = sticker /* Optional */
snap.caption = "Snap on Snapchat!" /* Optional */
snap.attachmentUrl = "https://www.snapchat.com" /* Optional */
// objc

/* Sticker to be used in the Snap */
UIImage *stickerImage = /* Prepare a sticker image */;
SCSDKSnapSticker * sticker = [[SCSDKSnapSticker alloc] initWithStickerImage:stickerImage];
/* Alternatively, use a URL instead */
// SCSDKSnapSticker * sticker = [[SCSDKSnapSticker alloc] initWithStickerUrl:stickerImageUrl isAnimated:NO];

/* Modeling a Snap using <SCSDKPhotoSnapContent> */
SCSDKPhotoSnapContent *snap = [[SCSDKPhotoSnapContent alloc] initWithSnapPhoto:photo];
[snap setSticker:sticker]; /* Optional */
[snap setCaption:@"Snap on Snapchat!"]; /* Optional */
[snap setAttachmentUrl:@"https://www.snapchat.com"]; /* Optional */

Adding a sticker, caption, or URL attachment to a video is the same:

// swift

/* Stickers to be used in Snap */
let stickerImage = /* prepare a sticker image */
let sticker = SCSDKSnapSticker(stickerImage: stickerImage)
/* Alternatively, use a URL instead */
// let sticker = SCSDKSnapSticker(stickerUrl: stickerImageUrl, isAnimated: false)

/* Modeling a Snap using SCSDKVideoSnapContent */
let snap = SCSDKVideoSnapContent(snapVideo: video)
snap.sticker = sticker /* Optional */
snap.caption = "Snap on Snapchat!" /* Optional */
snap.attachmentUrl = "https://www.snapchat.com" /* Optional */
// objc

/* Stickers to be used in Snap */
UIImage *stickerImage = /* prepare a sticker image */;
SCSDKSnapSticker * sticker = [[SCSDKSnapSticker alloc] initWithStickerImage:stickerImage];
/* Alternatively, use a URL instead */
// SCSDKSnapSticker * sticker = [[SCSDKSnapSticker alloc] initWithStickerUrl:stickerImageUrl isAnimated:NO];

/* Modeling a Snap using <SCSDKVideoSnapContent>*/
SCSDKVideoSnapContent *snap = [[SCSDKVideoSnapContent alloc] initWithSnapVideo:video];
[snap setSticker:sticker]; /* Optional */
[snap setCaption:@"Snap on Snapchat!"]; /* Optional */
[snap setAttachmentUrl:@"https://www.snapchat.com"]; /* Optional */

By default, the sticker appears in the center of the screen. You can set a default position and size to suggest specific placement, but users can resize and move the sticker around.


Creating on top of photos or videos taken in Snapchat

Another option is to send just a sticker, caption, or an attachment URL to Snapchat and let the user take the Snap they want using Snapchat’s camera.

In this case, when your user taps the Snapchat button, Snapchat launches the camera screen. Your users capture the moment they want with a pre-populated sticker, caption, or attachment URL from your app. To try this option, use the SCSDKNoSnapContent interface:

// swift

/* Stickers to be used in Snap */
let stickerImage = /* Prepare a sticker image */
let sticker = SCSDKSnapSticker(stickerImage: stickerImage)
/* Alternatively, use a URL instead */
// let sticker = SCSDKSnapSticker(stickerUrl: stickerImageUrl, isAnimated: false)

/* Modeling a Snap using SCSDKNoSnapContent */
let snap = SCSDKNoSnapContent()
snap.sticker = sticker /* Optional */
snap.caption = "Snap on Snapchat!" /* Optional */
snap.attachmentUrl = "https://www.snapchat.com" /* Optional */
// objc

/* Stickers to be used in Snap */
UIImage *stickerImage = /* Prepare a sticker image */;
SCSDKSnapSticker * sticker = [[SCSDKSnapSticker alloc] initWithStickerImage:stickerImage];
/* Alternatively, use a URL instead */
// SCSDKSnapSticker * sticker = [[SCSDKSnapSticker alloc] initWithStickerUrl:stickerImageUrl isAnimated:NO];

/* Modeling a Snap using <SCSDKNoSnapContent>*/
SCSDKNoSnapContent *snap = [[SCSDKNoSnapContent alloc] init];
/* At least one property needs to be set */
[snap setSticker:sticker]; /* Optional */
[snap setCaption:@"Snap on Snapchat!"]; /* Optional */
[snap setAttachmentUrl:@"https://www.snapchat.com"]; /* Optional */

Sending your photo, video, or sticker to Snapchat

The final step is connecting to Snapchat. Use the SCSDKSnapAPI interface to let your users start sending their creations to Snapchat:

// swift

let api = SCSDKSnapAPI(content: snap)
api.startSnapping({ (error: Error?) in
/* Do something */
})
// objc

SCSDKSnapAPI *api = [[SCSDKSnapAPI alloc] initWithContent:snap];
[api startSnappingWithCompletionHandler:^(NSError *error) {
/* Do something */
}];

That’s it! You just learned how to integrate the Snapchat experience into your app.

What’s next


Android

Creative Kit Android gives you access to four Snapchat camera and creative flows for a range of creativity.

Requirements

To share any files with Snapchat, your app must target the right Android support library:

  • Android support library 22+

Getting started

We share the Creative Kit and Core Kit AARs from our Maven repository. To access them, add the following to your root project's build.gradle file:

repositories {
   maven {
       url "https://storage.googleapis.com/snap-kit-build/maven"
   }
}

Note: If you have trouble accessing Google (used in the link above), you can use our GitHub Maven repository with the following code block:

repositories {
   maven {
       url "https://raw.githubusercontent.com/Snap-Kit/release-maven/repo"
   }
}

Next, add the following implementation to the dependencies section of your application’s build.gradle file, not the root project’s build.gradle:

dependencies {
   ...
   implementation([
           'com.snapchat.kit.sdk:creative:1.1.4',
           'com.snapchat.kit.sdk:core:1.1.4'
   ])
}

Set up your application’s AndroidManifest.xml:

<application ...>
   <!-- Please put your client id here -->
   <meta-data android:name="com.snapchat.kit.sdk.clientId" android:value="your app’s client id" />

   <!-- See below in the next section for how to setup FileProvider -->
</application>

Set up your FileProvider to share media files to Snapchat.

To share any media or sticker content to Snapchat, follow the protocol specified by FileProvider API. Once you have set this up, your AndroidManifest.xml will contain the following under <application>:

        <provider
            android:authorities="${applicationId}.fileprovider"
            android:name="android.support.v4.content.FileProvider"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/file_paths"
                />
        </provider>

Note: The authority used by the SDK is explicitly <your-package-name>.fileprovider. Please ensure you follow this convention when setting the value. If you have different package names for debug and production builds, the ${applicationId} should resolve to it appropriately.


Features

Preparing a photo or video to send to Snapchat

A Snap with a still image or video is displayed in Snapchat’s preview screen, where the user can make the final modifications before sending it. Similarly, a Snap without any pre-populated content is displayed in Snapchat’s camera screen, letting users create their own content in a regular Snapchat flow. In both cases, your app can add metadata or overlays — like caption text, sticker images, and attachment URLs — to embed with the Snap.

This section explains how to use Creative Kit’s interfaces to let your users send to Snapchat.

Media size and length restrictions

  • Videos and photos must be 15 MB or smaller.
  • Use MP4 for video. For photos, use JPEG or PNG.
  • Videos must be 15 seconds or shorter.

A basic call:

SnapCreativeKitApi snapCreativeKitApi = SnapCreative.getApi(<Your-Activity>);
SnapMediaFactory snapMediaFactory = SnapCreative.getMediaFactory(<Your-Activity>);
snapCreativeKitApi.send(<Your-content>); // See below for examples

How your actual calls will look depends on your content. To provide still images for users to send to Snapchat, specify the photo content:

SnapMediaFactory snapMediaFactory = SnapCreative.getMediaFactory(<Your-Activity>);
SnapPhotoFile photoFile;
try {
   photoFile = snapMediaFactory.getSnapPhotoFromFile(<Your-photo-file>);
} catch (SnapMediaSizeException e) {
   handleError(e);
   return;
}
SnapPhotoContent snapPhotoContent = new SnapPhotoContent(photoFile);
snapCreativeKitApi.send(snapPhotoContent);

To provide videos for your users to send to Snapchat, specify the video content:

SnapMediaFactory snapMediaFactory = SnapCreative.getMediaFactory(<Your-Activity>);
SnapVideoFile videoFile;
try {
   videoFile = snapMediaFactory.getSnapVideoFromFile(<Your-video-file>);
} catch (SnapMediaSizeException|SnapVideoLengthException e) {
   handleError(e);
   return;
}
SnapVideoContent snapVideoContent = new SnapVideoContent(videoFile)
snapCreativeKitApi.send(snapVideoContent);

Or send your users right into the live camera on Snapchat:

SnapLiveCameraContent snapLiveCameraContent = new SnapLiveCameraContent();

Sharing with overlay stickers, caption text, and attachment URLs

You can add sticker overlays, caption text, and attachment URLs to any Snap content type — including when deeplinking to the live camera.

Media size and length restrictions

  • Stickers must be JPEG or PNG 1 MB or smaller.
  • Android currently does not support animated stickers.

For stickers specifically, you can set the size, rotation, and placement position. Here’s an example:

SnapSticker snapSticker = null;
try {
    snapSticker = snapMediaFactory.getSnapStickerFromFile(stickerFile);
} catch (SnapStickerSizeException e) {
    handleError(e);
    return;
}
// Height and width~~ ~~in pixels
snapSticker.setWidth(300);
snapSticker.setHeight(300);

// Position is specified as a ratio between 0 & 1 to place the center of the sticker
snapSticker.setPosX(0.5f);
snapSticker.setPosY(0.5f);

// Specify clockwise rotation desired
snapSticker.setRotationDegreesClockwise(0); // degrees clockwise
<your-snap-content>.setSnapSticker(snapSticker);
// Note: Your snap content can be video, photo, or live-camera content

Provide captions for your users to easily add, letting their friends find your website directly from the Snap. Here’s how to add captions and URLs:

SnapCreativeKitApi snapCreativeKitApi = new SnapCreativeKitApi(<your-activity>, CLIENT_ID);
// Shows up as a caption text on top of the Snap
// User will be able to edit the vertical position in Preview screen
<snapContent>.setCaptionText(<your-caption-text>);

// The viewer of your Snap can swipe up to open this URL
<snapContent>.setAttachmentUrl(<your-website-url>);

snapCreativeKitApi.send(cameraPreviewSnapContent);

That’s it! You just learned how to integrate the Snapchat experience into your app.


Known issues on Android

Animated and WebP stickers are not yet supported.

What’s next