Onboarding

Vue Bootstrap 5 Onboarding plugin

Onboarding is a guide plugin to show users how to use your website

Responsive Onboarding plugin built with the latest Bootstrap 5 and Vue 3. It is is a guide plugin to show users how to use your website.

Note: Read the API tab to find all available options and advanced customization

Basic example

To initialize Onboarding on your page simply use MDBOnboarding component. Specify steps by giving proper data-mdb-properties with data-mdb-step, data-mdb-index and data-mdb-onboarding-content as required minimum

Card image cap

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

<template>
  <MDBOnboarding
    tag="section"
    class="border p-4 d-flex justify-content-center mb-4"
    startTrigger="#basic-example-starter"
  >
    <MDBContainer>
      <MDBRow center>
        <MDBCol md="3" class="text-center">
          <MDBBtn
            color="danger"
            data-mdb-step
            data-mdb-index="1"
            data-mdb-onboarding-content="This button has just started your"
            data-mdb-placement="right"
            id="basic-example-starter"
          >
            Start onboarding
          </MDBBtn>
        </MDBCol>
      </MDBRow>
      <hr />
      <MDBRow center>
        <MDBCol md="4">
          <MDBCard>
            <MDBCardImg top src="https://mdbootstrap.com/img/Photos/Others/men.jpg" alt="Card image cap" />
            <MDBCardBody text="center">
              <MDBCardTitle
                tag="h4"
                data-mdb-step
                data-mdb-index="2"
                data-mdb-onboarding-content="This is just basic example of initial onboarding options and configurations"
              >
                <strong>John Doe</strong>
              </MDBCardTitle>
              <h6 class="fw-bold indigo-text py-2">Web developer</h6>
              <MDBCardText>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Voluptatibus, ex, recusandae. Facere modi sunt, quod
                quibusdam.
              </MDBCardText>
              <div class="d-flex justify-content-evenly">
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="facebook-f" size="lg" />
                </a>
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="twitter" size="lg" />
                </a>
                <a
                  href="#!"
                  role="button"
                  data-mdb-step
                  data-mdb-index="3"
                  data-mdb-onboarding-content="There is many more options in the examples below"
                >
                  <MDBIcon icon="dribbble" iconStyle="fab" size="lg"/>
                </a>
              </div>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  </MDBOnboarding>
</template>
<script>
  import {
    MDBOnboarding
  } from "mdb-vue-onboarding";
  import {
    MDBContainer,
    MDBRow,
    MDBCol,
    MDBCard,
    MDBCardImg,
    MDBCardTitle,
    MDBCardText,
    MDBCardBody,
    MDBIcon,
    MDBBtn,
  } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBOnboarding,
      MDBContainer,
      MDBRow,
      MDBCol,
      MDBCard,
      MDBCardImg,
      MDBCardTitle,
      MDBCardText,
      MDBCardBody,
      MDBIcon,
      MDBBtn,
    }
  };
</script>
<script setup lang="ts">
  import {
    MDBOnboarding
  } from "mdb-vue-onboarding";
  import {
    MDBContainer,
    MDBRow,
    MDBCol,
    MDBCard,
    MDBCardImg,
    MDBCardTitle,
    MDBCardText,
    MDBCardBody,
    MDBIcon,
    MDBBtn,
  } from "mdb-vue-ui-kit";
</script>

Start options

Autostart

Onboarding can be auto initialized by passing autostart property to the steps container element. User can set amount of time after which Onboarding will be triggered with delay option

Onboarding will start in: 3

Card image cap

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

<template>
  <MDBOnboarding tag="section" autostart :delay="3" class="border p-4 d-flex justify-content-center mb-4">
    <MDBContainer>
      <MDBRow center class="d-flex">
        <MDBCol md="4">
          <MDBCard id="autostart-trigger">
            <MDBCardImg
              top
              src="https://mdbootstrap.com/img/Photos/Others/men.jpg"
              alt="Card image cap"
              data-mdb-step data-mdb-index="1"
              data-mdb-onboarding-content="Example of autostarted onboarding experience" />
            <MDBCardBody text="center">
              <MDBCardTitle
                tag="h4"
                data-mdb-step
                data-mdb-index="2"
                data-mdb-onboarding-content="Pass delay time in seconds to autostart"
              >
                <strong>John Doe</strong>
              </MDBCardTitle>
              <h6 class="fw-bold indigo-text py-2">Web developer</h6>
              <MDBCardText>
                Lorem ipsum dolor sit amet, consectetur adipisicing
                elit. Voluptatibus, ex, recusandae. Facere modi sunt,
                quod quibusdam.
              </MDBCardText>
              <div class="d-flex justify-content-evenly">
                <a href="#!" role="button">
                  <MDBIcon
                    iconStyle="fab"
                    icon="facebook-f"
                    size="lg"
                  />
                </a>
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="twitter" size="lg" />
                </a>
                <a
                  href="#!"
                  role="button"
                  data-mdb-step
                  data-mdb-index="3"
                  data-mdb-onboarding-content="Delay time will also work with other starting options"
                >
                  <MDBIcon icon="dribbble" iconStyle="fab" size="lg"/>
                </a>
              </div>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  </MDBOnboarding>
