stickerpack v0.0.1

Stickers for Websites

Only the finest stickers, for your website. Add two lines of HTML or call one function, and folks can stick stuff all over your pages. The stickers stay put when they come back.

Download stickerpack.js

Use some HTML

Two lines. Load the script and drop in the custom element.

index.html 
<script type="module" src="https://stickerpack.stucco.software/stickerpack.js"></script>
<sticker-pack></sticker-pack>

Rather host it yourself? Download stickerpack.js and point the src at your copy.

Attributes

stickers
Space-separated image URLs to add to the pack. Relative URLs are resolved against the page.
no-default-pack
Only offer your own stickers.
slot="trigger"
Put this on a child element to use it instead of the ✦ button.
with options 
<sticker-pack stickers="/stickers/duck.png /stickers/cat.png" no-default-pack>
  <button slot="trigger">Stickers!</button>
</sticker-pack>

Use some JavaScripts

So you sling some code? Make stickers happen where, when, and how you want.

main.js 
import StickerPack from 'stickerpack'

// Mount: adds the ✦ button and loads this page's stickers
const destroy = StickerPack()

// Unmount: removes the button and stickers, but keeps them saved
destroy()

Options

stickers string[]
Image URLs to add to the pack. Default: []
defaultPack boolean
Include the Stucco default pack. Default: true
storage adapter
Where stickers are saved. See below. Default: localStorageAdapter()
trigger Element
Your own button to open the tray. Default: the ✦ button
all the options 
import StickerPack, { localStorageAdapter } from 'stickerpack'

const destroy = StickerPack({
  stickers: ['/stickers/duck.png'],     // added to the default pack
  defaultPack: true,                    // false = only your stickers
  storage: localStorageAdapter(),       // where stickers are saved
  trigger: document.querySelector('#stickers') // your own button
})

One sticker pack per page. Don't get greedy!

svelte 
// In a Svelte component, onMount cleans up for you
onMount(() => StickerPack())

Stick stuff

What your visitors do:

  1. Open Hit the ✦ button to open the sticker tray.
  2. Pick Choose a sticker. It follows your cursor.
  3. Stick Click anywhere on the page. Links won’t fire. Esc cancels.
  4. Peel With the tray open, click a sticker to peel it off.