Ajouter Clippy l'assistant de Microsoft Office à un site.

Vous vous souvenez de Clippy, Merlin, Rover et Links ? Non ? Il s’agit des petits personnages de l’assistant de Word 98, à qui l’on pouvaient toujours poser une question.  Même s’ils n’étaient pas très performants pour l’aide, c’étaient une présence amusante sur le bureau de l’ordinateur. Si cela ne vous dit toujours rien, jetez un œil sur l’image ci-dessous.

Des informaticiens nostalgiques et passionnés, ont pris sur leur temps libre pour créer une API permettant d’afficher ces petits personnages animés sur un site Web.

Pour installer un de ces 4 personnages voici la démarche :

  • Se rendre sur le site smore.com/clippy-js.
  • Télécharger le dossier zip contenant tous les fichiers. (C’est le plus compliqué)
  • Décompresser les fichiers et allez dans le dossier “build”
  • Uploader les fichiers “clippy.min.js” ,”clippy.css” et éventuellement “jquery.min.js” (ver 7 minimum) sur votre site.
  • Placer ensuite, les codes suivant dans la page comme indiquer.
  • Modifier les liens vers les fichiers clippy.min.js et clippy.css pour qu’ils se chargent correctement.
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- En haut de page -->
<link href="clippy.css" rel="stylesheet" media="all" type="text/css" />

<!-- En bas de page -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="clippy.min_.js"></script>

<!-- script d'initialisation -->
<script type="text/javascript">
clippy.load('Merlin', function(agent) {
agent.show();
});
</script>

Tout ceci est précisé sur le site.
Si tout se passe bien, Links, le petit chat apparaît dans le cadre blanc en de l’article, dans le coin droit. Le personnage peut être déplacé et animé en cliquant dessus.
Pour changer de personnage, il suffit de changer Merlin par un autre personnage (Clippy, Rover, Links) dans le petit code Javascript.

Nostalgie, nostalgie.
J’espère que cette API vous a plus, n’hésitez pas à la partager.

Partager