</template>
<script>
  import {
    MDBOnboarding
  } from "mdb-vue-onboarding";
  import {
    MDBContainer,
    MDBRow,
    MDBCol,
    MDBCard,
    MDBCardImg,
    MDBCardTitle,
    MDBCardText,
    MDBCardBody,
    MDBIcon,
  } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBOnboarding,
      MDBContainer,
      MDBRow,
      MDBCol,
      MDBCard,
      MDBCardImg,
      MDBCardTitle,
      MDBCardText,
      MDBCardBody,
      MDBIcon,
    },
  };
</script>
<script setup lang="ts">
  import {
    MDBOnboarding
  } from "mdb-vue-onboarding";
  import {
    MDBContainer,
    MDBRow,
    MDBCol,
    MDBCard,
    MDBCardImg,
    MDBCardTitle,
    MDBCardText,
    MDBCardBody,
    MDBIcon,
  } from "mdb-vue-ui-kit";
</script>

Event triggered start

Pass to startTrigger selector of element on which user will trigger startEvent to start Onboarding.

Card image cap

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

<template>
  <MDBOnboarding
    tag="section"
    class="border p-4 d-flex justify-content-center mb-4"
    startEvent="mouseover"
    startTrigger="#hover-event-trigger"
  >
    <MDBContainer>
      <MDBRow center>
        <MDBCol md="3" class="text-center">
          <MDBBtn color="danger" id="hover-event-trigger">
            Hover over me to start
          </MDBBtn>
        </MDBCol>
      </MDBRow>
      <hr />
      <MDBRow center class="d-flex">
        <MDBCol md="4">
          <MDBCard id="autostart-trigger">
            <MDBCardImg
              top
              src="https://mdbootstrap.com/img/Photos/Others/men.jpg"
              alt="Card image cap"
              data-mdb-step data-mdb-index="1"
              data-mdb-onboarding-content="You can use events such as 'click' or 'mouseover'" />
            <MDBCardBody text="center">
              <MDBCardTitle
                tag="h4"
                data-mdb-step
                data-mdb-index="2"
                data-mdb-onboarding-content="You can even use 'load' event on a window element!"
              >
                <strong>John Doe</strong>
              </MDBCardTitle>
              <h6 class="fw-bold indigo-text py-2">Web developer</h6>
              <MDBCardText>
                Lorem ipsum dolor sit amet, consectetur adipisicing
                elit. Voluptatibus, ex, recusandae. Facere modi sunt,
                quod quibusdam.
              </MDBCardText>
              <div class="d-flex justify-content-evenly">
                <a href="#!" role="button">
                  <MDBIcon
                    iconStyle="fab"
                    icon="facebook-f"
                    size="lg"
                  />
                </a>
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="twitter" size="lg" />
                </a>
                <a href="#!" role="button">
                  <MDBIcon icon="dribbble" iconStyle="fab" size="lg"/>
                </a>
              </div>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  </MDBOnboarding>
</template>
<script>
  import {
    MDBOnboarding
  } from "mdb-vue-onboarding";
  import {
    MDBContainer,
    MDBRow,
    MDBCol,
    MDBCard,
    MDBCardImg,
    MDBCardTitle,
    MDBCardText,
    MDBCardBody,
    MDBIcon,
    MDBBtn,
  } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBOnboarding,
      MDBContainer,
      MDBRow,
      MDBCol,
      MDBCard,
      MDBCardImg,
      MDBCardTitle,
      MDBCardText,
      MDBCardBody,
      MDBIcon,
      MDBBtn,
    },
  };
</script>
<script setup lang="ts">
  import {
    MDBOnboarding
  } from "mdb-vue-onboarding";
  import {
    MDBContainer,
    MDBRow,
    MDBCol,
    MDBCard,
    MDBCardImg,
    MDBCardTitle,
    MDBCardText,
    MDBCardBody,
    MDBIcon,
    MDBBtn,
  } from "mdb-vue-ui-kit";
</script>

Backdrop options

Global backdrop

Backdrop for every step inside Onboarding can be set via backdrop and backdropOpacity properties

Card image cap

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

<template>
  <MDBOnboarding
    tag="section"
    class="border p-4 d-flex justify-content-center mb-4"
    startTrigger="#global-backdrop-trigger"
    startEvent="click"
    backdrop
    :backdropOpacity="0.5"
  >
    <MDBContainer>
      <MDBRow center>
        <MDBCol md="3" class="text-center">
          <MDBBtn color="danger" id="global-backdrop-trigger">
            Start onboarding
          </MDBBtn>
        </MDBCol>
      </MDBRow>
      <hr />
      <MDBRow center class="d-flex">
        <MDBCol md="4">
          <MDBCard>
            <MDBCardImg
              top
              src="https://mdbootstrap.com/img/Photos/Others/men.jpg"
              alt="Card image cap"
              data-mdb-step data-mdb-index="1"
              data-mdb-onboarding-content="Backdrop is set to false by default" />
            <a>
              <div class="mask rgba-white-slight"></div>
            </a>
            <MDBCardBody text="center">
              <MDBCardTitle
                tag="h6"
                data-mdb-step
                data-mdb-index="2"
                data-mdb-onboarding-content="Backdrop options set in Onboarding container will be passed to each step element inside it"
              >
                <strong>John Doe</strong>
              </MDBCardTitle>
              <h6 class="fw-bold indigo-text py-2">Web developer</h6>
              <MDBCardText>
                Lorem ipsum dolor sit amet, consectetur adipisicing
                elit. Voluptatibus, ex, recusandae. Facere modi sunt,
                quod quibusdam.
              </MDBCardText>
              <div class="d-flex justify-content-evenly">
                <a href="#!" role="button">
                  <MDBIcon
                    iconStyle="fab"
                    icon="facebook-f"
                    size="lg"
                  />
                </a>
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="twitter" size="lg" />
                </a>
                <a
                  href="#!"
                  role="button"
                  data-mdb-step
                  data-mdb-index="3"
                  data-mdb-onboarding-content="If you want to set global backdrop but turn it off for one step use options for individual step from the next example"
                >
                  <MDBIcon iconStyle="fab" icon="dribbble" size="lg"/>
                </a>
              </div>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  </MDBOnboarding>
