Snapchat Creative Kit iOS (Swift) - Image, Video, Sticker Sharing

In this tutorial we will learn how to share media, stickers and other metadata to Snapchat using Creative Kit iOS.

Ok let’s start :)

Step 1: Setup Snap Kit Developer Portal

To get started with Creative Kit, you will need to create an app via Snap Kit Developer Portal and generate a client ID (OAuth2 Client ID).

In order to create an app, you need a Snapchat account. If you don’t have, download Snapchat on your device and create a new account. Make sure to link an email to your account, as it is required to log in to the Snap Kit Developer Portal.

Once you have done, log in to the Snap Kit Developer Portal and click on the highlighted icon to add your organization:

Now time to setup your first app:

Copy Bundle ID from your app and paste it here:

Don’t forget to add Snapchat Username for testing in Staging environment:

Step 2: Setup Project

Copy client ID (OAuth2 Client ID):

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

• SCSDKClientId (string): Client ID(OAuth2 Client ID)
• LSApplicationQueriesSchemes (string-array): snapchat

Step 3: Install CreativeKit SDK

1. Open your Podfile and add

pod 'SnapSDK', :subspecs => ['SCSDKCreativeKit']

2. Run “pod install” command

Step 4: Preparing Media to Share Snapchat

Before writing some code please remember the condition’s below:

• Images must be JPEG or PNG
• Videos must be MP4 or MOV
• Shared media must be 300 MB or smaller
• Videos must be 60 seconds or shorter
• All resource URLs should be local
• Videos that are longer than 10 seconds are split up into multiple Snaps of 10 seconds or less

Now time to write some code :)

1. Import SDK:

import SCSDKCreativeKit

2. Create an instance of SCSDKSnapAPI:

override func viewDidLoad() {
super.viewDidLoad()
snapAPI = SCSDKSnapAPI()
}

3. For Image:

let snapImage = /* Set your image here */
let photo = SCSDKSnapPhoto(image: snapImage)
let content = SCSDKPhotoSnapContent(snapPhoto: photo)

Alternately, you can set the photo using a URL:

let photo = SCSDKSnapPhoto(imageUrl: snapImageUrl)

4. For Video:

let videoUrl = /* prepare a local video URL */
let video = SCSDKSnapVideo(videoUrl: videoUrl)
let content = SCSDKVideoSnapContent(snapVideo: video)

5. For adding Captions, Stickers, or URL Attachments to Photos or Videos:

Before proceed you must consider below 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
• Universal links are not supported

Adding a sticker, caption, or URL attachment to a photo

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 content using SCSDKPhotoSnapContent */
let content = SCSDKPhotoSnapContent(snapPhoto: photo)
content.sticker = sticker /* Optional */
content.caption = "Hello Guys!" /* Optional */
content.attachmentUrl = "https://matrixsolution.xyz/" /* Optional */

Adding a sticker, caption, or URL attachment to a video is the same (Just useSCSDKVideoSnapContent instead of SCSDKPhotoSnapContent)

/* Modeling a content using SCSDKVideoSnapContent */
let content = SCSDKVideoSnapContent(snapVideo: video)

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.

For sending just a sticker, caption, or an attachment URL to Snapchat and let the user to use with snapchat camera

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 content using SCSDKNoSnapContent */
let content = SCSDKNoSnapContent()
content.sticker = sticker /* Optional */
content.caption = "Hello Guys!" /* Optional */
content.attachmentUrl = "https://matrixsolution.xyz/" /* Optional */

6. Send Photo, Video or Sticker to Snapchat for Share:

snapAPI?.startSending(content) { [weak self] (error: Error?) in
// Handle response
}

Conclusion

And finally we are done. Hope this is helpful for you. Thank you so much. Happy coding :)

Source Code

The source code for this demo app is on GitHub as ERSnapchatCreativeKit repository. You can clone and use it.