Zuck.js – a JavaScript library that lets you add stories everywhere

zuck.js tutorial

zuck.js is a robust JavaScript library that helps you share photos, videos and text with your friends in a fashion way. Similar to the Facebook Stories, Facebook Messenger Day, WhatsApp status, Instagram stories and Snapchat stories.

How to use

You can download this git repository or install via npm install zuck.js

Initialize:

Add/update a story:

Remove a story:

Add/remove a story item:

Stories structure example

A JSON example of the stories object:

Alternate call

In your HTML:

Then in your JS:

Tips

  • You can use with autoFullScreen option (disabled by default) to emulate an app on mobile devices.
  • If you use Ionic or some js that uses location.hash, you should always disable the “backNative” option which can mess your navigation.

Limitations

On mobile browsers, video can’t play with audio without a user gesture. So the script tries to play audio only when the user clicks to see the next story. When the story is playing automatically, the video is muted, but an alert is displayed so the user may click to turn the audio on.

Stories links opens in a new window too. This behaviour occurs because most websites are blocked on iframe embedding.

Check Out These Related Articles!

Leave a Comment

Your email address will not be published. Required fields are marked *