API Reference

For Web


First time here? Visit the Snap Kit developer portal to add your application, exchange keys, and get set up with the proper API credentials.

The Web Snap Kit SDK provides an API in Javascript, organized by kit:

  • Bitmoji: Add a Bitmoji sticker tray to your app so users can communicate visually

We recommend trying the getting started guide for Bitmoji Kit to get familiar with each. When you're ready to develop Snap Kit functionality in your app, this document provides the iOS API components.

We hope you’ll find everything you need. Want to keep up?

Bitmoji Kit


snap.bitmojikit

Description

This top-level module provides Bitmoji Kit APIs. Make sure to check out Bitmoji Kit Web Sticker Picker Parameter Definitions below for in-depth parameter explanations.

Methods
mountBitmojiStickerPickerIcons(bitmojiWebPickerIconClass, uiOptions, loginParams, accessToken?);

Mounts the sticker picker UI to the specified HTML div element.

  • Parameters

    • bitmojiWebPickerIconClass: The element class name Bitmoji icons will be mounted on. We use a HTML class value so you can mount the UI in multiple places in your web application.
    • uiOptions: The customizable options for UI styles and interactions.
    • loginParams: Stores the OAuth2 login parameters required to gain access to Bitmoji content.
    • accessToken?: This optional parameter is used manually set the users access token for the server-side web application integration.
  • Example

    var bitmojiWebPickerIconClass =
      'my-bitmoji-stickerpicker-icon-target';
    
    var uiOptions = {
      iconOverride: { size: 60 },
      fontFamily: 'Helvetica Neue',
      locale: 'de-DE',
      onStickerPickCallback:
        function onStickerPickCallback(bitmojiImgURL) {
          console.log(bitmojiImgURL);
        },
      webpickerPosition: 'bottomRight',
    };
    
    var loginParamsObj = {
      clientId: 'your-clientId',
      redirectURI: 'your-redirectURI',
      scopeList: [ // the list of scopes you are approved for
       'user.bitmoji.avatar',
       'user.display_name',
      ],
    };
    
    // mount Bitmoji icon(s)
    snap.bitmojikit.mountBitmojiStickerPickerIcons(
      bitmojiWebPickerIconClass,
      uiOptions,
      loginParamsObj,
    );
unmountBitmojiStickerPickerIcons(bitmojiWebPickerIconClass);

Removes the sticker picker UI from the specified HTML div element.

  • Parameters

    • bitmojiWebPickerIconClass: The element class name Bitmoji icons will be mounted on.
  • Example

      var bitmojiWebPickerIconClass =
        'my-bitmoji-stickerpicker-icon-target';
    
      // unmount Bitmoji icon(s)
      snap.bitmojikit.unmountBitmojiStickerPickerIcons(bitmojiWebPickerIconClass);
setFriendExternalId(externalId, accessToken?);

Method to specify a friend user to feature in Bitmojis. The sticker picker will include Bitmojis co-starring the current user and the provided friend user. The friend will only appear if they have granted the app access to their Bitmoji avatar as well.

  • Parameters

    • externalId: the external ID of the friend user provided by the app
    • accessToken?: This optional parameter is used manually set the users access token for the server-side web application integration.
  • Example

      var externalId = '<friend external ID>';
      snap.bitmojikit.setFriendExternalId(bitmojiWebPickerIconClass);
unsetFriendExternalId();

Method to unset the friend user used in Bitmojis.

  • Example

      snap.bitmojikit.unsetFriendExternalId();

OAuth2 Authorization Code Parameter Definitions

These are the parameters required to successfully implement the OAuth2.0 authorization grant flow to access Snap resources.

ParameterDefinition
client_idThe client ID Snap assigned to your application when you signed up for Snap Kit, the value is a 36 character alphanumeric string.
client_secretThe client secret Snap assigned to your application when you signed up for Snap Kit. The value is a BASE64 URL encoded string.
redirect_uriThe redirect URI that you requested for your application.
scopeA URL safe space-delimited string of OAuth2.0 token scopes. These scope(s) were assigned to your application when you sign up for Snap Kit. These scopes handle what content your application can and cannot access.

As an example, if your application is assigned the OAuth2.0 scopes “https://auth.snapchat.com/oauth2/api/example.abc” and “https://auth.snapchat.com/oauth2/api/example.xyz”. Then your scope value would be: “https%3A%2F%2Fauth.snapchat.com%2Foauth2%2Fapi%2Fexample.abc%20https%3A%2F%2Fauth.snapchat.com%2Foauth2%2Fapi%2Fexample.xyz”
state"state” is a base64 URL encoded string. This value is used by the client to maintain state between the request and callback. The authorization server includes this value when redirecting the user-agent back to the client. The parameter SHOULD be used for preventing cross-site request forgery.
response_typeValue MUST be set to “code”
grant_typePossible values include “authorizationcode” or “refreshtoken”
codeThe authorization code received from the authorization server.
access_tokenThe users access token received from the authorization server. Used to gain access to various user data.
refresh_tokenThe users refresh token received from the authorization server. Will need to be used when refreshing an expiring access_token.
expires_inThe expiry time (in seconds) of the access_token.

