Docs

Creative Kit Web

Requirements

  • An existing website where you plan to add the share button
  • Snapchat 10.67+

Getting 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

1<html>
2  <head>
3    <meta property="og:site_name" content="Snapchat" />
4    <meta property="og:title" content="The Fastest Way to Share a Moment!" />
5    <!-- The following are optional -->
6    <meta
7      property="snap:sticker"
8      content="https://kit.snapchat.com/ckweb/test/image.png"
9    />
10    <meta property="snap:app_id" content="YOUR_APP_ID_HERE" />
11    <meta property="snap:publisher_id" content="YOUR_PUBLISHER_ID_HERE" />
12  </head>
13
14  <body>
15    <!-- See following sections for more information on parameters -->
16    <div
17      class="snapchat-creative-kit-share"
18      data-theme="dark"
19      data-size="large"
20      data-text="false"
21      data-share-url="https://kit.snapchat.com/"
22    ></div>
23
24    <script>
25      // Load the SDK asynchronously
26      (function (d, s, id) {
27        var js,
28          sjs = d.getElementsByTagName(s)[0];
29        if (d.getElementById(id)) return;
30        js = d.createElement(s);
31        js.id = id;
32        js.src = "https://sdk.snapkit.com/js/v1/create.js";
33        sjs.parentNode.insertBefore(js, sjs);
34      })(document, "script", "snapkit-creative-kit-sdk");
35    </script>
36  </body>
37</html>

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<script>
2  // Load the SDK asynchronously
3  (function (d, s, id) {
4    var js,
5      sjs = d.getElementsByTagName(s)[0];
6    if (d.getElementById(id)) return;
7    js = d.createElement(s);
8    js.id = id;
9    js.src = "https://sdk.snapkit.com/js/v1/create.js";
10    sjs.parentNode.insertBefore(js, sjs);
11  })(document, "script", "snapkit-creative-kit-sdk");
12</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<html>
2  <head>
3    <meta property="og:site_name" content="Snapchat" />
4    <meta property="og:title" content="The fastest way to share a moment!" />
5  </head>
6  <body>
7    <!-- Other Page HTML -->
8
9    <div class="snapchat-creative-kit-share"></div>
10
11    <!-- Other Page HTML -->
12  </body>
13</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. Dark Button

  • 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 size

  • 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. Data text

Putting the two together, here is what the HTML might look like:

1<html>
2  <head>
3    <meta property="og:site_name" content="Snapchat" />
4    <meta property="og:title" content="The Fastest Way to Share a Moment!" />
5  </head>
6  <body>
7    <!-- Other Page HTML -->
8
9    <div class="snapchat-creative-kit-share"></div>
10
11    <!-- Other Page HTML -->
12    <script>
13      // Load the SDK asynchronously
14      (function (d, s, id) {
15        var js,
16          sjs = d.getElementsByTagName(s)[0];
17        if (d.getElementById(id)) return;
18        js = d.createElement(s);
19        js.id = id;
20        js.src = "https://sdk.snapkit.com/js/v1/create.js";
21        sjs.parentNode.insertBefore(js, sjs);
22      })(document, "script", "snapkit-creative-kit-sdk");
23    </script>
24  </body>
25</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 snap:sticker and the public URL pointing to the sticker asset:

1<head>
2  <meta
3    property="snap:sticker"
4    content="https://kit.snapchat.com/ckweb/test/image.png"
5  />
6</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)

Snap Kit App Linking

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:

1<head>
2  <meta property="snap:app_id" content="YOUR_APP_ID_HERE" />
3</head>

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<head>
2  <meta property="snap:publisher_id" content="YOUR_PUBLISHER_ID_HERE" />
3</head>

Customizing the Share Button

You can also use a custom share button, styled according to your taste. To do so:

  1. Implement a <button> or <a> tag, with your custom style but please make sure to follow our design guidelines.
  2. Add snapchat-share-button as a value for the class attribute
  3. 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<button
2  class="class1 class2 snapchat-share-button"
3  data-share-url="https://kit.snapchat.com/"
4>
5  Share on Snapchat
6</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<script>
2  // Load the SDK asynchronously
3  (function (d, s, id) {
4    var js,
5      sjs = d.getElementsByTagName(s)[0];
6    if (d.getElementById(id)) return;
7    js = d.createElement(s);
8    js.id = id;
9    js.src = "https://sdk.snapkit.com/js/v1/create.js";
10    sjs.parentNode.insertBefore(js, sjs);
11  })(document, "script", "snapkit-creative-kit-sdk");
12
13  window.snapKitInit = function () {
14    snap.creativekit.initalizeShareButtons(
15      document.getElementsByClassName("snapchat-share-button")
16    );
17  };
18</script>

Putting the two together, here is what the HTML might look like

1<html>
2  <head>
3    <meta property="og:site_name" content="Snapchat" />
4    <meta property="og:title" content="The Fastest Way to Share a Moment!" />
5  </head>
6
7  <body>
8    <!-- Other Page HTML -->
9
10    <button
11      class="class1 class2 snapchat-share-button"
12      data-share-url="https://kit.snapchat.com/"
13    >
14      Share on Snapchat
15    </button>
16
17    <!-- Other Page HTML -->
18
19    <script>
20      // Load the SDK asynchronously
21      (function (d, s, id) {
22        var js,
23          sjs = d.getElementsByTagName(s)[0];
24        if (d.getElementById(id)) return;
25        js = d.createElement(s);
26        js.id = id;
27        js.src = "https://sdk.snapkit.com/js/v1/create.js";
28        sjs.parentNode.insertBefore(js, sjs);
29      })(document, "script", "snapkit-creative-kit-sdk");
30
31      window.snapKitInit = function () {
32        snap.creativekit.initalizeShareButtons(
33          document.getElementsByClassName("snapchat-share-button")
34        );
35      };
36    </script>
37  </body>
38</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<meta property="og:site_name" content="Snapchat" />
2<meta property="og:title" content="The Fastest Way to Share a Moment!" />
3<!-- The following are optional -->
4<meta property="snap:app_id" content="YOUR SNAP KIT APP ID HERE" />
5<meta property="snap:publisher_id" content="YOUR PUBLISHER ID HERE" />
6<meta property="snap: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:

1<div class="snapchat-creative-kit-share"
2  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 snap: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 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.