clippyjs

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.

• Simple JSFiddle

• Agents Zoo

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 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 :)