Wts Tour

The Angular Welcome Tour package offers a fully customizable and interactive step-by-step tour feature for websites, designed to guide users through key sections and functionalities of the application on their first visit. Built natively for Angular 17+ without external dependencies, it is lightweight, easy to integrate, and highly flexible.

Install

npm install --save wts-tour

Next import Tour Service

import { Component, ViewChild, afterNextRender } from '@angular/core';
import { WtsTourService } from 'wts-tour';

  .....

@Component({
  selector: '<COMPONENT-SELECTOR>',
  templateUrl: '<COMPONENT>.html',
  styleUrls: ['<COMPONENT>.scss'],
  standalone: true,
  imports: [],
})
export class AppComponent {
  private tours = inject(WtsTourService);

  constructor() {
    afterNextRender(() => {
      this.tours.setSteps({ skipLable: 'skip' }, [
        {
          element: '.image',
          content: '<div><h2 style="margin: 0;">test title</h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis autem modi, nemo et eum itaque illum, molestiae eligendi possimus cumque tempore ipsam consequatur voluptate atque qui fugiat inventore error ratione?</p></div>'
        },
      ]
      ).then(() => {
        this.tours.start();
        this.tours.on('skip', (e: any) => {
          console.log(e);
        });
        this.tours.on('finish', (e: any) => {
          console.log(e);
        });
      })
    })
  }
}

HTML

<div class="welcome">
  <img src="./image1.jpg" alt="" class="image">
</div>

Theme

There have multiple :host variable for customize default theme..

  .root-class {
  --popupHeaderBorderBottom: solid 1px #e6e6e6;
  --popupHeaderBorderRadius: 10px 10px 0 0;
  --popupHeaderBackground: transparent;
  --popupHeaderPading: 10px;

  --popupFooterBorderTop: solid 1px #e6e6e6;
  --popupFooterBorderRadius: 0 0 10px 10px;
  --popupFooterBackground: transparent;
  --popupFooterPading: 15px 10px;

  --bulletBlockBorderTop: none;
  --bulletBlockBorderRadius: 0 0 10px 10px;
  --bulletBlockBackground: transparent;
  --bulletBlockPading: 15px 10px;

  --popupBackground: #f7f8f1;
  --popupBorderRadius: 10px;
  --bulletSize: 10px;
  --bulletBackground: #b4b4b4;
  --bulletBorderRadiusOnHover: 10px;
  --bulletBorderRadius: 50%;
  --bulletColor: #fff;
  --bulletFontSize: 12px;
  --bulletTextIndedd: -1000000px;
  --bulletGap: 2px;
  --bulletSizeOnHover: 18px;
  --bulletBackgroundOnHover: #333;

  --navigation-button-padding: 5px;
  --navigation-button-width: 24px;
  --navigation-button-height: 24px;
  --navigation-button-border-radius: 50%;
  --navigation-button-border: none;
  --navigation-button-background: #0077ff;
  --navigation-button-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
  --navigation-button-color: #fff;
  --navigation-button-gap: 5px;

  --done-button-width: auto;
  --done-button-height: 30px;
  --done-button-padding: 0 10px;
  --done-button-border-radius: 4px;
  --done-button-border: none;
  --done-button-background: #0077ff;
  --done-button-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
  --done-button-color: #fff;
  --done-button-gap: 5px;
  --done-button-font-size: 12px;
  --done-button-letter-spacing: 1px;

  --skip-button-width: auto;
  --skip-button-height: 30px;
  --skip-button-padding: 0 10px;
  --skip-button-border-radius: 4px;
  --skip-button-border: none;
  --skip-button-background: #0077ff;
  --skip-button-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
  --skip-button-color: #fff;
  --skip-button-gap: 5px;
  --skip-button-font-size: 12px;
  --skip-button-letter-spacing: 1px;
  }

Features

Customizable Steps:

Define each step of the tour, including the content, positioning, and highlighting of specific elements.

Service-Based:

Simple to implement by inject the Service and configure your steps, no jQuery required.

Interactive Controls:

Supports skip, next, previous, and finish options, allowing users to navigate through the tour.

Dynamic Targeting:

Automatically scrolls to and highlights the target element, ensuring focus.

Built-in Theme Support:

Pre-defined themes, along with options for custom styling to match the look and feel of your website.

Demo

Stackblitz Demo