### Install Intro.js with npm

Source: https://github.com/usablica/intro.js/blob/master/README.md

Use npm to install the Intro.js library for your project.

```bash
npm install intro.js --save
```

--------------------------------

### Initialize Tour with Options

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/configuration.md

Example of initializing a tour instance with specific configuration options passed to the constructor. This sets up the tour's behavior and appearance from the start.

```javascript
const tour = introJs.tour(document.getElementById('app'), {
  steps: [],
  nextLabel: 'Continue',
  prevLabel: 'Back',
  doneLabel: 'Complete',
  keyboardNavigation: true,
  showProgress: true,
  overlayOpacity: 0.7,
  scrollToElement: true,
  language: 'en_US'
});
```

--------------------------------

### Start the Intro.js tour

Source: https://github.com/usablica/intro.js/blob/master/README.md

Initialize and start the Intro.js tour with a simple JavaScript call.

```javascript
introJs().start();
```

--------------------------------

### start()

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-tour.md

Starts the tour and displays the first step. It returns a Promise that resolves to the Tour instance.

```APIDOC
## start()

### Description
Starts the tour and displays the first step.

### Method
`async start(): Promise<this>`

### Returns
Promise that resolves to the `Tour` instance.

### Example
```javascript
await tour.start();
```
```

--------------------------------

### Install Intro.js via NPM/Yarn

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/00-START-HERE.md

Install the Intro.js library using npm or yarn. Import the library and its CSS for use in your project.

```bash
npm install intro.js
```

```javascript
import introJs from 'intro.js';
import 'intro.js/introjs.css';
```

--------------------------------

### Start Development Server

Source: https://github.com/usablica/intro.js/blob/master/example/bootstrap/v3/README.md

Run the Gulp development task to start the server and edit files.

```bash
gulp dev
```

--------------------------------

### Start the Tour

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-tour.md

Starts the tour and displays the first step. Use this to initiate the tour sequence.

```javascript
await tour.start();
```

--------------------------------

### Import Default Intro.js Styles

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/getting-started.md

Import the default CSS for Intro.js to apply its standard styling. This is the simplest way to get started with the visual appearance of the tour.

```javascript
import 'intro.js/introjs.css';
```

--------------------------------

### Setup Multiple Tours

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/getting-started.md

Configure and manage multiple distinct tours, such as onboarding and feature-specific tours. Use the 'group' option to identify tours and conditionally start the appropriate one based on user state or preferences.

```javascript
// Onboarding tour for new users
const onboardingTour = introJs.tour()
  .setOption('group', 'onboarding')
  .addSteps([
    { element: '.header', intro: 'Welcome!', position: 'bottom' },
    { element: '.features', intro: 'Check out our features', position: 'right' }
  ]);

// Feature-specific tour
const featureTour = introJs.tour()
  .setOption('group', 'features')
  .addSteps([
    { element: '.advanced-feature', intro: 'Advanced feature', position: 'bottom' }
  ]);

// Start appropriate tour
if (isNewUser) {
  await onboardingTour.start();
} else if (userWantsFeatureTour) {
  await featureTour.start();
}
```

--------------------------------

### Install Development Dependencies

Source: https://github.com/usablica/intro.js/blob/master/example/bootstrap/v3/README.md

Install npm packages and Gulp.js for developing with the source files.

```bash
npm install
```

--------------------------------

### Build Intro.js static resources

Source: https://github.com/usablica/intro.js/blob/master/README.md

After installing Node.js and npm, run this command to minify static resources for production.

```bash
npm run build
```

--------------------------------

### Basic Setup with ES Modules

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/getting-started.md

Import and initialize Intro.js using ES module syntax. Ensure Intro.js CSS is also imported.

```javascript
import introJs from 'intro.js';
import 'intro.js/introjs.css';

const tour = introJs.tour();
await tour.start();
```

--------------------------------

### Basic Setup with Browser Global

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/getting-started.md

Include Intro.js via script tags and use the global `introJs` object. Ensure CSS is also linked.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js/introjs.min.css">
<script src="https://cdn.jsdelivr.net/npm/intro.js/intro.min.js"></script>

<script>
const tour = introJs.tour();
await tour.start();
</script>
```

--------------------------------

### Basic Tour Example with Data Attributes

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/data-attributes.md

Use `data-intro` to define the introduction text for tour steps directly on HTML elements. This example shows a simple tour structure.

```html
<div class="tutorial">
  <header data-intro="Welcome! This is the header of your application">
    <h1>My Application</h1>
  </header>

  <main>
    <section data-intro="This is the main content area where your work goes">
      <!-- content -->
    </section>
  </main>
</div>

<script>
const tour = introJs.tour();
await tour.start();
</script>
```

--------------------------------

### Start a Tour Programmatically

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/configuration.md

After defining tour steps using data attributes, start the tour using the introJs library. Ensure introJs is imported and initialized.

```javascript
const tour = introJs.tour();
await tour.start();
```

--------------------------------

### Intro.js Tour with All Default Configurations

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/configuration.md

Provides an example of creating an Intro.js tour using all available default configuration options. This serves as a reference for all customizable settings.

```javascript
const tour = introJs.tour();