</template>
<script>
  import {
    MDBOnboarding
  } from "mdb-vue-onboarding";
  import {
    MDBContainer,
    MDBRow,
    MDBCol,
    MDBCard,
    MDBCardImg,
    MDBCardTitle,
    MDBCardText,
    MDBCardBody,
    MDBIcon,
    MDBBtn,
  } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBOnboarding,
      MDBContainer,
      MDBRow,
      MDBCol,
      MDBCard,
      MDBCardImg,
      MDBCardTitle,
      MDBCardText,
      MDBCardBody,
      MDBIcon,
      MDBBtn,
    },
  };
</script>
<script setup lang="ts">
  import {
    MDBOnboarding
  } from "mdb-vue-onboarding";
  import {
    MDBContainer,
    MDBRow,
    MDBCol,
    MDBCard,
    MDBCardImg,
    MDBCardTitle,
    MDBCardText,
    MDBCardBody,
    MDBIcon,
    MDBBtn,
  } from "mdb-vue-ui-kit";
</script>

Individual step backdrop

Indivudal backdrop options can be set with attributes data-mdb-backdrop and data-mdb-backdrop-opacity.

Card image cap

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

<template>
  <MDBOnboarding
    tag="section"
    class="border p-4 d-flex justify-content-center mb-4"
    startEvent="click"
    startTrigger="#individual-backdrop-trigger"
  >
    <MDBContainer>
      <MDBRow center>
        <MDBCol md="3" class="text-center">
          <MDBBtn color="danger" id="individual-backdrop-trigger">
            Start onboarding
          </MDBBtn>
        </MDBCol>
      </MDBRow>
      <hr />
      <MDBRow center class="d-flex">
        <MDBCol md="4">
          <MDBCard>
            <MDBCardImg
              top
              src="https://mdbootstrap.com/img/Photos/Others/men.jpg"
              alt="Card image cap"
              data-mdb-step data-mdb-index="1"
              data-mdb-onboarding-content="Individual step options have higher specificity than global. Setting backdrop to a single step will override its global backdrop options"
              data-mdb-backdrop="true" />
            <a>
              <div class="mask rgba-white-slight"></div>
            </a>
            <MDBCardBody text="center">
              <MDBCardTitle
                tag="h6"
                data-mdb-step
                data-mdb-index="2"
                data-mdb-backdrop="true"
                data-mdb-backdrop-opacity="0.2"
                data-mdb-onboarding-content="This element has backdrop with opacity 0.2"
              >
                <strong>John Doe</strong>
              </MDBCardTitle>
              <h6 class="fw-bold indigo-text py-2">Web developer</h6>
              <MDBCardText>
                Lorem ipsum dolor sit amet, consectetur adipisicing
                elit. Voluptatibus, ex, recusandae. Facere modi sunt,
                quod quibusdam.
              </MDBCardText>
              <div class="d-flex justify-content-evenly">
                <a href="#!" role="button">
                  <MDBIcon
                    iconStyle="fab"
                    icon="facebook-f"
                    size="lg"
                  />
                </a>
                <a
                  href="#!"
                  role="button"
                  data-mdb-step
                  data-mdb-index="3"
                  data-mdb-backdrop="true"
                  data-mdb-backdrop-opacity="0.8"
                  data-mdb-onboarding-content="And this element has backdrop with opacity 0.8"
                >
                  <MDBIcon iconStyle="fab" icon="twitter" size="lg" />
                </a>
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="dribble" size="lg"/>
                </a>
              </div>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  </MDBOnboarding>
</template>
<script>
  import {
    MDBOnboarding
  } from "mdb-vue-onboarding";
  import {
    MDBContainer,
    MDBRow,
    MDBCol,
    MDBCard,
    MDBCardImg,
    MDBCardTitle,
    MDBCardText,
    MDBCardBody,
    MDBIcon,
    MDBBtn,
  } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBOnboarding,
      MDBContainer,
      MDBRow,
      MDBCol,
      MDBCard,
      MDBCardImg,
      MDBCardTitle,
      MDBCardText,
      MDBCardBody,
      MDBIcon,
      MDBBtn,
    },
  };
</script>
<script setup lang="ts">
  import {
    MDBOnboarding
  } from "mdb-vue-onboarding";
  import {
    MDBContainer,
    MDBRow,
    MDBCol,
    MDBCard,
    MDBCardImg,
    MDBCardTitle,
    MDBCardText,
    MDBCardBody,
    MDBIcon,
    MDBBtn,
  } from "mdb-vue-ui-kit";
