Skip to content

This web application demonstrates how to implement a guided tour using the Bootstrap Tour Plugin. The tour highlights various elements of the webpage, including the navigation bar, content sections, and a contact form. Each step of the tour provides a pop-up with a title and description, guiding users through different features of the website

Notifications You must be signed in to change notification settings

Mythresh09/website-tour-functionality-using-bootstrap-tour-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 

Repository files navigation

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

<style>
    body {
        font-family: Arial, sans-serif;
        padding: 20px;
    }
    .highlight {
        background-color: #f0f8ff;
        padding: 10px;
        border: 2px solid #007BFF;
    }
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>

Welcome to Our Website

This is a simple website tour using Bootstrap Tour plugin. Click "Start Tour" to begin!

Start Tour
    <hr>

    <h2 id="tourStep1" class="highlight">Step 1: Learn More About Us</h2>
    <p>This section gives you an introduction to our website and our services.</p>

    <h2 id="tourStep2" class="highlight">Step 2: Check Our Features</h2>
    <p>We offer a variety of features designed to help you get the most out of our website.</p>

    <h2 id="tourStep3" class="highlight">Step 3: Contact Us</h2>
    <p>If you have any questions, feel free to reach out via our contact form or customer support.</p>
</div>

<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- Include Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>

<!-- Include Bootstrap Tour JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/js/bootstrap-tour.min.js"></script>

<script>
    // Define the tour
    var tour = new Tour({
        steps: [
            {
                element: "#tourStep1",
                title: "Introduction",
                content: "This is the introduction to our website. Here you can learn more about what we do."
            },
            {
                element: "#tourStep2",
                title: "Features",
                content: "Here are some of the key features that our website offers to help you."
            },
            {
                element: "#tourStep3",
                title: "Contact",
                content: "Need help? Contact us through this section!"
            }
        ]
    });

    // Initialize the tour
    tour.init();

    // Function to start the tour
    function startTour() {
        tour.start();
    }

About

This web application demonstrates how to implement a guided tour using the Bootstrap Tour Plugin. The tour highlights various elements of the webpage, including the navigation bar, content sections, and a contact form. Each step of the tour provides a pop-up with a title and description, guiding users through different features of the website

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors