Bootstrap tour links to other pages

Table of Contents Hide

Introduction
Problem with links to other pages
Integration
Code Example
Live Demo
Conclusion

In this article we will see how Bootstrap Tour links to other pages. By the end of this post we will create a multi page application with Bootstrap tour embedded in them.

Introduction

Bootstrap tour is a library which helps in creating website demo. It was first designed to be a supplement of Bootstrap but came out later as a stand alone code. So you can use it with or without bootstrap.

Problem with links to other pages

I got some queries from developers that they are facing problems in linking bootstrap tour to other pages. There could be multiple reasons –

Bootstrap tour might not be loading on other pages.
It’s not initialized at the right place.
Check if you are starting and restarting the tour in the same page. You should not restart if it is already running.

Integration

Let’s quickly check how we can integrate bootstrap tour in our application –

If you are using Bootstrap –

<link href="bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-tour.min.css" rel="stylesheet">


<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-tour.min.js"></script>

If you are not using Bootstrap –

<link href="bootstrap-tour-standalone.min.css" rel="stylesheet">

<script src="jquery.min.js"></script>
<script src="bootstrap-tour-standalone.min.js"></script>

You can download bootstrap tour from here – https://github.com/sorich87/bootstrap-tour/releases

Code Example

In this code example we will create multiple html pages. From one page, bootstrap tour will link to other pages.

This code example will cover many cases like –

Redirects from html pages – firstpage.html to secondpage.html
From html page to permalink – secondpage.html to /home/third/
Pages involving query parameters – /home/third/ to /home/third/?foo=bar

So you will learn all the conditions of bootstrap tour for linking pages.

File 1: Index.html

Let’s create first page – index.html. It will look like this –

bootstrap tour project - index.html — /index.html

We will create two sections – Block 1 and Block 2. And there will be a Restart Demo button.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>First Page</title>

    <!-- Bootstrap tour stylesheet -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/css/bootstrap-tour-standalone.min.css"
    />

    <!-- Jquery -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <!-- Bootstrap tour javascript -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/js/bootstrap-tour-standalone.min.js"></script>
  </head>
  <body>
    <h1>This is First page</h1>

    <div style="overflow: hidden;">
      <div
        id="first-block"
        style="
          width: 100px;
          height: 150px;
          background: #aa4589;
          float: left;
          box-sizing: border-box;
          padding: 20px;
        "
      >
        Block 1
      </div>

      <div
        id="second-block"
        style="
          width: 100px;
          height: 150px;
          background: #89aa89;
          float: left;
          box-sizing: border-box;
          padding: 20px;
        "
      >
        Block 2
      </div>
    </div>

    <div style="margin-top: 30px;">
      <button onclick="restartDemo()">Restart Demo</button>
    </div>

    <script src="/tour.js"></script>
  </body>
</html>

Few points to note here –

We are using cdnjs for bootstrap tour and jquery files.
Not using Bootstrap in this example. So, including stand alone variant of tour.
We will use ids of both the blocks while creating the tour. These ids are – first-block, second-block.
At last, we have included tour.js file which we will create later.

File 2: second.html

Next we will create second.html. Almost same as our index.html but having 1 block. It will look like this –

bootstrap tour project - second.html — /second.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Second Page</title>

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/css/bootstrap-tour-standalone.min.css"
      />

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
      ></script>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/js/bootstrap-tour-standalone.min.js"
      ></script>
  </head>
  <body>
    <h1>This is Second page</h1>

    <div style="overflow: hidden;">
      <div
        id="third-block"
        style="
          width: 100px;
          height: 100px;
          background: #647583;
          box-sizing: border-box;
          padding: 20px;
        "
      >
        Page 2 - Block 3
      </div>
    </div>

    <div style="margin-top: 30px;">
      <button onclick="restartDemo()">Restart Demo</button>
    </div>

    <script src="/tour.js"></script>
  </body>
</html>

File 3: /home/third/index.html

To cover the case of permalinks, we will create two nested directories and an index.html. The structure will look like this –