</script>

Autoplay

Set autoplay and stepsDuration to enable autoplay for every step inside container

Card image cap

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

<template>
  <MDBOnboarding
    tag="section"
    class="border p-4 d-flex justify-content-center mb-4"
    startTrigger="#autoplay-starter"
    startEvent="click"
    autoplay
    :stepsDuration="2"
  >
    <MDBContainer>
      <MDBRow class="justify-content-center">
        <MDBCol md="3" class="text-center">
          <MDBBtn
            color="danger"
            data-mdb-step
            data-mdb-index="1"
            data-mdb-onboarding-content="This step has globally set duration for 2 seconds"
            id="autoplay-starter"
          >
            Start onboarding
          </MDBBtn>
        </MDBCol>
      </MDBRow>
      <hr />
      <MDBRow class="d-flex justify-content-center">
        <MDBCol md="4">
          <MDBCard>
            <MDBCardImg top src="https://mdbootstrap.com/img/Photos/Others/men.jpg" alt="Card image cap" />
            <a>
              <div class="mask rgba-white-slight"></div>
            </a>
            <MDBCardBody text="center">
              <MDBCardTitle
                tag="h4"
                data-mdb-step
                data-mdb-index="2"
                data-mdb-duration="4"
                data-mdb-onboarding-content="This step has overriden duration with data-mdb-duration property set to 4 seconds"
              >
                <strong>John Doe</strong>
              </MDBCardTitle>
              <h6 class="fw-bold indigo-text py-2">Web developer</h6>
              <MDBCardText
                data-mdb-step
                data-mdb-index="3"
                data-mdb-autoplay="false"
                data-mdb-onboarding-content="This step has data-mdb-autoplay indivudally set to  false. Click next or use arrow to open next step"
              >
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Voluptatibus, ex, recusandae. Facere modi sunt, quod
                quibusdam.
              </MDBCardText>
              <div class="d-flex justify-content-evenly">
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="facebook-f" size="lg" />
                </a>
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="twitter" size="lg" />
                </a>
                <a
                  href="#!"
                  role="button"
                  data-mdb-step
                  data-mdb-index="4"
                  data-mdb-duration="5"
                  data-mdb-onboarding-content="This step will automatically close after 5 seconds"
                >
                  <MDBIcon iconStyle="fab" icon="dribbble" size="lg"/>
                </a>
              </div>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  </MDBOnboarding>
</template>
<script>
  import {
    MDBOnboarding
  } from "mdb-vue-onboarding";
  import {
    MDBContainer,
    MDBRow,
    MDBCol,
    MDBCard,
    MDBCardImg,
    MDBCardTitle,
    MDBCardText,
    MDBCardBody,
    MDBIcon,
    MDBBtn,
  } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBOnboarding,
      MDBContainer,
      MDBRow,
      MDBCol,
      MDBCard,
      MDBCardImg,
      MDBCardTitle,
      MDBCardText,
      MDBCardBody,
      MDBIcon,
      MDBBtn,
    },
  };
</script>
<script setup lang="ts">
  import {
    MDBOnboarding
  } from "mdb-vue-onboarding";
  import {
    MDBContainer,
    MDBRow,
    MDBCol,
    MDBCard,
    MDBCardImg,
    MDBCardTitle,
    MDBCardText,
    MDBCardBody,
    MDBIcon,
    MDBBtn,
  } from "mdb-vue-ui-kit";
</script>

Autoscroll

Toggle auto scrolling into element that is outside the view with autoscroll property.

Scroll from this
... to that 
<template>
  <MDBOnboarding
    tag="section"
    class="border p-4 d-flex justify-content-center mb-4"
    startTrigger="#autoscroll-starter"
    startEvent="click"
    autoscroll
    backdrop
  >
    <MDBContainer>
      <MDBRow class="justify-content-center">
        <MDBCol md="3" class="text-center">
          <MDBBtn color="danger" id="autoscroll-starter">Start onboarding</MDBBtn>
        </MDBCol>
      </MDBRow>
      <hr />
      <MDBRow class="d-flex justify-content-center">
        <MDBRow class="d-flex justify-content-center">
          <div
            style="margin-bottom: 150vh"
            data-mdb-step data-mdb-index="1"
            data-mdb-onboarding-content="Autoscroll is set to true by default"
          >
            Scroll from this
          </div>
          <div
            data-mdb-step data-mdb-index="2"
            data-mdb-onboarding-content='To disable it for single step use data-mdb-autoscroll="false" property on that element'
          >
            ... to that
          </div>
        </MDBRow>
      </MDBRow>
    </MDBContainer>
  </MDBOnboarding>
</template>
<script>
  import {
    MDBOnboarding
  } from "mdb-vue-onboarding";
  import {
    MDBContainer,
    MDBRow,
    MDBCol,
    MDBBtn,
  } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBOnboarding,
      MDBContainer,
      MDBRow,
      MDBCol,
      MDBBtn,
    },
  };
</script>
<script setup lang="ts">
  import {
    MDBOnboarding
  } from "mdb-vue-onboarding";
  import {
    MDBContainer,
    MDBRow,
    MDBCol,
    MDBBtn,
  } from "mdb-vue-ui-kit";
</script>
<style>
  .custom-popover {
    border: 1px solid red;
  }
