Creative Kit Web

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 enter https://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

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>

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.

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>

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 the class 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.

Docs

Creative Kit Web

Requirements

Getting Started

Publisher Linking

Testing From a Site Behind an Auth Wall or From localhost

Frequently Asked Questions (FAQ)

Snap Kit

Snap Inc.

Community

Advertising

Legal

Docs

Creative Kit Web

Requirements

Getting Started

Embedding the Share Button

Using the Share Button

Share Sticker

Publisher Linking

Customizing the Share Button

Testing From a Site Behind an Auth Wall or From localhost

Frequently Asked Questions (FAQ)