home
|- third
   |_ index.html
index.html
second.html
tour.js

So, let’s create /home/third/index.html –

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Third Page</title>

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/css/bootstrap-tour-standalone.min.css"

    />

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
    ></script>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/js/bootstrap-tour-standalone.min.js"></script>
  </head>
  <body>
    <h1>This is Third page</h1>

    <div style="overflow: hidden;">
      <div
        id="fourth-block"
        style="
          width: 100px;
          height: 150px;
          background: #ff2342;
          float: left;
          box-sizing: border-box;
          padding: 20px;
        "
      >
        Page 3 - Block 4
      </div>

      <div
        id="fifth-block"
        style="
          width: 100px;
          height: 150px;
          margin-left: 100px;
          background: #34fa43;
          float: left;
          box-sizing: border-box;
          padding: 20px;
        "
      >
        Page 3 - Block 5
      </div>
    </div>

    <div style="margin-top: 30px;">
      <button onclick="restartDemo()">Restart Demo</button>
    </div>

    <script>
      let searchParams = new URLSearchParams(window.location.search);
      let isFooBar = false;
      if (searchParams.has("foo")) {
        if (searchParams.get("foo") == "bar") isFooBar = true;
      }

      $("#fifth-block, #fourth-block").hide();

      if (isFooBar) {
        $("#fifth-block").show();
      } else {
        $("#fourth-block").show();
      }
    </script>

    <script src="/tour.js"></script>
  </body>
</html>

In this file we are using some extra javascript to show fourth-block when there is no query parameter attached. Otherwise we will show fifth-block.

Url, /home/third/ will look like this –

bootstrap tour project - /home/third/ page — /home/third/

And, /home/third/?foo=bar will look like this –

bootstrap tour project - /home/third/?foo=bar page — /home/third/?foo=bar

File 4: tour.js

At last, we will create our tour.js file. This will include all the code required for creating tour which can link multiple pages –

var tour = new Tour({
  steps: [
    {
      element: "#first-block",
      title: "Page1 - Block 1",
      content: "This is block 1. Next is block 2 on this page.",
      path: "/"
    },
    {
      element: "#second-block",
      title: "Page 1 - Block 2",
      content:
        "This is block 2. Next is block 3 on another page. Pressing next will open second page.",
      path: "/",
      onNext: function () {
        document.location.href = "/second.html";
      }
    },
    {
      element: "#third-block",
      title: "Page 2 - Block 3",
      content: "This is block 3. Next page is permalink - /home/third/",
      path: "/second.html",
      onNext: function () {
        document.location.href = "/home/third/";
      }
    },
    {
      element: "#fourth-block",
      title: "Page 3 - Block 4",
      content:
        "This is block 4. Next page is query param - /home/third/?foo=bar",
      path: "/home/third/",
      onNext: function () {
        document.location.href = "/home/third/?foo=bar";
        return new jQuery.Deferred().promise();
      }
    },
    {
      element: "#fifth-block",
      title: "Page 3 - Block 5",
      content: "This is block 5 With foo=bar as query param",
      path: "/home/third/"
    }
  ]
});

// Initialize the tour
tour.init();

// Start the tour
tour.start();

function restartDemo() {
  if (!tour.ended()) tour.end();
  tour.restart();
}

Here is the outcome of this file –

Create new instance of Tour.
Pass steps starting from 1st to last.
Each step will have –
1. Element Property – To pass html element id where you want to show dialog.
2. Title – Title of the dialog.
3. Content – Message of the dialog.
4. Path – Page url on which this step needs to work
Optionally we add onNext to call a function when next button is clicked.
Finally we initialized and started the Tour.
We also created restartDemo() function which could restart all demo.

This is the best article on Bootstrap Tour ♥♥
Click here to Tweet this

Live Demo

Conclusion

In this article we saw that we can use onNext property to redirect pages so that bootstrap tour can make links to other pages. We covered cases for normal html pages, permalinks and query parameters.

No related posts found