--- a/src/iconolab/templates/iconolab/detail_image.html	Fri Apr 28 15:55:03 2017 +0200
+++ b/src/iconolab/templates/iconolab/detail_image.html	Tue May 02 13:50:05 2017 +0200
@@ -17,7 +17,7 @@
 
 <div class="annotation-navigator">
   <div class="annotation-navigator-list">
-    <div class="panel panel-default">
+    <div class="panel panel-default" data-intro="Cliquez sur les annotations pour les afficher ou les masquer" data-position="right">
       {% if image.annotations.exists %}
         <annotation-list
           v-bind:annotations="annotations"

--- a/src/iconolab/templates/partials/comment_form.html	Fri Apr 28 15:55:03 2017 +0200
+++ b/src/iconolab/templates/partials/comment_form.html	Tue May 02 13:50:05 2017 +0200
@@ -10,7 +10,7 @@
   <input type="hidden" name="next" value="{{ next }}">
   <input type="hidden" name="reply_to" v-bind:value="replyTo || 0"></input>
 
-  <div class="btn-group-wrapper">
+  <div class="btn-group-wrapper" data-intro="Commentez l'annotation" data-position="top">
     <div data-toggle="buttons"
       class="btn-group btn-group-metacategory"
       v-bind:class="btnGroupClass">

--- a/src_js/iconolab-bundle/package.json	Fri Apr 28 15:55:03 2017 +0200
+++ b/src_js/iconolab-bundle/package.json	Tue May 02 13:50:05 2017 +0200
@@ -18,7 +18,9 @@
     "font-awesome": "^4.6.3",
     "import": "0.0.6",
     "imports-loader": "^0.6.5",
+    "intro.js": "^2.5.0",
     "jquery": "^3.0.0",
+    "js-cookie": "^2.1.4",
     "jsdiff": "^1.1.1",
     "jsondiffpatch": "^0.1.43",
     "loader": "^2.1.1",

--- a/src_js/iconolab-bundle/src/components/editor/AnnotationForm.vue	Fri Apr 28 15:55:03 2017 +0200
+++ b/src_js/iconolab-bundle/src/components/editor/AnnotationForm.vue	Tue May 02 13:50:05 2017 +0200
@@ -1,6 +1,8 @@
 <template>
     <div>
-        <button v-if="annotation && isAuthenticated" @click="readonly = !readonly"
+        <button
+            data-intro="Proposez une nouvelle version" data-position="left"
+            v-if="annotation && isAuthenticated" @click="readonly = !readonly"
             class="btn btn-xs pull-right"
             v-bind:class="{ 'btn-primary': readonly, 'btn-warning': !readonly }">
             <i class="fa fa-edit" v-if="readonly"></i>

--- a/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Fri Apr 28 15:55:03 2017 +0200
+++ b/src_js/iconolab-bundle/src/components/editor/Canvas.vue	Tue May 02 13:50:05 2017 +0200
@@ -61,22 +61,22 @@
         </div>
         <div class="controls" v-show="loaded">
             <div class="controls-left">
-                <button @click="toggleReadonly" type="button" class="btn"
+                <button data-intro="Visualisez toutes les annotations" data-position="top" @click="toggleReadonly" type="button" class="btn"
                     v-bind:class="{ 'active': readonly }"
                     v-show="isAuthenticated">
                     <i class="fa fa-eye"></i>
                 </button>
-                <button @click="toggleReadonly" type="button" class="btn"
+                <button data-intro="Changez de mode" data-position="top" @click="toggleReadonly" type="button" class="btn"
                     v-show="isAuthenticated">
                     <i v-show="readonly" class="fa fa-toggle-on" style="transform: rotate(180deg)"></i>
                     <i v-show="!readonly" class="fa fa-toggle-on"></i>
                 </button>
-                <button @click="setMode('rect')" type="button" class="btn"
+                <button data-intro="Sélectionnez un rectangle" data-position="top" @click="setMode('rect')" type="button" class="btn"
                     v-bind:class="{ 'active': !readonly &amp;&amp; mode === 'rect', 'disabled': readonly }"
                     v-show="isAuthenticated">
                     <svg width="14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g><rect x="352" y="432" width="64" height="48"/><polygon points="416,352 416,96 176,96 176,160 352,160 352,352 160,352 160,32 96,32 96,96 32,96 32,160 96,160 96,416 480,416 480,352"/></g><text x="0" y="527" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Bluetip Design</text><text x="0" y="532" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
                 </button>