// Equivalent to:
const tourWithDefaults = introJs.tour(undefined, {
  steps: [],
  isActive: true,
  nextLabel: 'Next',
  prevLabel: 'Previous',
  skipLabel: '×',
  doneLabel: 'Done',
  hidePrev: false,
  hideNext: false,
  nextToDone: true,
  tooltipPosition: 'bottom',
  tooltipClass: '',
  group: '',
  highlightClass: '',
  exitOnEsc: true,
  exitOnOverlayClick: true,
  showStepNumbers: false,
  stepNumbersOfLabel: 'of',
  keyboardNavigation: true,
  showButtons: true,
  showBullets: true,
  showProgress: false,
  scrollToElement: true,
  scrollTo: 'element',
  scrollPadding: 30,
  overlayOpacity: 0.5,
  autoPosition: true,
  positionPrecedence: ['bottom', 'top', 'right', 'left'],
  disableInteraction: false,
  dontShowAgain: false,
  dontShowAgainLabel: "Don't show again",
  dontShowAgainCookie: 'introjs-dontShowAgain',
  dontShowAgainCookieDays: 365,
  helperElementPadding: 10,
  buttonClass: 'introjs-button',
  progressBarAdditionalClass: '',
  tooltipRenderAsHtml: true,
  language: navigator.language || 'en_US'
});
```

--------------------------------

### Basic Setup with CommonJS

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/getting-started.md

Require Intro.js and its CSS using CommonJS syntax for Node.js environments or older build systems.

```javascript
const introJs = require('intro.js');
require('intro.js/introjs.css');

const tour = introJs.tour();
await tour.start();
```

--------------------------------

### Start Tour on Button Click JavaScript

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/README.md

Initiate a tour when a specific button is clicked. Ensure the tour steps are defined before starting.

```javascript
const tour = introJs.tour();
tour.addSteps([...]);

document.getElementById('start-tour').addEventListener('click', async () => {
  await tour.start();
});
```

--------------------------------

### introJs.tour()

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-introjs.md

Creates a new Tour instance for guided tours. This is the recommended method for initiating tours.

```APIDOC
## introJs.tour()

### Description
Creates a new Tour instance for guided tours.

### Method
Factory Function

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **elementOrSelector** (string | HTMLElement) - Optional - Optional target element or CSS selector.

### Returns
`Tour` instance

### Example
```javascript
// Create a tour on the entire page
const tour = introJs.tour();

// Create a tour for a specific element
const tour = introJs.tour('.introduction');

// Create a tour with a DOM element
const tour = introJs.tour(document.getElementById('app'));
```
```

--------------------------------

### Create and Start a Basic Tour

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-introjs.md

Defines a simple tour with three steps, each targeting a specific element and providing introductory text. The tour starts after configuration.

```javascript
const tour = introJs.tour();

tour.addSteps([
  {
    element: '.navbar',
    intro: 'Welcome! This is our navigation bar.',
    position: 'bottom'
  },
  {
    element: '.main-content',
    intro: 'This is the main content area where your content goes.',
    title: 'Main Content',
    position: 'bottom'
  },
  {
    element: '.sidebar',
    intro: 'Use the sidebar to access additional features.',
    position: 'left'
  }
]);

tour.onComplete(() => {
  console.log('Tour completed!');
});

await tour.start();
```

--------------------------------

### Create Your First Tour with Intro.js

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/00-START-HERE.md

Initialize a new tour, add steps with elements and introductory text, and then start the tour. Ensure Intro.js and its CSS are imported.

```javascript
import introJs from 'intro.js';
import 'intro.js/introjs.css';

// Create a tour
const tour = introJs.tour();

// Add steps
tour.addSteps([
  {
    element: '.header',
    intro: 'Welcome! This is the header.',
    position: 'bottom'
  },
  {
    element: '.features',
    intro: 'Check out our amazing features.',
    position: 'right'
  }
]);

// Start the tour
await tour.start();
```

--------------------------------

### Conditionally Start a Tour JavaScript

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/README.md

Display a tour only under specific conditions, such as a user's first visit. This example also sets the 'dontShowAgain' option.

```javascript
if (isFirstVisit) {
  await introJs.tour().setOption('dontShowAgain', true).addSteps([...]).start();
}
```

--------------------------------

### Start Intro.js Tour Conditionally

Source: https://github.com/usablica/intro.js/blob/master/example/multi-page/second.html

This snippet starts the Intro.js tour only if the URL contains 'multipage' as a query parameter. Ensure Intro.js is loaded before this script.

```javascript
if (RegExp('multipage', 'gi').test(window.location.search)) { introJs.tour().start(); }
```

--------------------------------

### onStart

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-tour.md

Registers a callback fired when the tour starts. This event is triggered at the very beginning of the tour execution.

```APIDOC
## onStart(callback)

### Description
Registers a callback fired when the tour starts. This event is triggered at the very beginning of the tour execution.

### Method
`onStart`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **callback** (`introStartCallback`) - Required - Function called when tour begins.

### Callback Signature
```typescript
(this: Tour, targetElement: HTMLElement) => void | Promise<void>
```

### Response
#### Success Response
- **this** (`Tour`) - Returns the Tour instance for method chaining.

#### Response Example
```javascript
// Returns the Tour instance

```

--------------------------------

### HTML Button to Start Tour

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/getting-started.md

Add a button to your HTML that, when clicked, will initiate the Intro.js tour.

```html
<button id="start-tour">Start Tour</button>
```

--------------------------------

### Start Tour with Error Handling

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/getting-started.md

Wrap tour start calls in a try-catch block to gracefully handle potential errors during tour initialization. This is useful when the tour might fail to start due to configuration or element issues.

```javascript
try {
  await tour.start();
} catch (error) {
  console.error('Tour failed:', error);
}
```

--------------------------------

### Start Multi-Page Tour

Source: https://github.com/usablica/intro.js/blob/master/example/multi-page/index.html

Initiates an Intro.js tour and sets up navigation to the next page upon completion. Use this to begin a multi-page introduction flow.

