Creative Kit

Creative Kit lets users to share images or videos from your app to Snapchat camera or preview. An attachment URL, a caption, and a sticker can be added optionally. After the content is shared into Snapchat, users can apply any of Snapchat’s creative tools to edit the shared content before sending it to their friends or stories.

iOS

Requirements

Getting started

Add the following fields in your application’s Info.plist file.

Required:

  • SCSDKClientId (string): Your application’s client ID
  • LSApplicationQueriesSchemes (string-array): Must contain snapchat

Recommended:

  • SCSDKRedirectUrl (string): The URL Snapchat will redirect to if there’s an error
  • 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. This is required if SCSDKRedirectURL is set

Features

Preparing a photo or video to send to Snapchat

Conditions

  • Images must be JPEG or PNG
  • Videos must be MP4 or MOV
  • 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 share game progress they can tap the Snapchat button in your app and 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)
// objective-c

/* 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)
// objective-c

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)
// objective-c

/* 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 or JPEG
  • An animated sticker must be a WebP (preferred) or GIF
  • 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 */
// objective-c

/* 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.sticker = sticker; /* Optional */
snap.caption = "Snap on Snapchat!"; /* Optional */
snap.attachmentUrl = "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 */
// objective-c

/* 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.sticker = sticker; /* Optional */
snap.caption = "Snap on Snapchat!"; /* Optional */
snap.attachmentUrl = "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 */
// objective-c

/* 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];
snap.sticker = sticker; /* Optional */
snap.caption = "Snap on Snapchat!"; /* Optional */
snap.attachmentUrl = "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

var snapAPI: SCSDKSnapAPI?

override func viewDidLoad() {
  super.viewDidLoad()

  snapAPI = SCSDKSnapAPI()  
}

func yourMethodWhereYouShareToSnapchatFromWithCompletion(completionHandler: (Bool, Error?) ->()) {
  // This method makes a user of the global UIPasteboard, and calling the method without synchronization might cause
  // UIPasteboard data to be overwritten, while being read from Snapchat. Either synchronize the method call yourself,
  // or disable user interaction until the share is over.
  view.isUserInteractionEnabled = false
  snapAPI?.startSending(content) { [weak self] (error: Error?) in
    self?.view.isUserInteractionEnabled = true

    // Handle response
  }
}
// objective-c

@implementation YourVC
{
    // Make sure this reference does not get deallocated until share is complete.
    SCSDKSnapAPI *_scSdkSnapApi;
}

...

- (void)viewDidLoad {
  [super viewDidLoad];

  _scSdkSnapApi = [SCSDKSnapAPI new];
}

...

- (void)yourMethodWhereYouShareToSnapchatFromWithCompletion:(void (^)(BOOL success, NSError *error))completion
{
    // This method makes a user of the global UIPasteboard, and calling the method without synchronization might cause
    // UIPasteboard data to be overwritten, while being read from Snapchat. Either synchronize the method call yourself,
    // or disable user interaction until the share is over.
    [self.view setUserInteractionEnabled:NO];

    typeof(self) __weak wSelf = self;
    [_scSdkSnapApi startSendingContent:snap completionHandler:^(NSError *error) {
        [wSelf.view setUserInteractionEnabled:YES];
        /* Handle response */
    }];
}

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

What’s next


Android

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