Stickerpipe-js is a javascript library for easy integration stickers in your project.
JavaScript CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
src
.gitignore
LICENSE
README.md
bower.json
gulpfile.js
package.json

README.md

Table of contents

About

Stickerpipe-js is a stickers SDK for web (JS platform).

Demo

This sample demonstrates how to add stickers to your chat.
If you want to build your own implementation, you can use our public api.

http://demo.stickerpipe.com (Example)
https://github.com/908Inc/stickerpipe-js/tree/gh-pages (Example sources)

Install

Download

Bower

Bower: bower install stickers --save

Options

Name Type Description
elId string Container id where will be render plugin
apiKey string Your api key
enableEmojiTab boolean If you want use emoji tab
enableHistoryTab boolean If you want use history tab
enableStoreTab boolean If you want use store
htmlForEmptyRecent string Insert in empty recent block
storagePrefix string Prefix for local storage
lang string Localization in ISO 2 format ("en", "ru")
userId string User id (hash)
userData object Data of user for statistic
userPremium boolean Flag is user - premium (true / false)
priceB string Price for packs with pricePoint = B
priceC string Price for packs with pricePoint = C
primaryColor string Primary color (HEX)

Methods

  • render([onRender]) - rendering sticker pipe keyboard
  • isSticker(text) - return true if text is sticker
  • parseStickerFromText(text, callback) - parse text and return object to callback, with sticker data (stickerId, url, html) if text is sticker else return null
  • parseEmojiFromText(text) - parse text and return text with replaced emoji to html
  • parseEmojiFromHtml(html) - parse html and return text with replaced html to emoji text
  • open([packName]) - open pack tab or by default - history tab
  • close() - close sticker pipe popover
  • openStore([stickerId]) - open store in modal window
  • closeStore() - close store modal window
  • purchaseSuccess(packName, pricePoint) - call if purchase transaction was successful
  • purchaseFail() - call if purchase transaction was failed
  • getPackMainIcon(packName, callback) - call this method if you need get pack main icon url
  • onUserMessageSent(isSticker) - call this method when a user sent a message (for statistic)

Events

Name description
sp:popover:shown fire on popover was shown
sp:popover:hidden fire on popover was hidden
sp:content:highlight:show fire on getting new content (unseen or when stickers history empty)
sp:content:highlight:hide fire on have not new contend and stickers history not empty

Callbacks

  • onClickSticker(function(stickerCode) {...}, context) - fired when user click on sticker
  • onClickEmoji(function(emoji) {...}, context) - fired when user click on emoji
  • onPurchase(function(packName, packTitle, pricePoint) {...}) - fired when user try purchase content

Usage

Initialize

Demo apiKey: 72921666b5ff8651f374747bfefaf7b2
You can get your own API Key on http://stickerpipe.com to have customized packs set.

html

    <div id="stickerPipe"></div>

js

    var sticker = new Stickers({
    	
    	elId: 'stickerPipe',
    	
    	apiKey: '72921666b5ff8651f374747bfefaf7b2',
    		
    	enableEmojiTab: true,
    	enableHistoryTab: true,
    	enableStoreTab: true,
    	
    	htmlForEmptyRecent: 'You have not submitted any sticker',
    	storagePrefix: 'prefix_',
    	lang: 'en',
    	
    	userId: '<YOUR_USER_ID>',
    	userPremium: false,
    	userData: {
    		age: 20,
    		gender: 'male'
    	},
    	
    	priceB: '0.99 $',
    	priceC: '1.99 $'
    	
    });

Rendering

    sticker.render(function() {
    	// on render callback
    });

Check sticker

    sticker.isSticker('[[1593]]'); // return true
    sticker.isSticker('hello world'); // return false

Parse sticker from text

    sticker.parseStickerFromText('[[1593]]', function(sticker, isAsync) {
    	if (!sticker) {
    		return;
    	}
    	
    	// do something
    	console.log(sticker);
    });

Parse emoji from text

    var emojiHtml = sticker.parseEmojiFromText('😃');
    console.log(emojiHtml);
    
    // return:
    // <img class="emoji" draggable="false" alt="😃" src="http://twemoji.maxcdn.com/72x72/1f603.png">

Parse emoji from html

    var emoji = sticker.parseEmojiFromText('<img class="emoji" draggable="false" alt="😃" src="http://twemoji.maxcdn.com/72x72/1f603.png">');
    console.log(emoji);
    
    // return:
    // 😃

Subscribe on events

    window.addEventListener('sp:popover:shown', function() {
    	// do something ...
    });
    
    // or with jQuery
    
    $(window).on('sp:popover:shown', function() {
    	// do something ...
    });

Subscribe on callback

	stickerpipe.onClickSticker(function(stickerCode) {
		stickerpipe.onUserMessageSent(true);
		
		sendMessage(stickerCode); // your function
	});

Purchase

	stickerpipe.onPurchase(function(packName, packTitle, pricePoint) {
		var result = confirm('Do you want buy pack ' + packTitle + ' ?');

		if (result) {
			// do transaction ...
			stickerpipe.purchaseSuccess(packName, pricePoint);
		} else {
			stickerpipe.purchaseFail();
		}
	});

Get pack main icon

	stickerpipe.getPackMainIcon('pinkgorilla', function(url) {
		// do something
	});

Statistic

To count the number of sendings messages and stickers, you need call an analysts method onUserMessageSent (boolean)

	// when user send message
	stickerpipe.onUserMessageSent(stickerpipe.isSticker(message));

Credits

Stickerpipe

Contact

i@stickerpipe.com

License

Stickerpipe-js is available under the Apache 2 license. See the LICENSE file for more information.