```javascript
document.getElementById('startButton').onclick = function() { introJs.tour().setOption('doneLabel', 'Next page').oncomplete(function() { window.location.href = 'multi-page/second.html?multipage=true'; }).start(); };
```

--------------------------------

### Install Intro.js via CDN

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/00-START-HERE.md

Include Intro.js using CDN links in your HTML file. This method adds the necessary CSS and JavaScript files to your project.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js@8.3.2/minified/introjs.min.css">
<script src="https://cdn.jsdelivr.net/npm/intro.js@8.3.2/minified/intro.min.js"></script>
```

--------------------------------

### Basic Hints Example

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/data-attributes.md

Demonstrates how to add basic hints to elements using the `data-hint` attribute. The script initializes and renders hints.

```html
<div class="dashboard">
  <button data-hint="Click here to save your work">Save</button>
  <button data-hint="Click here to export as PDF">Export</button>
  <button data-hint="Click here to refresh the page">Refresh</button>
</div>

<script>
const hints = introJs.hint();
await hints.render();
</script>
```

--------------------------------

### Start Intro.js Tour for SVG

Source: https://github.com/usablica/intro.js/blob/master/example/svg/d3.htm

Initiates an Intro.js tour when the element with the ID 'startButton' is clicked. Ensure Intro.js is properly included and configured.

```javascript
document.getElementById('startButton').onclick = function() { introJs.tour().start(); };
```

--------------------------------

### Start Intro.js Tour with HTML Tooltips

Source: https://github.com/usablica/intro.js/blob/master/example/html-tooltip/index.html

Initiates an Intro.js tour with custom steps. Each step can contain HTML for rich text formatting within the tooltip. Use this to create visually engaging onboarding experiences.

```javascript
function startIntro(){
  var intro = introJs.tour();
  intro.setOptions({
    hideNext: true,
    language: 'de_DE',
    steps: [
      { title: '<p>Welcome</p>', element: '#step1', intro: "This is a <b>bold</b> tooltip.", position: 'right' },
      { element: '#step2', intro: "Ok, <i>wasn't</i> that fun?", position: 'bottom-right-aligned' },
      { element: '#step3', intro: 'More features, more <span style="color: red;">f</span><span style="color: green;">u</span><span style="color: blue;">n</span>.', position: 'top-middle-aligned' },
      { element: '#step4', intro: "<span style='font-family: Tahoma'>Another step with new font!</span>", position: 'bottom-middle-aligned' },
      { element: '#step5', intro: '<strong>Get</strong> it, <strong>use</strong> it.' }
    ]
  });
  intro.start();
}
```

--------------------------------

### Most Used Tour Options

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/INDEX.md

Configure the behavior and appearance of guided tours. Use this for creating step-by-step walkthroughs.

```javascript
const tour = introJs.tour(undefined, {
  steps: [],                          // Array of steps
  showProgress: true,                 // Show progress indicator
  showStepNumbers: true,              // Show "1 of 5"
  nextLabel: 'Next',                  // Button label
  prevLabel: 'Back',
  doneLabel: 'Done',
  tooltipPosition: 'bottom',          // Tooltip position
  keyboardNavigation: true,           // Arrow keys work
  scrollToElement: true,              // Auto-scroll into view
  exitOnEsc: true,                    // Exit on Escape key
  exitOnOverlayClick: true,           // Exit on overlay click
  overlayOpacity: 0.5,                // Darkness (0-1)
  disableInteraction: false,          // Allow interaction
  autoPosition: true,                 // Position automatically
  language: 'en_US'                   // Language code
});
```

--------------------------------

### Custom CSS Class Examples

Source: https://github.com/usablica/intro.js/blob/master/example/custom-class/index.html

These are examples of custom CSS classes that can be applied to Intro.js tooltips. Use the `data-tooltipClass` attribute or the `tooltipClass` option to assign these classes.

```css
.forLastStep { font-weight: bold; }
```

```css
.customDefault { color: gray; }
```

```css
.customDefault .introjs-skipbutton { border-radius: 0; color: red; }
```

--------------------------------

### Get Intro.js Version

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-introjs.md

Retrieve the current version of the Intro.js library. This is useful for debugging or compatibility checks.

```javascript
console.log('Intro.js version:', introJs.version);
```

--------------------------------

### Start Intro Without Element

Source: https://github.com/usablica/intro.js/blob/master/example/withoutElement/index.html

Initiates an Intro.js tour with steps that are floating tooltips and do not focus on specific elements. Useful for general guidance or announcements.

```javascript
function startIntro(){
  var intro = introJs.tour();
  intro.setOptions({
    steps: [
      { intro: "Hello world!" },
      { intro: "You <b>don't need</b> to define element to focus, this is a floating tooltip." },
      { element: document.querySelector('#step1'), intro: "This is a tooltip." },
      { element: document.querySelectorAll('#step2')[0], intro: "Ok, wasn't that fun?", position: 'right' },
      { element: '#step3', intro: 'More features, more fun.', position: 'left' },
      { element: '#step4', intro: "Another step.", position: 'bottom' },
      { element: '#step5', intro: 'Get it, use it.' }
    ]
  });
  intro.start();
}
```

--------------------------------

### Set and Get Intro.js Language Programmatically

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/configuration.md

Demonstrates how to set the language when creating a tour, change it after creation, and retrieve the current language setting.

```javascript
// Set language when creating tour
const tour = introJs.tour(undefined, { language: 'es_ES' });

// Change language after creation
tour.setOption('language', 'fr_FR');

// Get current language
const currentLanguage = tour.getOption('language');
```

--------------------------------

### introJs.hint()

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-introjs.md

Creates a new Hint instance for contextual hints. This method is used to generate hints that guide users to specific elements.

```APIDOC
## introJs.hint()

