clippyjs

Add Clippy or his friends to any website for instant nostalgia.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
clippyjs
28090.0.36 years ago6 years agoMinified + gzip package size for clippyjs in KB

Readme

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. image

Quick Setup

Browser

Add this code to you to your page to enable Clippy2. ```html ```

NPM / Webpack

Install dependency ```bash yarn add clippyjs # or npm install clippyjs ``` Import and load ```js import clippy from 'clippyjs' clippy.load('Merlin', (agent) => {
// do anything with the loaded agent
agent.show();
}); ```

Actions

All the agent actions are queued and executed by order, so you could stack them. ```javascript // play a given animation agent.play('Searching'); // play a random animation agent.animate(); // get a list of all the animations agent.animations(); // => "MoveLeft", "Congratulate", "Hide", "Pleased", "Acknowledge", ... // Show text balloon agent.speak('When all else fails, bind some paper together. My name is Clippy.'); // move to the given point, use animation if available agent.moveTo(100,100); // gesture at a given point (if gesture animation is available) agent.gestureAt(200,200); // stop the current action in the queue agent.stopCurrent(); // stop all actions in the queue and go back to idle mode agent.stop(); ```

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 /) ```js // Using global config window.CLIPPYCDN = './agents/' // Or using 4rth argument clippy.load('Marline', function() {
// ...
}, undefined, './agents/') ```
Licence
MIT

Special Thanks

the program we used to unpack Clippy and his friends!
  • Microsoft, for creating clippy :)