-                <button @click="setMode('free')" type="button" class="btn"
+                <button data-intro="Sélectionnez un polygone" data-position="top" @click="setMode('free')" type="button" class="btn"
                     v-bind:class="{ 'active': !readonly &amp;&amp; mode === 'free', 'disabled': readonly }"
                     v-show="isAuthenticated">
                     <svg width="14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 30 30" xml:space="preserve"><g transform="translate(-450 -380)"><g xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M453,395c0,2.209,1.79,4,4,4c1.307,0,2.455-0.635,3.186-1.604l7.121,4.069C467.11,401.938,467,402.456,467,403    c0,2.209,1.79,4,4,4c2.209,0,4-1.791,4-4s-1.791-4-4-4c-1.307,0-2.455,0.635-3.186,1.604l-7.121-4.069    c0.196-0.473,0.307-0.99,0.307-1.534s-0.11-1.062-0.307-1.534l7.121-4.069c0.73,0.969,1.879,1.604,3.186,1.604    c2.209,0,4-1.791,4-4s-1.791-4-4-4c-2.21,0-4,1.791-4,4c0,0.544,0.11,1.062,0.307,1.534l-7.121,4.069    c-0.73-0.969-1.879-1.604-3.186-1.604C454.79,391,453,392.791,453,395z M471,400c1.654,0,3,1.346,3,3s-1.346,3-3,3s-3-1.346-3-3    S469.346,400,471,400z M471,384c1.654,0,3,1.346,3,3s-1.346,3-3,3s-3-1.346-3-3S469.346,384,471,384z M460,395    c0,1.654-1.346,3-3,3s-3-1.346-3-3s1.346-3,3-3S460,393.346,460,395z"/></g></g><text x="0" y="45" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Hea Poh Lin</text><text x="0" y="50" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
@@ -86,6 +86,8 @@
                 </a>
             </div>
             <zoom-thumbnail
+                data-intro="Déplacez vous dans l'image zoomée"
+                data-position="top"
                 class="controls-center"
                 ref="thumbnail"
                 @change="changeViewBox($event)"
@@ -96,7 +98,7 @@
                 v-bind:viewBox="viewBox"
                 v-bind:imageWidth="imageWidth"
                 v-bind:imageHeight="imageHeight"></zoom-thumbnail>
-            <div class="controls-right">
+            <div class="controls-right" data-intro="Zoomez dans l'image" data-position="top">
                 <button @click="zoomOut" type="button" class="btn"
                     v-bind:class="{ disabled: scale === 1 }">
                     <i class="fa fa-minus" aria-hidden="true"></i>
@@ -117,7 +119,9 @@
     import ShapeRect from './ShapeRect.vue'
     import ShapeFree from './ShapeFree.vue'
     import ZoomThumbnail from './ZoomThumbnail.vue'
+    import introJs from 'intro.js'
     import _ from 'lodash'
+    import Cookies from 'js-cookie'
 
     export default {
         props: {
@@ -237,6 +241,23 @@
                     this.readonly = true;
                 }
 
+                const onboarding = Cookies.get('__iconolab_onboarding');
+
+                if (!onboarding) {
+                    setTimeout(() => {
+                        var intro = introJs.introJs();
+                        intro.setOptions({
+                            nextLabel: 'Suivant',
+                            prevLabel: 'Précédent',
+                            skipLabel: 'J\'ai compris',
+                            doneLabel: 'Terminé'
+                        })
+                        intro.onexit(function() {
+                            Cookies.set('__iconolab_onboarding', 'true', { expires: 365 });
+                        })
+                        intro.start()
+                    }, 1000);
+                }
             },
             annotation: function(annotation) {
                 if (this.isAuthenticated) {

--- a/src_js/iconolab-bundle/src/main.scss	Fri Apr 28 15:55:03 2017 +0200
+++ b/src_js/iconolab-bundle/src/main.scss	Tue May 02 13:50:05 2017 +0200
@@ -6,4 +6,6 @@
 $fa-font-path: "font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
 
+@import "~intro.js/introjs";
+
 @import "iconolab";