### Description
Creates a new Hint instance for contextual hints.

### Method
Factory Function

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **elementOrSelector** (string | HTMLElement) - Optional - Optional target element or CSS selector.

### Returns
`Hint` instance

### Example
```javascript
// Create hints on the entire page
const hints = introJs.hint();

// Create hints for a specific section
const hints = introJs.hint('.feature-section');

// Create hints with a DOM element reference
const hints = introJs.hint(document.querySelector('.content'));
```
```

--------------------------------

### Initialize Tour Actions with onStart

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/callbacks-and-events.md

The onStart callback is triggered when the tour begins. Use it to set up initial conditions, such as disabling page interactions or logging the tour start event.

```javascript
tour.onStart((element) => {
  console.log('Tour starting on element:', element);
  
  // Disable other interactive elements
  disablePageInteraction();
  
  // Log analytics
  trackEvent('tour_started');
});
```

--------------------------------

### Start Intro.js tour for a specific section

Source: https://github.com/usablica/intro.js/blob/master/README.md

Optionally, pass a CSS selector to `introJs()` to limit the tour to a specific section of your page.

```javascript
introJs(".introduction-farm").start();
```

--------------------------------

### Initialize Intro.js with Auto Positioning

Source: https://github.com/usablica/intro.js/blob/master/example/auto-position/index.html

Use this JavaScript code to start an Intro.js tour where tooltips are automatically positioned. The `positionPrecedence` option defines the order in which positions are tried if 'auto' is selected.

```javascript
function startTour() {
  var tour = introJs.tour()
  tour.setOption('tooltipPosition', 'auto');
  tour.setOption('positionPrecedence', ['left', 'right', 'top', 'bottom']);
  tour.start();
}
```

--------------------------------

### Define Tour Steps Using HTML Data Attributes

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-introjs.md

Illustrates how to define tour steps directly within HTML using `data-intro` and `data-position` attributes. The tour is then started programmatically.

```html
<button data-intro="Click here to submit" data-position="bottom">Submit</button>
<form data-intro="Fill out this form" data-step="2" data-title="Registration">
  <!-- form fields -->
</form>
```

```javascript
const tour = introJs.tour();
await tour.start();
```

--------------------------------

### Dynamically Modify Tour Steps

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-introjs.md

Shows how to set initial steps for a tour and then retrieve and modify them before starting. This allows for dynamic adjustments to tour content.

```javascript
const tour = introJs.tour();
tour.setSteps([
  { element: '.step1', intro: 'First step', position: 'bottom' },
  { element: '.step2', intro: 'Second step', position: 'bottom' }
]);

// Modify a step before starting
const steps = tour.getSteps();
steps[0].title = 'Getting Started';

await tour.start();
```

--------------------------------

### Clone Agency Theme Repository

Source: https://github.com/usablica/intro.js/blob/master/example/bootstrap/v3/README.md

Clone the Agency theme repository using Git to get started.

```bash
git clone https://github.com/BlackrockDigital/startbootstrap-agency.git
```

--------------------------------

### Chain API Calls for Tour Configuration

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-introjs.md

Demonstrates method chaining to configure a tour, adding multiple steps, and setting callbacks for completion and exit events before starting the tour.

```javascript
const tour = introJs.tour()
  .addStep({
    element: '.header',
    intro: 'Welcome!',
    position: 'bottom'
  })
  .addStep({
    element: '.footer',
    intro: 'This is the footer.',
    position: 'top'
  })
  .onComplete(() => {
    console.log('Done!');
  })
  .onExit(() => {
    console.log('Tour exited');
  });

await tour.start();
```

--------------------------------

### Create Tour Instance

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-introjs.md

Creates a new Tour instance for guided tours. You can specify a CSS selector, a DOM element, or create a tour for the entire page.

```javascript
// Deprecated usage - logs warning
const tour = introJs();

// Recommended usage instead
const tour = introJs.tour();
```

```javascript
// Create a tour on the entire page
const tour = introJs.tour();

// Create a tour for a specific element
const tour = introJs.tour('.introduction');

// Create a tour with a DOM element
const tour = introJs.tour(document.getElementById('app'));
```

--------------------------------

### Check Element Existence and Use getElement Helper

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/getting-started.md

Verify that elements targeted by Intro.js exist in the DOM before starting the tour. The `getElement` utility from `intro.js/utilities` can be used to retrieve elements and will throw an error if not found.

```javascript
// Verify element exists
const element = document.querySelector('.my-element');
if (!element) {
  console.error('Element .my-element not found');
}

// Use getElement helper for errors
import { getElement } from 'intro.js/utilities';

try {
  const el = getElement('.my-element');
} catch (e) {
  console.error(e.message);
}
```

--------------------------------

### Hints with Custom Styling and Animation Control

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/data-attributes.md

Illustrates how to apply custom CSS classes and disable animation for hints using `data-tooltip-class` and `data-hint-animation`. Includes a CSS example for styling.

```html
<div class="premium-feature"
     data-hint="This is a premium feature. Upgrade to unlock."
     data-tooltip-class="premium-hint"
     data-hint-animation="false">
  <button disabled>Upgrade Required</button>
</div>

