Web Integration
Requirements
- An existing website where you plan to add the share button
- Snapchat 10.67+
Get Started
There is no special setup required to use Creative Kit Web (other than including the share button on your site).
However, you may optionally include your Snap Kit app ID on your site if you have a registered Snap Kit application and want to view share metrics inside the Snap Kit developer portal. See Snap Kit App Linking for more information.
Full Code Example
<html>
<head>
<meta property="og:site_name" content="Snapchat" />
<meta property="og:title" content="The Fastest Way to Share a Moment!" />
<!-- The following are optional -->
<meta
property="snapchat:sticker"
content="https://kit.snapchat.com/ckweb/test/image.png"
/>
<meta property="snapchat:app_id" content="YOUR_APP_ID_HERE" />
<meta property="snapchat:publisher_id" content="YOUR_PUBLISHER_ID_HERE" />
</head>
<body>
<!-- See following sections for more information on parameters -->
<div
class="snapchat-creative-kit-share"
data-theme="dark"
data-size="large"
data-text="false"
data-share-url="https://kit.snapchat.com/"
></div>
<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>
Features
Embed a 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.
<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.
<html>
<head>
<meta property="og:site_name" content="Snapchat" />
<meta property="og:title" content="The fastest way to share a moment!" />
</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:
<html>
<head>
<meta property="og:site_name" content="Snapchat" />
<meta property="og:title" content="The Fastest Way to Share a Moment!" />
</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>
Use 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 a 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:
<head>
<meta
property="snapchat:sticker"
content="https://kit.snapchat.com/ckweb/test/image.png"
/>
</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)
Autogenerated Stickers
In Snapchat versions 11.58+, if you do not pass in an image URL for the snapchat:sticker
property, we will automatically generate a sticker based on the meta tags. To customize the autogenerated sticker, add the following meta tag properties to your html <head />
:
Meta Property | Description | Example |
---|---|---|
<link rel="icon" href="favicon.ico" type="image/x-icon" /> | Favicon | <link rel="icon" href="favicon.ico" type="image/x-icon" /> |
og:title | Title | <meta property="og:title" content="Website Title" /> |
og:image | Thumbnail | <meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" /> |
snapchat:app_id | Optional. Snap Kit Application ID. Attributes share metrics to your Snap Kit Application in the developer portal. See Snap Kit App Linking for more information. | <meta property="snapchat:app_id" content="e5d0fed9-8607-4abc-aa60-3f913dcf22fa" /> |
snapchat:publisher_id | Optional. Snap Kit Publisher ID. Links the share back to your Story Studio publisher account. A link is also attached to your publisher page from the share modal on Snapchat. See Publisher Linking for more information. | <meta property="snapchat:publisher_id" content="5700553057239040" /> |
snapchat:sticker | Sticker 3PA partner wishes to show when a user shares Creative Kit Web link to Snapchat. | <meta property="snapchat:sticker" content="https://kit.snapchat.com/ckweb/test/favicon.png"/> |
snapchat:suppress_sticker | Optional. If present, we will not render any sticker with your Creative Kit Web share on Snapchat. | <meta content=”suppress_sticker”/> |
An example of what the HTML may look like:
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta
property="og:title"
content="Lens Fest 2021: Celebrating the Snap AR Community"
/>
<meta
property="og:image"
content="https://ia.media-imdb.com/images/rock.jpg"
/>
<!-- Optional Properties -->
<meta
property="snapchat:app_id"
content="e5d0fed9-8607-4abc-aa60-3f913dcf22fa"
/>
<meta property="snapchat:publisher_id" content="5700553057239040" />
</head>
Tappable Elements:
- On Android, the whole sticker is tappable.
- On iOS and stickers passed via the
snapchat:sticker
meta tag, only the pill is tappable.
Link to Snap Kit App
In order to link the Creative Kit Share back to your Snap Kit developer account (to see share metrics), you can add an additional meta tag to the html. First, obtain your Snap Kit App ID from the Snap Kit Developer Portal. Then, include it in your HTML as follows:
<head>
<meta property="snapchat:app_id" content="YOUR_APP_ID_HERE" />
</head>
Link to Publisher
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:
<head>
<meta property="snapchat:publisher_id" content="YOUR_PUBLISHER_ID_HERE" />
</head>
Customize 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 brand 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.
<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.
<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
<html>
<head>
<meta property="og:site_name" content="Snapchat" />
<meta property="og:title" content="The Fastest Way to Share a Moment!" />
</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>
Test from a Site Behind an Auth Wall or 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.
<meta property="og:site_name" content="Snapchat" />
<meta property="og:title" content="The Fastest Way to Share a Moment!" />
<!-- The following are optional -->
<meta property="snapchat:app_id" content="YOUR SNAP KIT APP ID HERE" />
<meta property="snapchat:publisher_id" content="YOUR PUBLISHER ID HERE" />
<meta property="snapchat:sticker" content="/public/path/to/your-asset.png" />
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 set "https://www.yourname.com" as the data-share-url
:
<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.
Do you cache assets?
Yes. Assets such as og:title, og:image, snapchat:sticker, snapchat:suppress_sticker, and favicon 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 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.