</style>

Popover customization

Buttons and labels customization

You can change buttons styles and labels inside step popover via proper properties. For more info visit API section

Card image cap

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

<template>
  <MDBOnboarding
    tag="section"
    class="border p-4 d-flex justify-content-center mb-4"
    startTrigger="#button-customization-starter"
    startEvent="click"
    backdrop
    :backdropOpacity="0.5"
    nextLabel="Right"
    prevLabel="Left"
    skipLabel="End"
    finishLabel="Close"
  >
    <MDBContainer>
      <MDBRow class="justify-content-center">
        <MDBCol md="3" class="text-center">
          <MDBBtn color="danger" id="button-customization-starter">
            Start onboarding
          </MDBBtn>
        </MDBCol>
      </MDBRow>
      <hr />
      <MDBRow class="d-flex justify-content-center">
        <MDBCol md="4">
          <MDBCard>
            <MDBCardImg
              top
              src="https://mdbootstrap.com/img/Photos/Others/men.jpg" alt="Card image cap"
              data-mdb-step data-mdb-index="1"
              data-mdb-onboarding-content="Globally changed button labels" />
            <a>
            <div class="mask rgba-white-slight"></div>
          </a>
            <MDBCardBody text="center">
              <MDBCardTitle
                tag="h4"
                data-mdb-step data-mdb-index="2"
                data-mdb-duration="6"
                data-mdb-pause-label="Stop"
                data-mdb-resume-label="Start"
                data-mdb-onboarding-content="Locally changed control labels"
              >
                <strong>John Doe</strong>
              </MDBCardTitle>
              <h6 class="fw-bold indigo-text py-2">Web developer</h6>
              <MDBCardText>
                Lorem ipsum dolor sit amet, consectetur adipisicing
                elit. Voluptatibus, ex, recusandae. Facere modi sunt,
                quod quibusdam.
              </MDBCardText>
              <div class="d-flex justify-content-evenly">
                <a
                  href="#!"
                  role="button"
                  data-mdb-step
                  data-mdb-index="3"
                  data-mdb-next-label='<i class="fas fa-arrow-right" style="pointer-events: none"></i>'
                  data-mdb-prev-label='<i class="fas fa-arrow-left" style="pointer-events: none"></i>'
                  data-mdb-onboarding-content="You can even use our icons inside button labels!"
                >
                  <MDBIcon iconStyle="fab" icon="facebook" size="lg" />
                </a>
                  <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="twitter" size="lg" />
                </a>
                <a
                  href="#!"
                  role="button"
                  data-mdb-step
                  data-mdb-index="4"
                  data-mdb-next-label='<i class="fas fa-arrow-right" style="pointer-events: none"></i>'
                  data-mdb-prev-label='<i class="fas fa-arrow-left" style="pointer-events: none"></i>'
                  data-mdb-finish-label='<i class="fas fa-times" style="pointer-events: none"></i>'
                  data-mdb-btn-main="btn-outline-primary btn-rounded"
                  data-mdb-btn-close="btn-outline-warning btn-rounded"
                  data-mdb-onboarding-content="And add different button classes!"
                >
                  <MDBIcon iconStyle="fab" icon="dribbble" size="lg"/>
                </a>
              </div>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  </MDBOnboarding>
</template>
<script>
  import {
    MDBOnboarding
  } from "mdb-vue-onboarding";
  import {
    MDBContainer,
    MDBRow,
    MDBCol,
    MDBCard,
    MDBCardImg,
    MDBCardTitle,
    MDBCardText,
    MDBCardBody,
    MDBIcon,
    MDBBtn,
  } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBOnboarding,
      MDBContainer,
      MDBRow,
      MDBCol,
      MDBCard,
      MDBCardImg,
      MDBCardTitle,
      MDBCardText,
      MDBCardBody,
      MDBIcon,
      MDBBtn,
    },
  };
</script>
<script setup lang="ts">
  import {
    MDBOnboarding
  } from "mdb-vue-onboarding";
  import {
    MDBContainer,
    MDBRow,
    MDBCol,
    MDBCard,
    MDBCardImg,
    MDBCardTitle,
    MDBCardText,
    MDBCardBody,
    MDBIcon,
    MDBBtn,
  } from "mdb-vue-ui-kit";
</script>

Popover class

Add custom class for popovers by setting customClass property and style it in your css sheet.

Card image cap

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

<template>
  <MDBOnboarding
    tag="section"
    class="border p-4 d-flex justify-content-center mb-4"
    startEvent="click"
    startTrigger="#popover-class-starter"
    customClass="custom-popover"
  >
    <MDBContainer>
      <MDBRow class="justify-content-center">
        <MDBCol md="3" class="text-center">
          <MDBBtn color="danger" id="popover-class-starter">Start onboarding</MDBBtn>
        </MDBCol>
      </MDBRow>
      <hr />
      <MDBRow class="d-flex justify-content-center">
        <MDBCol md="4" class="col-md-4">
          <MDBCard>
            <MDBCardImg
              top
              src="https://mdbootstrap.com/img/Photos/Others/men.jpg"
              alt="Card image cap"
              data-mdb-step data-mdb-index="1"
              data-mdb-onboarding-content="Border added with custom class" />
            <a>
            <div class="mask rgba-white-slight"></div>
          </a>
            <MDBCardBody text="center">
              <MDBCardTitle
                tag="h4"
                data-mdb-step
                data-mdb-index="2"
                data-mdb-onboarding-content="Class change is set globally for all steps inside Onboarding container"
              >
                <strong>John Doe</strong>
              </MDBCardTitle>
              <h6 class="fw-bold indigo-text py-2">Web developer</h6>
              <MDBCardText>
                Lorem ipsum dolor sit amet, consectetur adipisicing
                elit. Voluptatibus, ex, recusandae. Facere modi sunt,
                quod quibusdam.
              </MDBCardText>
              <div class="d-flex justify-content-evenly">
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="facebook" size="lg" />
                </a>
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="twitter" size="lg" />
                </a>
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="dribbble" size="lg" />
                </a>
              </div>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  </MDBOnboarding>
