Clippy
Add Clippy or his friends to any website for instant nostalgia. This project is a fresh rewrite of Clippy.JS in ES6. (Read More)
Demos
Please be patient for first load. It may take some time as agents are loaded one by one.
Quick Setup
Browser
Add this code to you to your page to enable Clippy2.
<!-- Add the stylesheet to the head --> <!-- Add these scripts to the bottom of the page -->
NPM / Webpack
Install dependency
yarn add clippyjs # or npm install clippyjs
Import and load
clippy;
Actions
All the agent actions are queued and executed by order, so you could stack them.
// play a given animationagent; // play a random animationagent; // get a list of all the animationsagent;// => ["MoveLeft", "Congratulate", "Hide", "Pleased", "Acknowledge", ...] // Show text balloonagent; // move to the given point, use animation if availableagent; // gesture at a given point (if gesture animation is available)agent; // stop the current action in the queueagent; // stop all actions in the queue and go back to idle modeagent;
Custom CDN / Agents
By default all agents are being served from GitHub CDN (this repo) in order to customize loading base path,
You can set window.CLIPPY_CDN
or use 4rd argument of load
function it can be absolute URL or relative to script.
(path should end with slash /)
// Using global configwindowCLIPPY_CDN = './agents/' // Or using 4rth argumentclippy
Licence
MIT
Special Thanks
- The Clippy.JS project by Smore
- The awesome Cinnamon Software for developing Double Agent the program we used to unpack Clippy and his friends!
- Microsoft, for creating clippy :)