Bitmoji Kit Web Sticker Picker Parameter Definitions


These are the parameters required to successfully integrate the Sticker Picker into your web application.

NameTypeDescription
bitmojiWebPickerIconClassstringThe element class name Bitmoji icons will be mounted on. We use a HTML class value so you can mount the UI in multiple places in your web application.
loginParamsObjObjectStores the OAuth2 login parameters required to gain access to Bitmoji content.
loginParamsObj.clientIdstringThe client ID Snap assigned to your application when you signed up for Snap Kit, the value is a 36 character alphanumeric string.

An example client ID would be “1234abcd-blah-7890-foo654321bar”.
loginParamsObj.redirectURIstringThe URL that handles and completes login requests. The value of this URL will be requested by you and most often will route to a part of your web application that has integrated the Bitmoji Sticker Picker UI.

As an example, your test web application (with integrated Sticker Picker UI) is deployed to www.my-test-application.com. An example of a redirectURI value for this case would be “www.my-test-application.com”. You might have also integrated the Sticker Picker UI to your accounts page, which is routed to www.my-test-application.com/accounts. In that scenario, you can specific that your redirectURI is also “www.my-test-application.com/accounts”. Note: RedirectURIs can be any public URL with the HTTPS protocol as long as it is owned by you OR “localhost:<port>” for development purposes. You may specify up to 10 different redirectURI values for your application.
loginParamsObj.scopeListstringThe scope(s) assigned to your application when you sign up for Snap Kit. These scopes handle what content your application can and cannot access.

An example of a scope value is “https://auth.snapchat.com/oauth2/api/user.bitmoji.avatar” which gives your application access to the Sticker Picker library.
loginParamsObj.handleAuthGrantFlowCallback (optional)func()The callback you can specific to handle your own OAuth2 flow.
uiOptionsObjectThe customizable options for UI styles and interactions.
uiOptions.fontFamilystringThis value will override the default CSS font-family property used by the sticker picker UI.

Examples:
- uiOptions: { fontFamily: 'Helvetica' }
- uiOptions: { fontFamily: '"Avenir Next", sans-serif' }

Default:
- uiOptions: { fontFamily: '"Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif' }
uiOptions.iconOverrideObjectThis object will represent all icon related overrides.

Example:
- uiOptions: { iconOverride: { size: 60, style: 'Standard' } }
uiOptions.iconOverride.sizenumberThis value represents the size of the icon in pixels. The default value is 48.
uiOptions.iconOverride.stylestringThis value represents the style of the icon.

Currently there are only two possible values:
1) ‘Standard’ (default value) - This will show https://sdk.bitmoji.com/assets/bitmoji-no-avatar-icon.svg
2) ‘Customizable’ - This will show https://sdk.bitmoji.com/assets/bitmoji-no-avatar-icon-blank.svg
uiOptions.iconOverride.fillColorstringThis value represents the fill color of the ‘Customizable’ icon. This value must be a hex color code.

Example:
- iconOverride: { fillColor: '#000000', style: 'Customizable' }
- iconOverride: { fillColor: '#C0C0C0', style: 'Customizable' }
uiOptions.localestringThis value will override the default locale of the sticker picker UI. The possible locale options are 'ar-AA', 'da-Dk', 'de-DE', 'el-GR', 'en-GB', 'en-US', 'es', 'fi-FI', 'fr-FR', 'id-ID', 'it-IT', 'ja-JP', 'ko-KR', 'nb-NO', 'nl-NL', 'pl-PL', 'pt-BR', 'ro-RO', 'ru-RU', 'sv-SE', 'tr-TR', 'zh-CN', 'zh-TW'.

Examples:
- uiOptions: { locale: 'ja-JP' }

Default:
- uiOptions: { locale: 'en-US' }
uiOptions.onStickerPickCallbackfunc(string)The callback used to handle the response when user clicks on a Bitmoji sticker on the sticker picker UI. When the user clicks on a Bitmoji, the callback will return the URL that can be used to render the image. It is up to you how you want to use this URL.

An example would be to use this URL as the 'SRC' for a HTML tag.
uiOptions.webpickerPositionstringYou can specify this parameter to determine where the sticker picker UI will be positioned relative to the Bitmoji icon.

The six options are 'topRight' (default), 'topLeft', 'topMiddle', 'bottomRight', 'bottomMiddle', and 'bottomLeft'.

Examples:
- uiOptions: { webpickerPosition: 'bottomRight' }

On This Page

Is this page helpful?
Thanks for your feedback!