</template>
<script>
  import {
    MDBOnboarding
  } from "mdb-vue-onboarding";
  import {
    MDBContainer,
    MDBRow,
    MDBCol,
    MDBCard,
    MDBCardImg,
    MDBCardTitle,
    MDBCardText,
    MDBCardBody,
    MDBIcon,
    MDBBtn,
  } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBOnboarding,
      MDBContainer,
      MDBRow,
      MDBCol,
      MDBCard,
      MDBCardImg,
      MDBCardTitle,
      MDBCardText,
      MDBCardBody,
      MDBIcon,
      MDBBtn,
    },
  };
</script>
<script setup lang="ts">
  import {
    MDBOnboarding
  } from "mdb-vue-onboarding";
  import {
    MDBContainer,
    MDBRow,
    MDBCol,
    MDBCard,
    MDBCardImg,
    MDBCardTitle,
    MDBCardText,
    MDBCardBody,
    MDBIcon,
    MDBBtn,
  } from "mdb-vue-ui-kit";
</script>

Container example

Card image cap

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Card image cap

Kate Smith

Graphic designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Card image cap

Natalie Code

Backend developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Gallery

Card image cap
Card image cap
Card image cap
Card image cap
Card image cap
Card image cap
Card image cap

John Doe

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Card image cap

Kate Smith

Graphic designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

Card image cap

Natalie Code

Backend developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam. 