<style>
.premium-hint {
  background: linear-gradient(to right, #ffd700, #ff8c00);
  color: black;
  font-weight: bold;
  border: 2px solid orange;
}
</style>

<script>
const hints = introJs.hint();
await hints.render();
</script>
```

```html
<button data-hint="Animated" data-hint-animation="true">
  Animated Hint
</button>

<button data-hint="Static" data-hint-animation="false">
  Static Hint
</button>

<script>
const hints = introJs.hint();
await hints.render();
</script>
```

--------------------------------

### Create Your First Hints with Intro.js

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/00-START-HERE.md

Initialize hints, add individual hints targeting specific elements with descriptive text, and then render them. Import Intro.js and its CSS.

```javascript
import introJs from 'intro.js';
import 'intro.js/introjs.css';

// Create hints
const hints = introJs.hint();

// Add hints
hints.addHint({
  element: '.save-btn',
  hint: 'Click to save',
  hintPosition: 'top-middle'
});

// Render them
await hints.render();
```

--------------------------------

### Handle Keyboard Interactions During Tour

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/callbacks-and-events.md

Register and remove custom keyboard event listeners using onStart and onExit callbacks to enable custom navigation or actions within the tour. This example shows how to handle arrow key combinations.

```javascript
const tour = introJs.tour();

tour
  .onStart(() => {
    // Register custom keyboard handlers
    document.addEventListener('keydown', handleTourKeydown);
  })
  .onExit(() => {
    // Remove custom handlers
    document.removeEventListener('keydown', handleTourKeydown);
  });

function handleTourKeydown(e) {
  if (e.key === 'ArrowRight' && e.shiftKey) {
    tour.nextStep();
  } else if (e.key === 'ArrowLeft' && e.shiftKey) {
    tour.previousStep();
  }
}
```

--------------------------------

### Customize Intro.js Tooltip Styles

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/getting-started.md

Override the default CSS for Intro.js tooltips to match your application's theme. This example shows how to change the background, text color, and other properties.

```css
/* Tooltip */
.introjs-tooltip {
  background: #333;
  color: #fff;
}

/* Highlight */
.introjs-helperLayer {
  border-color: #4a90e2;
}

/* Buttons */
.introjs-button {
  background: #4a90e2;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
}

/* Progress Bar */
.introjs-progressBar {
  background: #4a90e2;
}

/* Bullets */
.introjs-bullet {
  background: #4a90e2;
}

.introjs-bullet.active {
  background: #2e5c8a;
}
```

--------------------------------

### onStart()

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/callbacks-and-events.md

Fires when the tour begins its execution.

```APIDOC
## onStart()

### Description
Fires when the tour starts.

### Parameters
#### Path Parameters
- **targetElement** (`HTMLElement`) - The first step's element.

### Example
```javascript
tour.onStart((element) => {
  console.log('Tour starting on element:', element);
  
  // Disable other interactive elements
  disablePageInteraction();
  
  // Log analytics
  trackEvent('tour_started');
});
```
```

--------------------------------

### Check if Tour Has Started

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-tour.md

Confirm whether the tour has been initiated by checking if a current step has been set. If not started, you can initiate it.

```javascript
if (!tour.hasStarted()) {
  await tour.start();
}
```

--------------------------------

### Implementing Tutorial Flow with Data Attributes

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/data-attributes.md

Structure a multi-step tutorial using sequential data attributes (`data-step`) and configure Intro.js to show progress and step numbers.

```html
<div class="tutorial">
  <step-1 data-intro="Start here" data-step="1">Step 1</step-1>
  <step-2 data-intro="Then do this" data-step="2">Step 2</step-2>
  <step-3 data-intro="Finally, this" data-step="3">Step 3</step-3>
</div>

<script>
const tour = introJs.tour();
tour.setOption('showProgress', true);
tour.setOption('showStepNumbers', true);
await tour.start();
</script>
```

--------------------------------

### Create and Render Basic Hints

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-introjs.md

Sets up a hints instance and adds two hints, each targeting a specific element with descriptive text and positioning. The hints are then rendered on the page.

```javascript
const hints = introJs.hint();

hints.addHint({
  element: '.delete-button',
  hint: 'Click here to delete this item',
  hintPosition: 'top-middle',
  position: 'bottom'
});

hints.addHint({
  element: '.save-button',
  hint: 'Click here to save your changes',
  hintPosition: 'top-middle',
  position: 'bottom'
});

hints.onHintClick((item) => {
  console.log('User clicked:', item.hint);
});

await hints.render();
```

--------------------------------

### Add Single Step to Tour

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-tour.md

Adds a single step configuration to the tour. This method is useful for dynamically building tours. Ensure the tour is started separately using the start() method.

```javascript
tour.addStep({
  element: '.pricing-table',
  intro: 'Our pricing plans',
  title: 'Pricing',
  position: 'bottom'
});
```

--------------------------------

### introStartCallback Type

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/types.md

Callback fired when the tour begins. It receives the target element of the first step.

```typescript
type introStartCallback = (
  this: Tour,
  targetElement: HTMLElement
) => void | Promise<void>;
```

--------------------------------

### Start Intro.js Tour with Disabled Interaction

Source: https://github.com/usablica/intro.js/blob/master/example/disable-interaction/programmatic.html

Use this JavaScript code to initialize and start an Intro.js tour. Set the 'disableInteraction' option to true for specific steps to prevent users from interacting with the highlighted element during the tour.

```javascript
function startIntro() {
  var intro = introJs.tour();
  intro.setOptions({
    steps: [
      { intro: "Hello world!" },
      { element: document.querySelector('#step1'), intro: "This is a tooltip. (interaction disabled)", disableInteraction: true },
      { element: document.querySelectorAll('#step2')[0], intro: "Ok, wasn't that fun?", position: 'right' },
      { element: '#step3', intro: 'More features, more fun.', position: 'left' },
      { element: '#step4', intro: "Another step.", position: 'bottom' },
      { element: '#step5', intro: 'Get it, use it. (interaction disabled)', disableInteraction: true }
    ]
  });
  intro.start();
}
```

--------------------------------

### Initialize Hint Instance with Options

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/configuration.md

Create a new hint instance with specific configuration options. This is useful for setting up hints with custom behaviors and appearance.

```javascript
const hints = introJs.hint(document.body, {
  hints: [],
  hintPosition: 'top-middle',
  hintAnimation: true,
  hintAutoRefreshInterval: 100,
  hintShowButton: true,
  language: 'en_US'
});
```

--------------------------------

### Get Tour Direction

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-tour.md

Determine the current direction of the tour progression (forward or backward).

```javascript
const direction = tour.getDirection();
console.log(`Moving ${direction}`);
```

--------------------------------

### getCurrentStep()

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-tour.md

Retrieves the current step index of the tour. Returns undefined if the tour has not yet started.

```APIDOC
## getCurrentStep()

### Description
Returns the current step index (0-based) or undefined if tour hasn't started.

### Returns
`number | undefined`

### Example
```javascript
const current = tour.getCurrentStep();
if (current !== undefined) {
  console.log(`Currently on step ${current + 1}`);
}
```
```

--------------------------------

### Create Hints with JavaScript

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/getting-started.md

Use Intro.js to programmatically add hints to specific HTML elements, providing descriptive text and positioning.

```javascript
import introJs from 'intro.js';
import 'intro.js/introjs.css';

const hints = introJs.hint();

hints.addHint({
  element: '.save-btn',
  hint: 'Click to save your changes',
  hintPosition: 'top-middle'
});

hints.addHint({
  element: '.delete-btn',
  hint: 'Click to remove this item',
  hintPosition: 'top-middle'
});

hints.addHint({
  element: '.settings-btn',
  hint: 'Click to access settings',
  hintPosition: 'top-middle'
});

await hints.render();
```

--------------------------------

### Get a Browser Cookie

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/utilities.md

Retrieves the value of a specified cookie. Returns null if the cookie is not found.

```typescript
getCookie(name: string): string | null
```

```javascript
const completed = getCookie('tour-completed');
if (completed === 'true') {
  console.log('Tour already completed');
}
```

--------------------------------

### resetCurrentStep()

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-tour.md

Resets the tour's current step to an undefined state, effectively indicating that the tour has not started.

```APIDOC
## resetCurrentStep()

### Description
Resets the current step to undefined (tour not started state).

### Method
`resetCurrentStep(): void`

### Example
```javascript
tour.resetCurrentStep();
```
```

--------------------------------

### Get All Tour Steps

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-tour.md

Retrieves an array containing all the steps currently configured for the tour. This can be useful for inspection or modification.

```javascript
const allSteps = tour.getSteps();
console.log(`Tour has ${allSteps.length} steps`);
```

--------------------------------

### Get Target Element

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-hint.md

Returns the HTML element that the hints are scoped to. This is useful for accessing properties of the target element.

```javascript
const target = hints.getTargetElement();
console.log(target.id);
```

--------------------------------

### Retrieve All Hints

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-hint.md

Get an array containing all the hint items currently managed by the instance. This can be used for inspection or debugging.

```javascript
const allHints = hints.getHints();
console.log(`Page has ${allHints.length} hints`);
```

--------------------------------

### Configure General Tour Options

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/configuration.md

Set common tour options for first-time users, including progress indicators, step numbers, keyboard navigation, element scrolling, and overlay opacity.

```javascript
const tour = introJs.tour();

tour.setOptions({
  showProgress: true,              // Show progress indicator
  showStepNumbers: true,           // Show "1 of 5"
  keyboardNavigation: true,        // Allow arrow keys
  scrollToElement: true,           // Auto-scroll
  overlayOpacity: 0.7              // Darker overlay for focus
});
```

--------------------------------

### addStep

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-tour.md

Adds a single step to the tour. This method is typically used in conjunction with the `start()` method to build the tour dynamically.

```APIDOC
## addStep(step)

### Description
Adds a single step to the tour. This method is typically used in conjunction with the `start()` method to build the tour dynamically.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **step** (Partial<TourStep>) - Required - Step configuration object with title, intro, element selector, and position.

### Method Signature
```typescript
addStep(step: Partial<TourStep>): this
```

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **step** (Partial<TourStep>) - Required - Step configuration object with title, intro, element selector, and position.

### Returns
`Tour` (for method chaining)

### Example
```javascript
tour.addStep({
  element: '.pricing-table',
  intro: 'Our pricing plans',
  title: 'Pricing',
  position: 'bottom'
});
```
```

--------------------------------

### Translator Class

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/utilities.md

Provides language translation for UI strings. Allows setting and getting the current language, and translating messages.

```APIDOC
## Translator Class

### Description
Provides language translation for UI strings. Auto-detects language if not provided.

### Methods
#### constructor(languageCode?: LanguageCode)
- **languageCode** (`LanguageCode`) - Optional - The language code to set for the translator.

#### setLanguage(code: LanguageCode): void
- **code** (`LanguageCode`) - Required - Sets the translation language.

#### getLanguage(): LanguageCode
- Returns current language code.

#### translate(message: string): string
- **message** (`string`) - Required - Message key to translate.
- Returns original message if not found.

### Example
```javascript
const translator = new Translator('es_ES');

const nextLabel = translator.translate('buttons.next');
console.log(nextLabel); // "Siguiente"

translator.setLanguage('fr_FR');
const doneLabel = translator.translate('buttons.done');
console.log(doneLabel); // "Terminé"
```
```

--------------------------------

### Intro.js Main Exports

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/README.md

Provides the main entry points for creating tours and hints, including the default factory function, specific factory methods for tours and hints, and the library version.

```typescript
// Default export - factory function
introJs(elementOrSelector?: string | HTMLElement): LegacyIntroJs

// Factory methods
introJs.tour(elementOrSelector?: string | HTMLElement): Tour
introJs.hint(elementOrSelector?: string | HTMLElement): Hint

// Version
introJs.version: string
```

--------------------------------

### clone()

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-tour.md

Creates a deep clone of the tour instance with the same configuration. This is useful for creating independent copies of a tour that can be started or manipulated separately.

```APIDOC
## clone()

### Description
Creates a deep clone of the tour instance with the same configuration.

### Method
`clone()`

### Returns
- **Tour** - New `Tour` instance

### Example
```javascript
const tourClone = tour.clone();
await tourClone.start();
```
```

--------------------------------

### Get Tour Target Element

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-tour.md

Retrieves the HTML element that the tour is scoped to. This is useful for accessing properties of the target element, such as its ID.

```javascript
const targetElement = tour.getTargetElement();
console.log(targetElement.id);
```

--------------------------------

### Add Hints with JSON Configuration

Source: https://github.com/usablica/intro.js/blob/master/example/programmatic/hint.html

Use this function to define and add hints to your web application using Intro.js. It configures hints with elements, text, and positions, and sets up callbacks for hint events.

```javascript
function addHints(){
  intro = introJs();
  intro.setOptions({
    hints: [
      { element: document.querySelector('#step1'), hint: "This is a tooltip.", hintPosition: 'top-middle' },
      { element: '#step2', hint: 'More features, more fun.', position: 'left' },
      { element: '#step4', hint: "<b>Another</b> step.", hintPosition: 'top-middle' }
    ]
  });
  intro.onhintsadded(function() {
    console.log('all hints added');
  });
  intro.onhintclick(function(hintElement, item, stepId) {
    console.log('hint clicked', hintElement, item, stepId);
  });
  intro.onhintclose(function (stepId) {
    console.log('hint closed', stepId);
  });
  intro.addHints();
}
```

--------------------------------

### Intro.js Hint API Reference

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/INDEX.md

Reference for the Intro.js Hint API, including constructor, management, rendering, show/hide, dialogs, configuration, callbacks, and state.

```typescript
// Constructor
const hints = introJs.hint(selector?, options?)

// Management
hints.addHint(hint)
hints.setHints(hints)
hints.getHints()
hints.getHint(n)
hints.removeHint(n)

// Rendering
await hints.render()
await hints.destroy()

// Show/Hide
await hints.showHints()
await hints.showHint(n)
await hints.hideHints()
await hints.hideHint(n)

// Dialogs
await hints.showHintDialog(n)
hints.hideHintDialog()

// Configuration
hints.setOption(key, value)
hints.setOptions(options)
hints.getOption(key)

// Callbacks
hints.onHintsAdded(callback)
hints.onHintClick(callback)
hints.onHintClose(callback)

// State
hints.isRendered()
hints.isActive()
hints.refresh()
hints.clone()
```

--------------------------------

### Get Single Hint Option

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-hint.md

Retrieves a specific hint option value by key. Use this to inspect the current configuration of a hint setting.

```typescript
getOption<K extends keyof HintOptions>(key: K): HintOptions[K]
```

```javascript
const label = hints.getOption('hintButtonLabel');
const refreshInterval = hints.getOption('hintAutoRefreshInterval');
```

--------------------------------

### Manage UI State During Tour with onStart and onExit

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/callbacks-and-events.md

Use onStart and onExit callbacks to modify the UI, such as hiding or showing navigation elements, when a tour begins or ends. This helps create a focused user experience.

```javascript
const tour = introJs.tour();

tour
  .onStart(() => {
    // Hide other UI elements
    document.body.classList.add('tour-active');
    hideNavigation();
    hideSidebar();
  })
  .onExit(() => {
    // Restore UI
    document.body.classList.remove('tour-active');
    showNavigation();
    showSidebar();
  });
```

--------------------------------

### Get Current Window Dimensions

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/utilities.md

Retrieve the current width and height of the browser window using `getWindowSize`. This is useful for responsive design adjustments.

```javascript
const size = getWindowSize();
console.log(`Viewport: ${size.windowWidth}x${size.windowHeight}`);
```

--------------------------------

### Get Available Languages

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/utilities.md

Retrieve a list of all language codes supported by the application. Iterate over the returned array to display or use available languages.

```javascript
const languages = getAvailableLanguages();
languages.forEach(lang => {
  console.log(lang);
});
```

--------------------------------

### Intro.js API Documentation

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/MANIFEST.txt

This section outlines the core API surfaces available to users of the Intro.js library, including the main introJs factory function and its associated methods for creating tours and hints, as well as the Tour and Hint classes.

```APIDOC
## introJs Module/Factory

### Description
The main module factory function for Intro.js. It provides methods to create new tour and hint instances, access the library version, and integrate with various patterns.

### Methods
- **tour()**: Factory method to create a new tour instance.
- **hint()**: Factory method to create a new hint instance.
- **version**: Property exposing the current version of Intro.js.

### Usage Patterns
- Multi-instance tours
- Data attributes integration
- Common integration patterns

## Tour Class

### Description
Documentation for the complete Tour class, covering its constructor, step management, navigation, state management, configuration, lifecycle callbacks, and event handling.

### Methods
- **Constructor**: Reference for initializing a new Tour instance.
- **Step Management**: Methods to add, set, and get tour steps.
- **Navigation Methods**: Control the flow between tour steps.
- **State Management**: Methods to manage the current state of the tour.
- **Configuration Methods**: Methods to configure tour behavior.
- **Lifecycle Callbacks**: Hooks for different stages of the tour lifecycle.
- **Event Handling**: Methods for subscribing to and handling tour events.
- **Utility Methods**: Helper methods for tour operations.

### Code Examples
Full code examples are provided for each method.

## Hint Class

### Description
Documentation for the complete Hint class, covering its constructor, hint management, rendering, visibility control, dialogs, configuration, callbacks, events, and state management.

### Methods
- **Constructor**: Reference for initializing a new Hint instance.
- **Hint Management**: Methods for managing hints.
- **Rendering and Visibility Control**: Control how and when hints are displayed.
- **Hint Dialogs**: Methods related to the hint tooltip appearance and behavior.
- **Configuration Methods**: Methods to configure hint behavior.
- **Callbacks and Events**: Hooks for hint lifecycle events and user interactions.
- **State Management**: Methods to manage the state of hints.
- **Utility Methods**: Helper methods for hint operations.

### Code Examples
Code examples are provided for each method.
```

--------------------------------

### Combine Data Attributes and Programmatic Steps

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/data-attributes.md

Define tour steps using HTML data attributes and add additional steps programmatically. Intro.js automatically detects steps defined in data attributes.

```html
<div class="app">
  <!-- Define some steps via data attributes -->
  <header data-intro="App header" data-step="1">
    <h1>My App</h1>
  </header>

  <main data-intro="Main content" data-step="2">
    <!-- content -->
  </main>

  <aside>
    <!-- No data-intro, will be added programmatically -->
  </aside>
</div>

<script>
const tour = introJs.tour();

// Add steps from data attributes (automatically detected)
const steps = tour.getSteps();
console.log('Found steps:', steps.length);

// Add additional step programmatically
tour.addStep({
  element: 'aside',
  intro: 'Additional info panel',
  position: 'left'
});

await tour.start();
</script>
```

--------------------------------

### Intro.js Tour API Reference

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/INDEX.md

Reference for the Intro.js Tour API, including constructor, navigation, step management, state, configuration, callbacks, and events.

```typescript
// Constructor
const tour = introJs.tour(selector?, options?)

// Navigation
await tour.start()
await tour.nextStep()
await tour.previousStep()
await tour.goToStep(n)
await tour.exit()

// Steps
tour.addStep(step)
tour.addSteps(steps)
tour.setSteps(steps)
tour.getSteps()
tour.getStep(n)

// State
tour.getCurrentStep()
tour.setCurrentStep(n)
tour.isEnd()
tour.isLastStep()
tour.hasStarted()

// Configuration
tour.setOption(key, value)
tour.setOptions(options)
tour.getOption(key)

// Callbacks
tour.onBeforeChange(callback)
tour.onChange(callback)
tour.onAfterChange(callback)
tour.onStart(callback)
tour.onComplete(callback)
tour.onExit(callback)
tour.onSkip(callback)
tour.onBeforeExit(callback)

// Events
tour.enableKeyboardNavigation()
tour.disableKeyboardNavigation()
tour.enableRefreshOnResize()
tour.disableRefreshOnResize()

// Utility
tour.clone()
tour.isActive()
tour.refresh()
tour.setDontShowAgain(bool)
```

--------------------------------

### Clone Tour Instance

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-tour.md

Creates a deep clone of the tour instance. Use this to create a separate, independent copy of a tour configuration that can be started independently.

```javascript
const tourClone = tour.clone();
await tourClone.start();
```

--------------------------------

### clone()

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-hint.md

Creates a deep clone of the current hint instance, preserving all configurations. This allows for creating independent copies of hint settings.

```APIDOC
## clone()

### Description
Creates a deep clone of the hint instance with the same configuration.

### Method
```typescript
clone(): Hint
```

### Returns
New `Hint` instance

### Example
```javascript
const hintsClone = hints.clone();
await hintsClone.render();
```
```

--------------------------------

### Define Intro.js Tour Steps with JSON

Source: https://github.com/usablica/intro.js/blob/master/example/programmatic/index.html

Use this JavaScript function to define tour steps programmatically using a JSON configuration. It allows specifying elements, tooltip text, and positioning for each step.

```javascript
function startIntro(){
  var intro = introJs.tour();
  intro.setOptions({
    steps: [
      { intro: "Hello world!" },
      { element: document.querySelector('#step1'), intro: "This is a tooltip." },
      { element: document.querySelectorAll('#step2')[0], intro: "Ok, wasn't that fun?", position: 'right' },
      { element: '#step3', intro: 'More features, more fun.', position: 'left' },
      { element: '#step4', intro: "Another step.", position: 'bottom' },
      { element: '#step5', intro: 'Get it, use it.' }
    ]
  });
  intro.start();
}
```

--------------------------------

### Highlighting Elements with Intro.js

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-introjs.md

Use `addStep` to define elements to highlight and provide introductory text. Customize highlight appearance with `highlightClass` and control interaction with `disableInteraction`.

```javascript
const tour = introJs.tour();

tour.setOption('disableInteraction', true); // Prevent interaction
tour.setOption('helperElementPadding', 10); // Space around highlight

tour.addStep({
  element: '.important-button',
  intro: 'This button is important',
  highlightClass: 'custom-highlight'
});

await tour.start();
```

--------------------------------

### Get Current Tour Step

Source: https://github.com/usablica/intro.js/blob/master/_autodocs/api-tour.md

Retrieve the index of the current step. Use this to check the tour's progress or conditionally render UI elements.

```javascript
const current = tour.getCurrentStep();
if (current !== undefined) {
  console.log(`Currently on step ${current + 1}`);
}
```