Docs
Creative Kit Web
Requirements
- An app created on the Snap Kit developer portal
- An existing website where you plan to add the share button
- Snapchat 10.67+
Getting Started
To start using Creative Kit Web you will need to complete the following steps on the Snap Kit developer portal under your app's settings:
Turn the toggle for 'Creative Kit' to ON under the 'Kits' section.
Once turned on, a new section will appear titled 'Whitelisted Attachment URL Domains'
Add the base url of your website to the 'Whitelisted Attachment URL Domains' list. For example, if your article is hosted at
https://www.snapchat.com/article/helloWorld
you need only enterhttps://www.snapchat.com
. Be sure to include the https:// so as to pass URL validation.If you are using multiple testing environments, you will need to add all the base urls to this list like
https://dev.snapchat.com
,https://staging.snapchat.com
Embedding the Share Button
Include our Javascript SDK on your webpage using the following <script>
tag. The script tag will asynchronously load the Javascript SDK, so as to not block the rendering of the rest of the page.
1
2
3
4
5
6
7
8
9
10
11
12
<script>
// Load the SDK asynchronously
(function (d, s, id) {
var js,
sjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "https://sdk.snapkit.com/js/v1/create.js";
sjs.parentNode.insertBefore(js, sjs);
})(document, "script", "snapkit-creative-kit-sdk");
</script>
To add the Snapchat Share button, add a div in your HTML code with the predefined class - snapchat-creative-kit-share
. The class attribute is used over the id attribute to allow multiple share buttons on the same page.
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<meta content="Snapchat" property="og:site_name" />
<meta content="The fastest way to share a moment!" property="og:title" />
</head>
<body>
<!–– Other Page HTML -->
<div class="snapchat-creative-kit-share"></div>
<!-- Other Page HTML -->
</body>
</html>
This div
tag can have the following additional attributes:
data-share-url
: The URL of the attachment to be shared. If not provided, this will default to the address of the page hosting the button (i.e. window.location.href)data-theme
: light/dark. The share button supports two themes - light and dark. By default, the button uses the light theme. In order to use the dark theme, simply set data-theme=”dark” on the div.data-size
: small/large. The share button supports two sizes - a 'small' size (66x20), and a 'large' size (90x28). By default, the button uses the large size. In order to use the small size, simply set data-size=”small” on the div.data-text
: The share button includes our Ghost logo, and a 'Snapchat' label by default. If you would like to hide the text and only show the logo, you can set data-text="false" on the div. This will change the size of the button to 28x28 and 20x20 for the large and small sizes respectively.
Putting the two together, here is what the HTML might look like:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
<meta content="Snapchat" property="og:site_name" />
<meta content="The Fastest Way to Share a Moment!" property="og:title" />
</head>
<body>
<!–– Other Page HTML -->
<div class="snapchat-creative-kit-share"></div>
<!-- Other Page HTML -->
<script>
// Load the SDK asynchronously
(function (d, s, id) {
var js,
sjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "https://sdk.snapkit.com/js/v1/create.js";
sjs.parentNode.insertBefore(js, sjs);
})(document, "script", "snapkit-creative-kit-sdk");
</script>
</body>
</html>
Using the Share Button
There are two different scenarios for the share button - desktop and mobile web
Desktop - If a user on desktop clicks the Snapchat share button, a new window will open with a Snapcode and information about the page. This information is pulled from OG tags - og:title, and og:site_name. The user can scan the Snapcode with the Snapchat camera, and the link will attach the URL to Snapchat.
Mobile Web - If a user on a mobile device taps on the Snapchat share button, one of two things will happen
- Snapchat App Installed - the user will be deep linked into the Snapchat app, and be presented with a modal containing information about the page. This information is pulled from OG tags - og:title, and og:site_name. The modal will also contain prompts to attach the URL to a Snap, or send the URL via chat.
- Snapchat App Not Installed - the user will be prompted to open the App/Play Store to get the Snapchat app.
Share Sticker
Including a sticker in your Snapchat share flow provides context to the shared Snap (branding, description, summary) and provides an opportunity for a call to action (e.g. “Swipe up to read”). In order to include a share sticker, add a meta tag to your html, with the property snapchat:sticker and the public URL pointing to the sticker asset:
1
2
3
4
5
6
<head>
<meta
content="https://kit.snapchat.com/ckweb/test/image.png"
property="snapchat:sticker"
/>
</head>
Sticker assets should be:
- 400 x 400 px
- Transparent background
- Less than 1MB
- For static stickers use PNG (GIF is not supported)
- For Animated stickers use WebP (Gif is not supported)
Publisher Linking
In order to link the Creative Kit Share back to yourself as a Discover Publisher, you can add an additional meta tag to the html. First, obtain your publisher ID from Story Studio. Then, include it in your HTML as follows:
1
2
3
<head>
<meta content="YOUR_PUBLISHER_ID_HERE" property="snapchat:publisher" />
</head>
Customizing the Share Button
You can also use a custom share button, styled according to your taste. To do so:
- Implement a
<button>
or<a>
tag, with your custom style but please make sure to follow our design guidelines. - Add
snapchat-share-button
as a value for theclass
attribute - You can add any of the attributes of the share button like
data-share-url
attribute on the element to specify the URL to be shared.
1
2
3
4
5
6
<button
class="class1 class2 snapchat-share-button"
data-share-url="https://kit.snapchat.com/"
>
Share on Snapchat
</button>
To use a customized share button, you'll need to call our initialize function when you include the Javascript SDK, and pass in all of the buttons on your page with the snapchat-share-button class.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
// Load the SDK asynchronously
(function (d, s, id) {
var js,
sjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "https://sdk.snapkit.com/js/v1/create.js";
sjs.parentNode.insertBefore(js, sjs);
})(document, "script", "snapkit-creative-kit-sdk");
window.snapKitInit = function () {
snap.creativekit.initalizeShareButtons(
document.getElementsByClassName("snapchat-share-button")
);
};
</script>
Putting the two together, here is what the HTML might look like
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html>
<head>
<meta content="Snapchat" property="og:site_name" />
<meta content="The Fastest Way to Share a Moment!" property="og:title" />
</head>
<body>
<!–– Other Page HTML -->
<button
class="class1 class2 snapchat-share-button"
data-share-url="https://kit.snapchat.com/"
>
Share on Snapchat
</button>
<!-- Other Page HTML -->
<script>
// Load the SDK asynchronously
(function (d, s, id) {
var js,
sjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "https://sdk.snapkit.com/js/v1/create.js";
sjs.parentNode.insertBefore(js, sjs);
})(document, "script", "snapkit-creative-kit-sdk");
window.snapKitInit = function () {
snap.creativekit.initalizeShareButtons(
document.getElementsByClassName("snapchat-share-button")
);
};
</script>
</body>
</html>
Testing From a Site Behind an Auth Wall or From localhost
If your staging site or the website where you are testing from is behind an auth wall we will not be able to fetch the data to be shared. In this case, please add the relevant meta tags to the <head>
section of a publicly accessible production website from where our server can fetch the data.
1
2
3
4
5
6
<meta content="Snapchat" property="og:site_name" />
<meta content="The Fastest Way to Share a Moment!" property="og:title" />
<meta content="YOUR PUBLISHER ID HERE" property="snapchat:publisher" />
//optional
<meta content="/public/path/to/your-asset.png" property="snapchat:sticker" />
//optional
Now, add the publicly accessible website to the "Whitelisted Attachment URL Domains" in your settings.
Then point the data-share-url
attribute on the share button to the equivalent page in your production environment.
For example, if you are sharing a page that will serve from localhost:8000/path/to/page and your production environment is hosted at "yourname.com", then add "https://www.yourname.com" to the Whitelisted Attachment URL Domains list in your settings and set your data-share-url as follows:
1
2
<div class="snapchat-creative-kit-share"
data-share-url="https://yourname.com/path/to/page”></div>
You should now be able to test this button from your local environment. Snapchat will retrieve the sticker, title, site name and/or Publisher ID from the meta tags on your production site to inform your share.
Frequently Asked Questions (FAQ)
Is Creative Kit for the Web compatible with the AMP framework?
Yes. It is compatible with AMP (Accelerated Mobile Pages), however since the address of the page hosting the button (i.e. window.location.href) is used as the share url by default, you will have to specify the share url using the data-share-url
attribute and whitelist this non-AMP url in the Developer Portal.
Do you cache assets?
Yes. Assets such as snapchat:sticker, og:title and og:site_name are cached and refreshed every hour.
What should I do when I see the "This URL hasn’t been approved with Snap Kit" error?
This error usually means that there is an error in your settings.
- Check to make sure that your site is listed in the Whitelisted URLs section of the App Portal.
- Check the url in the popup for the query param
attachmenturl
to make sure it is set to the correct webpage. - Ensure that your
data-share-url
attribute is pointing to a publicly accessible page.
Please reach out to Snap Kit Support with any questions or issues you run into.