<template>
  <MDBOnboarding
    tag="section"
    class="border p-4 d-flex justify-content-center mb-4"
    style="max-height: 120vh; overflow-y: auto"
    startTrigger="#container-starter"
    startEvent="click"
  >
    <MDBContainer>
      <MDBRow class="justify-content-center">
        <MDBCol md="3" class="text-center">
          <MDBBtn
            color="danger"
            data-mdb-step
            data-mdb-index="1"
            data-mdb-onboarding-content="Onboarding inside containers works similarly to standard Onboarding tour"
            data-mdb-target="start-demo"
            data-mdb-backdrop="true"
            id="container-starter"
          >
            Watch Demo
            <MDBIcon icon="eye" />
          </MDBBtn>
        </MDBCol>
      </MDBRow>
      <hr />
      <MDBRow class="my-4">
        <MDBCol md="4">
          <MDBCard>
            <MDBCardImg top src="https://mdbootstrap.com/img/Photos/Others/men.jpg" alt="Card image cap" />
            <a>
              <div class="mask rgba-white-slight"></div>
            </a>
            <MDBCardBody text="center">
              <MDBCardTitle tag="h4"><strong>John Doe</strong></MDBCardTitle>
              <h6 class="fw-bold indigo-text py-2">Web developer</h6>
              <MDBCardText>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Voluptatibus, ex, recusandae. Facere modi sunt, quod
                quibusdam.
              </MDBCardText>
              <div class="d-flex justify-content-evenly">
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="facebook" size="lg" />
                </a>
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="twitter" size="lg" />
                </a>
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="dribbble" size="lg" />
                </a>
              </div>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
        <MDBCol md="4">
          <MDBCard>
            <MDBCardImg top src="https://mdbootstrap.com/img/Photos/Others/men.jpg" alt="Card image cap" />
            <a>
              <div class="mask rgba-white-slight"></div>
            </a>
            <MDBCardBody text="center">
              <MDBCardTitle tag="h4"><strong>Kate Smith</strong></MDBCardTitle>
              <h6 class="fw-bold indigo-text py-2">Graphic designer</h6>
              <MDBCardText>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Voluptatibus, ex, recusandae. Facere modi sunt, quod
                quibusdam.
              </MDBCardText>
              <div class="d-flex justify-content-evenly">
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="facebook" size="lg" />
                </a>
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="twitter" size="lg" />
                </a>
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="dribbble" size="lg" />
                </a>
              </div>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
        <MDBCol md="4">
          <MDBCard>
            <MDBCardImg top src="https://mdbootstrap.com/img/Photos/Others/men.jpg" alt="Card image cap" />
            <a>
              <div class="mask rgba-white-slight"></div>
            </a>
            <MDBCardBody text="center">
              <MDBCardTitle tag="h4"><strong>Natalie Code</strong></MDBCardTitle>
              <h6 class="fw-bold indigo-text py-2">Backend developer</h6>
              <MDBCardText>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Voluptatibus, ex, recusandae. Facere modi sunt, quod
                quibusdam.
              </MDBCardText>
              <div class="d-flex justify-content-evenly">
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="dribbble" size="lg" />
                </a>
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="dribbble" size="lg" />
                </a>
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="dribbble" size="lg" />
                </a>
              </div>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
      </MDBRow>
      <hr />
      <h4
        class="my-4 text-center"
        data-mdb-step
        data-mdb-index="3"
        data-mdb-onboarding-content="Auto scroll works too. It will even scroll window if container is bigger than it"
        data-mdb-target="step-3"
        data-mdb-backdrop="true"
      >
        Gallery
      </h4>
      <MDBRow
        data-mdb-step
        data-mdb-index="4"
        data-mdb-onboarding-content="And custom buttons also works"
        data-mdb-target="step-4"
        data-mdb-backdrop="true"
        data-mdb-next-label='<i class="fas fa-chevron-right"></i>'
      >
        <MDBRow class="my-3">
          <MDBCol mb="3" md="4">
            <img
              class="img-fluid"
              src="https://mdbootstrap.com/img/Photos/Vertical/mountain2.jpg"
              alt="Card image cap" />
          </MDBCol>
          <MDBCol mb="3" md="4">
            <img
              class="img-fluid"
              src="https://mdbootstrap.com/img/Photos/Vertical/mountain1.jpg"
              alt="Card image cap" />
          </MDBCol>
          <MDBCol mb="3" md="4">
            <img
              class="img-fluid"
              src="https://mdbootstrap.com/img/Photos/Vertical/mountain2.jpg"
              alt="Card image cap" />
          </MDBCol>
        </MDBRow>
        <MDBRow class="my-3">
          <MDBCol
            mb="3"
            md="4"
            data-mdb-step
            data-mdb-index="2"
            data-mdb-duration="5"
            data-mdb-onboarding-content="You can pause and resume each step. This one will close after 5 seconds"
            data-mdb-target="step-2"
            data-mdb-backdrop="true"
          >
            <img
              class="img-fluid"
              src="https://mdbootstrap.com/img/Photos/Vertical/mountain3.jpg"
              alt="Card image cap" />
          </MDBCol>
          <MDBCol mb="3" md="4">
            <img
              class="img-fluid"
              src="https://mdbootstrap.com/img/Photos/Vertical/mountain1.jpg"
              alt="Card image cap" />
          </MDBCol>
          <MDBCol mb="3" md="4">
            <img
              class="img-fluid"
              src="https://mdbootstrap.com/img/Photos/Vertical/mountain3.jpg"
              alt="Card image cap" />
          </MDBCol>
        </MDBRow>
      </MDBRow>
      <MDBRow
        class="my-4"
        data-mdb-step
        data-mdb-index="5"
        data-mdb-onboarding-content='Thank you for Onboarding experience with <img src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.png" style="align-self-center">'
        data-mdb-target="step-5"
        data-mdb-backdrop="true"
      >
        <MDBCol md="4">
          <MDBCard>
            <MDBCardImg top src="https://mdbootstrap.com/img/Photos/Others/men.jpg" alt="Card image cap" />
            <a>
              <div class="mask rgba-white-slight"></div>
            </a>
            <MDBCardBody text="center">
              <MDBCardTitle tag="h4"><strong>John Doe</strong></MDBCardTitle>
              <h6 class="fw-bold indigo-text py-2">Web developer</h6>
              <MDBCardText>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Voluptatibus, ex, recusandae. Facere modi sunt, quod
                quibusdam.
              </MDBCardText>
              <div class="d-flex justify-content-evenly">
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="dribbble" size="lg" />
                </a>
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="dribbble" size="lg" />
                </a>
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="dribbble" size="lg" />
                </a>
              </div>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
        <MDBCol md="4">
          <MDBCard>
            <MDBCardImg top src="https://mdbootstrap.com/img/Photos/Others/men.jpg" alt="Card image cap" />
            <a>
              <div class="mask rgba-white-slight"></div>
            </a>
            <MDBCardBody text="center">
              <MDBCardTitle tag="h4"><strong>Kate Smith</strong></MDBCardTitle>
              <h6 class="fw-bold indigo-text py-2">Graphic designer</h6>
              <MDBCardText>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Voluptatibus, ex, recusandae. Facere modi sunt, quod
                quibusdam.
              </MDBCardText>
              <div class="d-flex justify-content-evenly">
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="dribbble" size="lg" />
                </a>
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="dribbble" size="lg" />
                </a>
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="dribbble" size="lg" />
                </a>
              </div>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
        <MDBCol md="4">
          <MDBCard>
            <MDBCardImg top src="https://mdbootstrap.com/img/Photos/Others/men.jpg" alt="Card image cap" />
            <a>
              <div class="mask rgba-white-slight"></div>
            </a>
            <MDBCardBody text="center">
              <MDBCardTitle tag="h4"><strong>Natalie Code</strong></MDBCardTitle>
              <h6 class="fw-bold indigo-text py-2">Backend developer</h6>
              <MDBCardText>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Voluptatibus, ex, recusandae. Facere modi sunt, quod
                quibusdam.
              </MDBCardText>
              <div class="d-flex justify-content-evenly">
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="dribbble" size="lg" />
                </a>
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="dribbble" size="lg" />
                </a>
                <a href="#!" role="button">
                  <MDBIcon iconStyle="fab" icon="dribbble" size="lg" />
                </a>
              </div>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  </MDBOnboarding>
