Tour

Accompany your users with the Haltura API Tour.

Application.

Commencez par utiliser la méthode Tour.run

tour

Tour.run()

Tour.run()

And here we go.

When called, this method launches the Tour. First, pass the first parameter an array of objects.

In our example, we will create a Tour of 3 stages that will be called when the "Run the Tour" button is clicked.
The targeted elements will have a margin of 5px.

We will also define labels for the previous, next and end buttons.

1) My first text

2) My second text

3) My final text

tour

<p id="myTarget_1">1) My first text</p>
<p id="myTarget_2">2) My second text</p>
<p id="myTarget_3">3) My final text</p>
<button type="button" id="btnTour_1">Run the Tour</button>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var buttonTour1 = document.querySelector("#btnTour_1");
    buttonTour1.onclick = function() {
       Tour.run(
           [
               {
                   "id" : "myTarget_1",
                   "title" : "First step!",
                   "text" : "My first text."
               },
               {
                   "id" : "myTarget_2",
                   "title" : "Second step!",
                   "text" : "My second text."
               },
               {
                   "id" : "myTarget_3",
                   "title" : "Final step!",
                   "text" : "My final text."
               },
            ],
            {
                   "margin" : 5,
                   "previous" : "Previous",
                   "next" : "Next",
                   "end" : "Ok"
            }
       );
   }
})
</script>

<p id="myTarget_1">1) My first text</p>
<p id="myTarget_2">2) My second text</p>
<p id="myTarget_3">3) My final text</p>
<button type="button" id="btnTour_1">Run the Tour</button>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var buttonTour1 = document.querySelector("#btnTour_1");
    buttonTour1.onclick = function() {
       Tour.run(
           [
               {
                   "id" : "myTarget_1",
                   "title" : "First step!",
                   "text" : "My first text."
               },
               {
                   "id" : "myTarget_2",
                   "title" : "Second step!",
                   "text" : "My second text."
               },
               {
                   "id" : "myTarget_3",
                   "title" : "Final step!",
                   "text" : "My final text."
               },
            ],
            {
                   "margin" : 5,
                   "previous" : "Previous",
                   "next" : "Next",
                   "end" : "Ok"
            }
       );
   }
})
</script>

1) My first text

2) My second text

3) My final text

tour

<p id="exampleTarget_1">1) My first text</p>
<p id="exampleTarget_2">2) My second text</p>
<p id="exampleTarget_3">3) My final text</p>
<button type="button" id="btnTour_2">Run the Tour</button>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var buttonTour2 = document.querySelector("#btnTour_2");
    buttonTour2.onclick = function() {
       Tour.run(
           [
               {
                   "id" : "exampleTarget_1",
                   "title" : "First step!",
                   "text" : "My first text."
               },
               {
                   "id" : "exampleTarget_2",
                   "title" : "Second step!",
                   "text" : "My second text."
               },
               {
                   "id" : "exampleTarget_3",
                   "title" : "Final step!",
                   "text" : "My final text."
               },
            ],
            {
                   "margin" : 5,
                   "previous" : "Previous",
                   "next" : "Next",
                   "end" : "Ok"
            }
       );
   }
})
</script>

<p id="exampleTarget_1">1) My first text</p>
<p id="exampleTarget_2">2) My second text</p>
<p id="exampleTarget_3">3) My final text</p>
<button type="button" id="btnTour_2">Run the Tour</button>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var buttonTour2 = document.querySelector("#btnTour_2");
    buttonTour2.onclick = function() {
       Tour.run(
           [
               {
                   "id" : "exampleTarget_1",
                   "title" : "First step!",
                   "text" : "My first text."
               },
               {
                   "id" : "exampleTarget_2",
                   "title" : "Second step!",
                   "text" : "My second text."
               },
               {
                   "id" : "exampleTarget_3",
                   "title" : "Final step!",
                   "text" : "My final text."
               },
            ],
            {
                   "margin" : 5,
                   "previous" : "Previous",
                   "next" : "Next",
                   "end" : "Ok"
            }
       );
   }
})
</script>

Methods	Definition
Tour.run(steps, options = {})	Create a tour. steps : [object...] options : object options.margin => Adds margins around the target. options.previous => Define the label of the previous button. options.next => Define the label of the next button. options.end => Define the label of the end button. options.callbackEnd => Define a callback after the end of the Tour. options.callbackClose => Define a callback after closing the Tour. .

Methods

Definition

Tour.run(steps, options = {})

Create a tour.

steps : [object...]
options : object

options.margin => Adds margins around the target.
options.previous => Define the label of the previous button.
options.next => Define the label of the next button.
options.end => Define the label of the end button.
options.callbackEnd => Define a callback after the end of the Tour.
options.callbackClose => Define a callback after closing the Tour.
.