</template>
<script>
  import {
    MDBOnboarding
  } from "mdb-vue-onboarding";
  import {
    MDBContainer,
    MDBRow,
    MDBCol,
    MDBCard,
    MDBCardImg,
    MDBCardTitle,
    MDBCardText,
    MDBCardBody,
    MDBIcon,
    MDBBtn,
  } from "mdb-vue-ui-kit";
  export default {
    components: {
      MDBOnboarding,
      MDBContainer,
      MDBRow,
      MDBCol,
      MDBCard,
      MDBCardImg,
      MDBCardTitle,
      MDBCardText,
      MDBCardBody,
      MDBIcon,
      MDBBtn,
    },
  };
</script>
<script setup lang="ts">
  import {
    MDBOnboarding
  } from "mdb-vue-onboarding";
  import {
    MDBContainer,
    MDBRow,
    MDBCol,
    MDBCard,
    MDBCardImg,
    MDBCardTitle,
    MDBCardText,
    MDBCardBody,
    MDBIcon,
    MDBBtn,
  } from "mdb-vue-ui-kit";
</script>

Onboarding - API

Import

<script>
  import { MDBOnboarding } from "mdb-vue-onboarding";
</script>

Properties

Global

Name Type Default Description
autoFocus Boolean false Set auto focusing step popover element on or off
autoplay Boolean false Set automatic step change on or off. Use it in combination with stepsDuration
autoscroll Boolean false Defines whether window should automatically scroll into opened step position
autostart Boolean false Set Onboarding to start automatically after startDelay seconds
backdrop Boolean false Set show backdrop for step popover on or off
backdropOpacity Number 0.6 Set opacity for step popover backdrop element
btnClose String 'btn-close' Set class for skip and finish buttons
btnMain String 'btn-main' Set class for main button style
btnPause String 'btn-pause' Set class for pause control button
btnResume String 'btn-resume' Set class for resume control button
customClass String ' Adds user's custom class to popover element
debounce Number 300 Set time in miliseconds after which changing of steps via keyboard navigation will be possible
finishLabel String 'Finish' Defines label for finish button inside popover element
nextLabel String 'Next' Defines label for next step button inside popover element
pauseLabel String 'Pause' Defines label for pause button inside popover element when autoPlay,stepsDuration or step duration is set
placement String 'bottom' Define placement of step popover. auto | top | bottom | left | right
prevLabel String 'Back' Defines label for previous step button inside popover element
resumeLabel String 'Resume' Defines label for resume button inside popover element when autoPlay,stepsDuration or step duration is set
skipLabel String 'Skip' Defines label for skip button inside popover element
startEvent String '' Set event on startTrigger element which will start Onboarding, e.g. mouseover or click
startDelay Number 0 Set time in seconds after which Onboarding will start. Use it with autoStart or startTrigger / startEvent combination
startIndex Number 1 Set index from which Onboarding will start
startTrigger String '' Set selector for HTML element that will start Onboarding when startEvent occurs.
steps Array Array of elements to initialize component with.
stepsDuration Number 0 Set time in seconds after which each step will automatically change to next
tag String 'div Element wrapper tag

Each individual step attribute will overwrite its global counterpart behavior.

Step

Name Type Default Description
autoplay Boolean true Set step autoplay attribute to false to turn off global autoplay for this particular step
backdrop Boolean | Null null Overwrites global backdrop attribute for single step
btnClose String '' Overwrites global btnClose attribute for single step
btnMain String '' Overwrites global btnMain attribute for single step
btnPause String '' Overwrites global btnPause attribute for single step
btnResume String '' Overwrites global btnResume attribute for single step
duration Number 0 Overwrites global stepsDuration attribute for single step
finishLabel String '' Overwrites global finishLabel attribute for single step
nextLabel String '' Overwrites global nextLabel attribute for single step
index Number null Set index number for step element
onboardingContent String '' Set content for step element. Can receive HTML templates
pauseLabel String '' Overwrites global pasueLabel attribute for single step
placement String 'bottom' Define placement of step popover. auto | top | bottom | left | right
prevLabel String '' Overwrites global prevLabel attribute for single step
resumeLabel String '' Overwrites global resumeLabel attribute for single step
skipLabel String '' Overwrites global skipLabel attribute for single step
target String | Null null Define selector for step element when creating Onboarding via JS
title String '' Set title for step popover element. When no title given, popover shows progress indicator

Methods

Name Description
open index Starts Onboarding on step set by the index key. Default is the first step.
close Closes opened step popover.
nextStep Opens next step popover.
prevStep Opens previous step popover.
pause Pauses Onboarding on current step when autoplay is on.
resume Resumes Onboarding on current step when autoplay is on. 
<template>
  <MDBBtn @click="onboardingRef?.nextStep()">next step</MDBBtn>
  <MDBOnboarding
    ref="onboardingRef"
  >
  ...
  </MDBOnboarding>
</template>

Events

Name Description
start Emitted when an Onboarding has started.
end Emitted when the last step of the Onboarding has ended.
open Emitted when a step element has opened.
close Emitted when a step element has closed
next Emitted when next step is about to be opened.
previous Emitted when previous step is about to be opened.

For example, to listen on Onboading start

<template>
  <MDBOnboarding @start="handleOonboardingStart" />
</template>