### Complete ES6 Module Setup with Plugins

Source: https://context7.com/labs64/guidechimp/llms.txt

Integrate GuideChimp using ES6 modules, including core library, styles, and multiple plugins. This example demonstrates importing, extending plugins, defining tours, and setting placeholders.

```javascript
// Import core library and styles
import GuideChimp from 'guidechimp';
import 'guidechimp/dist/guidechimp.min.css';

// Import plugins
import beacons from 'guidechimp/dist/plugins/beacons';
import lazyLoading from 'guidechimp/dist/plugins/lazyLoading';
import placeholders from 'guidechimp/dist/plugins/placeholders';

// Enable plugins
GuideChimp.extend(beacons);
GuideChimp.extend(lazyLoading, { timeout: 10000 });
GuideChimp.extend(placeholders);

// Define tour
const tour = [
    {
        element: '#app-header',
        title: 'Welcome, {userName}!',
        description: 'Let us show you around {appName}.',
    },
    {
        element: '#lazy-component',
        title: 'Dynamic Content',
        description: 'This component loads dynamically.',
    }
];

// Create instance
const guideChimp = GuideChimp(tour, {
    position: 'bottom',
    showProgressbar: true
});

// Set placeholders
guideChimp.setPlaceholders({
    userName: 'Developer',
    appName: 'MyApp'
});

// Register events
guideChimp.on('onStart', () => console.log('Tour started'));
guideChimp.on('onComplete', () => console.log('Tour completed'));

// Export for use in components
export default guideChimp;
```

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

### start() Method

Source: https://context7.com/labs64/guidechimp/llms.txt

Starts the tour from a specified step number or index. If no step is specified, it starts from the beginning.

```APIDOC
## start() Method

### Description
Starts the tour from a specified step number or index. If no step is specified, it starts from the beginning.

### Method
`guideChimpInstance.start(step, isIndex)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **step** (Number) - Optional - The step number or index to start the tour from. If omitted, starts from the first step.
- **isIndex** (Boolean) - Optional - If true, `step` is treated as a 0-based index. If false or omitted, `step` is treated as a step number.

### Request Example
```javascript
// Start from the beginning (index 0)
guideChimp.start();

// Start from step index 2 (third step)
guideChimp.start(2, true);

// Start tour on button click
document.getElementById('startTourBtn').addEventListener('click', function() {
    guideChimp.start();
});
```

### Response
#### Success Response (200)
None (This method controls the tour's state).

#### Response Example
None
```

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

### React Example Integration

Source: https://github.com/labs64/guidechimp/blob/master/README.md

This is a sample React application demonstrating the integration of GuideChimp. It requires a GuideChimp tour to be configured and initiated.

```jsx
import React from "react";
import GuideChimp from "@guidechimp/guidechimp-react";

export default function App() {
  return (
    <div className="App">
      <GuideChimp />
      {/* Your application content here */}
    </div>
  );
}
```

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

### Start GuideChimp Tour from Specific Step

Source: https://context7.com/labs64/guidechimp/llms.txt

Initiate a GuideChimp tour, optionally starting from a specific step index or step number. The `start` method can be triggered programmatically or via event listeners, such as a button click.

```javascript
var guideChimp = GuideChimp([
    { element: '#step1', title: 'First Step', description: 'Welcome to the tour!' },
    { element: '#step2', title: 'Second Step', description: 'This is step two.' },
    { element: '#step3', title: 'Final Step', description: 'Tour complete!' }
]);

// Start from beginning (index 0)
guideChimp.start();

// Start from step index 2 (third step)
guideChimp.start(2, true);

// Start from step with specific step number (not index)
guideChimp.start(5, false);

// Start tour on button click
document.getElementById('startTourBtn').addEventListener('click', function() {
    guideChimp.start();
});
```

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

### Install GuideChimp via npm Command

Source: https://github.com/labs64/guidechimp/wiki/Install

Execute this command in your Node.js environment to install the GuideChimp package.

```bash
$ npm install guidechimp
```

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

### GuideChimp Method Examples

Source: https://github.com/labs64/guidechimp/wiki/Configure

Examples demonstrating the usage of GuideChimp methods like stop() and on() for event handling. The stop() method can accept context, which is passed to event listeners.

```javascript
guide.stop({ flag: true });
```

```javascript
guide.on('onStop', (context) => {
    const { flag } = context || {};

    if (flag) {
        // ...
    } else {
        // ... 
    }
});
```

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

### Install GuideChimp as npm Module

Source: https://github.com/labs64/guidechimp/wiki/Install

Add GuideChimp as a dependency in your package.json file for Node.js projects. Run 'npm install' to complete the installation.

```json
"dependencies": {
    "guidechimp": "x.y.z"
}
```

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

### Install Blurred Overlay via CDN

Source: https://github.com/labs64/guidechimp/wiki/Blurred-Overlay-plugin

Include the required scripts and styles, then extend GuideChimp with the plugin.

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

<script src="https://cdn.jsdelivr.net/npm/guidechimp/dist/plugins/blurredOverlay.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/guidechimp/dist/plugins/blurredOverlay.min.css">

<script>
    GuideChimp.extend(guideChimpPluginBlurredOverlay);
</script>
```

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

### Install Blurred Overlay via ES6

Source: https://github.com/labs64/guidechimp/wiki/Blurred-Overlay-plugin

Import the GuideChimp core and the blurred overlay plugin, then extend the instance.

```javascript
import GuideChimp from 'guidechimp';

import blurredOverlay from 'guidechimp/dist/plugins/blurredOverlay';
import 'guidechimp/dist/plugins/blurredOverlay.min.css';

GuideChimp.extend(blurredOverlay);
```

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

### GuideChimp Beacons Plugin Setup and Usage

Source: https://context7.com/labs64/guidechimp/llms.txt

Includes HTML and JavaScript definitions for creating interactive beacons. Ensure GuideChimp core and beacons plugin scripts are included. Beacons can be defined in HTML or JavaScript.

```html
<script src="guidechimp/dist/guidechimp.min.js"></script>
<script src="guidechimp/dist/plugins/beacons.js"></script>
<link rel="stylesheet" href="guidechimp/dist/guidechimp.min.css">

<!-- HTML Beacon Definition -->
<div id="new-feature"
     data-beacon="feature_beacon"
     data-beacon-position="top-right"
     data-beacon-boundary="outer"
     data-beacon-tour="featureTour">
    New Feature!
</div>

<div data-guidechimp-tour="featureTour"
     data-guidechimp-step="1"
     data-guidechimp-title="New Feature"
     data-guidechimp-description="Check out this exciting new capability!">
</div>
```

```javascript
// Enable beacons plugin
GuideChimp.extend(guideChimpPluginBeacons);

// JavaScript Beacon Definition
var beacons = [
    {
        element: '#notifications-bell',
        position: 'top-left',    // top-left, top, top-right, center-left, center, center-right, bottom-left, bottom, bottom-right
        boundary: 'outer',       // outer or inner
        class: 'pulse-beacon',
        onClick: function() {
            alert('Check your notifications!');
        }
    },
    {
        element: '#upgrade-btn',
        position: 'center-right',
        tour: [
            { title: 'Upgrade Available', description: 'Unlock premium features today!' }
        ]
    },
    {
        element: '#help-center',
        position: 'bottom',
        tour: {
            steps: [ { title: 'Need Help?', description: 'Access our knowledge base and support.' } ],
            options: { position: 'left' }
        }
    }
];

// Create and show beacons
var guideChimpBeacons = GuideChimp.beacons(beacons, { boundary: 'outer' });
guideChimpBeacons.showAll();

// Or show beacons from HTML definitions
var htmlBeacons = GuideChimp.beacons();
htmlBeacons.showAll();
```

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

### GuideChimp Event Listener Examples

Source: https://github.com/labs64/guidechimp/wiki/Configure

Registering event listeners for GuideChimp tours. Multiple events can be grouped using the pipe symbol '|' for a single callback.

```javascript
guideChimp.on('onBeforeChange|onAfterChange', (to, from)=>{});
```

```javascript
guideChimp.on('onStart|onStop|onComplete', ()=>{});
```

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

### GuideChimp Plugin Boilerplate

Source: https://github.com/labs64/guidechimp/blob/master/plugins/_boilerplate/README.md

Use this template to start developing a GuideChimp plugin. It demonstrates how to extend the GuideChimp class and factory, and override existing methods.

```javascript
/**
 * 
 * @param {Class} cls GuideChimp class
 * @param {Object} factory GuideChimp factory
 * @param {Array} args optional arguments needed for the plugin; for instance, the options object
 */
module.exports = (cls, factory, ...args) => {

    /**
     * extend GuideChimp() class
     * e.g. add GuideChimp(tour).customMethod()
     */
    cls.prototype.customMethod = () => {};
    
    /**
     * extend GuideChimp factory
     * e.g. add GuideChimp.customMethod()
     */
    factory.customMethod = () => {};

 
     // override existing API
     // e.g. extend GuideChimp().init()
     const parentInit = cls.prototype.init;
     cls.prototype.init = () => {
         parentInit();
 
         // custom code
         //... 
     };

    // Override static method
    const parentDefaultOptions = cls.prototype.getDefaultOptions;
       cls.getDefaultOptions = () => ({
           ...parentDefaultOptions(),
           // custom options
           // ... 
       });
 };
```

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

### Register GuideChimp Event Listeners

Source: https://context7.com/labs64/guidechimp/llms.txt

The `on()` method allows you to register callbacks for various tour lifecycle events like start, step changes, completion, and stop. You can listen to multiple events by separating them with a pipe '|'.

```javascript
var guideChimp = GuideChimp([
    { element: '#intro', title: 'Welcome', description: 'Tour introduction' },
    { element: '#main', title: 'Main Content', description: 'Core features' },
    { element: '#end', title: 'Finish', description: 'Tour complete!' }
]);

// Listen for tour start
guideChimp.on('onStart', function() {
    console.log('Tour started');
    analytics.track('tour_started');
});

// Listen for step changes with step data
guideChimp.on('onBeforeChange', function(toStep, fromStep) {
    console.log('Changing from:', fromStep?.title, 'to:', toStep.title);
    // Return false to prevent step change
    if (toStep.element === '#restricted') {
        return false;
    }
});

guideChimp.on('onAfterChange', function(toStep, fromStep) {
    console.log('Now showing step:', toStep.title);
    document.getElementById('stepIndicator').textContent = toStep.title;
});

// Listen for navigation events
guideChimp.on('onPrevious', function(previousStep, currentStep) {
    console.log('Going back to:', previousStep.title);
});

guideChimp.on('onNext', function(nextStep, currentStep) {
    console.log('Advancing to:', nextStep.title);
});

// Listen for tour completion
guideChimp.on('onComplete', function() {
    console.log('Tour completed!');
    localStorage.setItem('tourCompleted', 'true');
});

// Listen for tour stop (includes early exits)
guideChimp.on('onStop', function(context) {
    console.log('Tour stopped', context);
    if (context?.flag) {
        // Handle custom flag from stop() call
    }
});

// Multiple events with pipe separator
guideChimp.on('onStart|onStop|onComplete', function() {
    console.log('Tour state changed');
});

guideChimp.start();
```

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

### Configure Lazy Loading Plugin

Source: https://github.com/labs64/guidechimp/wiki/Lazy-loading-plugin

Extend GuideChimp with the lazy loading plugin, customizing timeout and frequency. Ensure the plugin is installed and configured via the Wiki page.

```javascript
GuideChimp.extend(guideChimpPluginLazyLoading, { timeout: 15000, frequency: 500 });
```

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

### JavaScript Initialization for HTML Defined Tours

Source: https://github.com/labs64/guidechimp/wiki/Configure

Initialize GuideChimp in JavaScript when using HTML attributes to define tour steps. This example shows initializing for a single tour named 'tour'.

```javascript
// js
var guideChimp = GuideChimp('tour');
```

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

### Initialize GuideChimp with Options

Source: https://github.com/labs64/guidechimp/wiki/Configure

Initialize GuideChimp with a tour and custom options to control its behavior and appearance. Refer to the options list for available settings.

```javascript
var guideChimp = GuideChimp(tour, options);
```

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

### Initialize GuideChimp

Source: https://github.com/labs64/guidechimp/wiki/Configure

Initializes a new GuideChimp tour instance using a tour configuration.

```APIDOC
## Initialize GuideChimp

### Description
Initializes the GuideChimp library with a specified tour configuration.

### Parameters
- **tour** (string/object) - Required - The name of the tour if using HTML configuration or a tour JavaScript object.
- **options** (object) - Optional - Configuration options for tour behavior and look-and-feel.

### Request Example
```javascript
var guideChimp = GuideChimp(tour, options);
```
```

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

### Initialize GuideChimp with JavaScript Tour Definition

Source: https://context7.com/labs64/guidechimp/llms.txt

Create a new GuideChimp instance by providing a JavaScript array of tour steps and an optional configuration object. The tour steps define elements, titles, descriptions, and positions. Options control behavior like keyboard navigation, exit conditions, and UI elements.

```javascript
var tour = [
    {
        element: '#welcome-section',
        title: 'Welcome!',
        description: 'This is your dashboard overview.',
        position: 'bottom'
    },
    {
        element: '#sidebar-menu',
        title: 'Navigation',
        description: 'Use this menu to navigate between sections.',
        position: 'right'
    },
    {
        element: '#user-profile',
        title: 'Your Profile',
        description: 'Click here to manage your account settings.',
        position: 'left'
    }
];

var options = {
    position: 'bottom',           // Default tooltip position: top, bottom, left, right
    useKeyboard: true,            // Enable arrow key navigation
    exitEscape: true,             // Stop tour on Escape key
    exitOverlay: true,            // Stop tour on overlay click
    showPagination: true,         // Show step pagination dots
    showProgressbar: true,        // Show progress bar
    interaction: true,            // Allow interaction with highlighted elements
    padding: 10,                  // Padding around highlighted element
    scrollPadding: 10,            // Padding when scrolling to element
    scrollBehavior: 'auto'        // Scroll behavior: auto, smooth
};

var guideChimp = GuideChimp(tour, options);
```

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

### GuideChimp Constructor

Source: https://context7.com/labs64/guidechimp/llms.txt

Initializes a new GuideChimp instance with tour steps and configuration options. The tour can be defined using an array of step objects or via HTML data attributes.

```APIDOC
## GuideChimp Constructor

### Description
Creates a new GuideChimp instance with tour steps and optional configuration options.

### Method
`GuideChimp(tour, options)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **tour** (Array<Object>) - Required - An array of step objects defining the tour.
  - **element** (String) - Required - CSS selector for the element to highlight.
  - **title** (String) - Optional - Title for the tooltip.
  - **description** (String) - Optional - Description for the tooltip.
  - **position** (String) - Optional - Tooltip position ('top', 'bottom', 'left', 'right').
- **options** (Object) - Optional - Configuration options for the tour.
  - **position** (String) - Default tooltip position.
  - **useKeyboard** (Boolean) - Enable keyboard navigation.
  - **exitEscape** (Boolean) - Stop tour on Escape key.
  - **exitOverlay** (Boolean) - Stop tour on overlay click.
  - **showPagination** (Boolean) - Show step pagination dots.
  - **showProgressbar** (Boolean) - Show progress bar.
  - **interaction** (Boolean) - Allow interaction with highlighted elements.
  - **padding** (Number) - Padding around the highlighted element.
  - **scrollPadding** (Number) - Padding when scrolling to an element.
  - **scrollBehavior** (String) - Scroll behavior ('auto', 'smooth').

### Request Example
```javascript
var tour = [
    {
        element: '#welcome-section',
        title: 'Welcome!',
        description: 'This is your dashboard overview.',
        position: 'bottom'
    },
    {
        element: '#sidebar-menu',
        title: 'Navigation',
        description: 'Use this menu to navigate between sections.',
        position: 'right'
    }
];

var options = {
    position: 'bottom',
    useKeyboard: true,
    exitEscape: true,
    exitOverlay: true,
    showPagination: true,
    showProgressbar: true,
    interaction: true,
    padding: 10,
    scrollPadding: 10,
    scrollBehavior: 'auto'
};

var guideChimp = GuideChimp(tour, options);
```

### Response
#### Success Response (200)
- **guideChimpInstance** (Object) - The initialized GuideChimp instance.

#### Response Example
```javascript
// guideChimpInstance is the returned object
console.log(guideChimpInstance);
```
```

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

### Configure GuideChimp Tour via JavaScript

Source: https://github.com/labs64/guidechimp/wiki/Configure

Defines a tour array with step properties and initializes the GuideChimp instance.

```javascript
var tour = [
    {
        element: '#element-id',
        title: 'Step title',
        description: 'Step description',
        buttons: [
            {
                title: 'See more',
                class: 'tour-button',
                onClick: function () {
                    alert("Step button click");
                }
            }
        ]
    },
];
var guideChimp = GuideChimp(tour);
guideChimp.start();
```

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

### Initialize GuideChimp with Vue Router Plugin

Source: https://github.com/labs64/guidechimp/wiki/VueJS-Router-plugin

Extend GuideChimp with the vueRouter plugin and configure Vue instance for tour integration. Ensure the router instance is passed to the plugin.

```javascript
import Vue from 'vue';
import GuideChimp from 'guidechimp';
import vueRouterPlugin from 'guidechimp/dist/plugins/vueRouter';
import router from './router';

GuideChimp.extend(vueRouterPlugin, router);

Vue.use({
    install(V) {
        V.prototype.$guideChimp = GuideChimp;
    },
});

```

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

### Initialize Tour via JavaScript Array

Source: https://github.com/labs64/guidechimp/wiki/Basic-Usage

Define tour steps programmatically by passing an array of objects to the GuideChimp constructor.

```html
<script>
// init GuideChimp
var guideChimp = GuideChimp([{
    element: '#step1',
    title: 'Step 1',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
}]);

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

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

### Configure GuideChimp triggers with HTML and JavaScript

Source: https://github.com/labs64/guidechimp/wiki/Triggers-plugin

Demonstrates setting up global and step-specific triggers using CSS selectors within a tour configuration.

```html
<div class="next">Next</div>
<div class="previous">Previous</div>
<div class="stop">Stop</div>

<div id="step1">First step</div>
<div id="step2">First step</div>
<div id="step3">Third step</div>
<div><button id="startTour" class="start-tour">Start Tour</button></div>
<script>
GuideChimp.extend(guideChimpPluginTriggers);

     var tour = [
        {
            element: '#step1',
            title: 'Step 1',
            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            // step triggers
            triggers: {
                next: '#step1',
            },       
        },
        {
            element: '#step2',
            title: 'Step 2',
            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
             // step triggers
             triggers: {
                 next: '#step2',
             },  
        },
        {
            element: '#step3',
            title: 'Step 3',
            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            // step triggers
            triggers: {
                 stop: '#step3',
            },  
        },
    ];

    var guide = GuideChimp(tour, {
        // global triggers
        triggers: {
            next: '.next',
            previous: '.previous',
            stop: '.stop',
        },   
    });

    document.getElementById('startTour').onclick = () => {
        guide.start();
    }
</script>
```

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

### Initialize MultiPage Tour on First Page

Source: https://github.com/labs64/guidechimp/wiki/MultiPage-plugin

Demonstrates initializing a multi-page tour on the first page, including the tour steps and the automatic continuation logic.

```html
<div id="step1">First step</div>
<div id="step3">Third step</div>
<div>
    <button id="startTour" class="start-tour">Start Tour</button>
</div>
<script>
    GuideChimp.extend(guideChimpPluginMultiPage);

    var tour = [
        {
            element: '#step1',
            title: 'Step 1',
            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            multiPage: {
                page: 'first-page.html',
            },
        },
        {
            element: '#step2',
            title: 'Step 2',
            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            multiPage: {
                page: 'second-page.html',
            },
        },
        {
            element: '#step3',
            title: 'Step 3',
            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            multiPage: {
                page: 'first-page.html',
            },
        },
    ];

    var guide = GuideChimp(tour);

    // detects whether the tour should be continued and automatically continues the tour on the right step
    guide.continue();

    document.getElementById('startTour').onclick = () => {
        guide.start();
    }
</script>
```

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

### Initialize GuideChimp

Source: https://github.com/labs64/guidechimp/wiki/Configure

Basic initialization of GuideChimp with a tour name or object. This is the first step to using the library.

```javascript
var guideChimp = GuideChimp(tour);
```

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

### Enable GuideChimp Plugins as HTML Dependencies

Source: https://github.com/labs64/guidechimp/wiki/Configure

Loads plugin scripts via script tags and initializes them using the global plugin namespace.

```html
<script src="guidechimp/dist/guidechimp.min.js"></script>
<script src="guidechimp/dist/plugins/licensing.js"></script>
<script src="guidechimp/dist/plugins/beacons.js"></script>
<script src="guidechimp/dist/plugins/multiPage.js"></script>
<script src="guidechimp/dist/plugins/googleAnalytics.js"></script>
<script src="guidechimp/dist/plugins/triggers.js"></script>
<script src="guidechimp/dist/plugins/lazyLoading.js"></script>

<!-- Enable plugin as guideChimpPlugin{PluginName} -->
<script>
    GuideChimp.extend(guideChimpPluginLicensing, { id: %CUSTOMER_NUMBER% });
    GuideChimp.extend(guideChimpPluginBeacons);
    GuideChimp.extend(guideChimpPluginMultiPage);
    GuideChimp.extend(guideChimpPluginGoogleAnalytics);
    GuideChimp.extend(guideChimpPluginTriggers);
    GuideChimp.extend(guideChimpPluginLazyLoading);
</script>
```

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

### Configure Templates via JavaScript

Source: https://github.com/labs64/guidechimp/wiki/Templating-plugin

Demonstrates how to apply custom templates to a specific GuideChimp instance or globally.

```javascript
const guide = GuideChimp(tour);

guide.setTmpl({
   title: '<span class="title">{{ title }}</span>',
   description: '<span class="description">{{ description}}</span>',
});

// It is equal
guide.setTitleTmpl('<span class="title">{{ title }}</span>');
guide.setDescriptionTmpl('<span class="description">{{ description}}</span>');
```

```javascript
GuideChimp.setTmpl({
   title: '<span class="title">{{ title }}</span>',
   description: '<span class="description">{{ description}}</span>',
});

// It is equal
GuideChimp.setTitleTmpl('<span class="title">{{ title }}</span>');
GuideChimp.setDescriptionTmpl('<span class="description">{{ description}}</span>');
```

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

### Initialize Tour via HTML Attributes

Source: https://github.com/labs64/guidechimp/wiki/Basic-Usage

Define tour steps directly in the DOM using data-guidechimp attributes. Requires the GuideChimp library to be initialized with the corresponding tour ID.

```javascript
const guideChimp = GuideChimp('mytour');
guideChimp.start();
```

```html
<div data-guidechimp-tour="mytour"
     data-guidechimp-step="1"
     data-guidechimp-title="Step 1"
     data-guidechimp-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
</div>
```

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

### Configure Licensing Plugin

Source: https://github.com/labs64/guidechimp/wiki/Licensing-plugin

Extend GuideChimp with the licensing plugin, providing your customer number or email for license validation. Replace 'CUSTOMER-NUMBER|EMAIL' with your actual credentials.

```javascript
GuideChimp.extend(guideChimpPluginLicensing, { id: "CUSTOMER-NUMBER|EMAIL" });
...
GuideChimp.extend(guideChimpPlugin[NAME]);
```

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

### Define Global and Step Placeholders in GuideChimp

Source: https://github.com/labs64/guidechimp/wiki/Placeholders-plugin

Demonstrates how to use global placeholders via setPlaceholders and step-specific placeholders within the tour definition.

```javascript
var tour = [
  {
    title: 'Welcome to {companyName}',
    description: 'Welcome to {companyName}',
  },
  /* Output:
   * { 
   *      title: 'Welcome to Labs64',
   *      description: 'Welcome to Labs64',
   * }
   */
  {
    element: '#logo-{id}',
    title: 'Thank you {username}',
    description: 'Thank you {username} for choosing {productName}!',
    // step placeholders
    placeholders: {
      id: 'main'
    }
  },
  /* Output:
   * {
   *      element: '#logo-main',
   *      title: 'Thank you John Doe',
   *      description: 'Thank you John Doe for choosing GuideChimp!',
   * }
   */
]

var guide = GuideChimp(tour);

// global placeholders
guide.setPlaceholders({
  username: 'John Doe',
  companyName: 'Labs64',
  productName: 'GuideChimp',
});
```

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

### Initialize MultiPage Tour on Second Page

Source: https://github.com/labs64/guidechimp/wiki/MultiPage-plugin

Shows the tour initialization on the second page, mirroring the structure from the first page to maintain tour continuity.

```html
<div id="step2">Second step</div>

<script>
    GuideChimp.extend(guideChimpPluginMultiPage);

    var tour = [
        {
            element: '#step1',
            title: 'Step 1',
            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            multiPage: {
                page: 'first-page.html',
            },
        },
        {
            element: '#step2',
            title: 'Step 2',
            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            multiPage: {
                page: 'second-page.html',
            },
        },
        {
            element: '#step3',
            title: 'Step 3',
            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            multiPage: {
                page: 'first-page.html',
            },
        },
    ];

    var guide = GuideChimp(tour);

    // detects whether the tour should be continued and automatically continues the tour on the right step
    guide.continue();
</script>
```

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

### Enable GuideChimp Plugins as ES6 Modules

Source: https://github.com/labs64/guidechimp/wiki/Configure

Imports plugin modules and registers them using the GuideChimp.extend method.

```javascript
// core
import GuideChimp from 'guidechimp';

// plugins
import licensing from 'guidechimp/dist/plugins/licensing';
import beacons from 'guidechimp/dist/plugins/beacons';
import multiPage from 'guidechimp/dist/plugins/multiPage';
import googleAnalytics from 'guidechimp/dist/plugins/googleAnalytics';
import triggers from 'guidechimp/dist/plugins/triggers';
import lazyLoading from 'guidechimp/dist/plugins/lazyLoading';
// ...

// enable plugins
GuideChimp.extend(licensing, { id: %CUSTOMER_NUMBER% });
GuideChimp.extend(beacons);
GuideChimp.extend(multiPage);
GuideChimp.extend(googleAnalytics);
GuideChimp.extend(triggers);
GuideChimp.extend(lazyLoading);
```

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

### Configure Custom Placeholder Template

Source: https://github.com/labs64/guidechimp/wiki/Placeholders-plugin

Illustrates how to redefine the placeholder template using GuideChimp.extend to avoid conflicts with other libraries.

```javascript
GuideChimp.extend(guideChimpPluginPlaceholders, {
  template: '%*%'
});

var tour = [
  {
    title: 'Welcome to %companyName%',
    description: 'Welcome to %companyName%',
    placeholders: {
      companyName: 'Labs64'
    }
  }
]

var guide = GuideChimp(tour);
```

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

### GuideChimp Methods

Source: https://github.com/labs64/guidechimp/wiki/Configure

Methods to control the flow and state of the tour.

```APIDOC
## GuideChimp Methods

### Description
Methods used to start, navigate, and stop the tour.

### Methods
- **start(stepNumber, useIndex)** - Starts the tour from a specific step.
- **go(stepNumber, useIndex)** - Navigates to a specific step.
- **previous()** - Moves to the previous step.
- **next()** - Moves to the next step.
- **stop(context)** - Stops the tour, optionally passing a context object.
- **on(event, callback)** - Registers an event listener for a tour event.

### Example
```javascript
guide.stop({ flag: true });

guide.on('onStop', (context) => {
    const { flag } = context || {};
});
```
```

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

### GuideChimp Lazy-Loading Plugin Configuration

Source: https://context7.com/labs64/guidechimp/llms.txt

Configures the lazy-loading plugin to wait for dynamically loaded elements before showing tour steps. Customizes timeout and frequency for element checks.

```javascript
import GuideChimp from 'guidechimp';
import lazyLoading from 'guidechimp/dist/plugins/lazyLoading';

// Enable lazy-loading with custom timeout
GuideChimp.extend(lazyLoading, {
    timeout: 15000,    // Wait up to 15 seconds for element
    frequency: 100     // Check every 100ms
});

var tour = [
    {
        element: '#static-header',
        title: 'Welcome',
        description: 'This element exists immediately.'
    },
    {
        element: '#lazy-loaded-widget',  // This element loads asynchronously
        title: 'Dynamic Widget',
        description: 'This widget loads after an API call completes.'
    },
    {
        element: '#route-specific-content',  // Appears after route change
        title: 'Route Content',
        description: 'This content appears when you navigate to a new page.'
    }
];

var guideChimp = GuideChimp(tour);
guideChimp.start();
```

```javascript
// Alternative: Manual lazy-loading with onBeforeChange
var manualTour = [
    {
        element: '#async-element',
        title: 'Async Element',
        description: 'Loaded dynamically',
        onBeforeChange: function(toStep, fromStep) {
            return new Promise(function(resolve) {
                var checkInterval = setInterval(function() {
                    if (document.querySelector('#async-element')) {
                        clearInterval(checkInterval);
                        resolve(true);
                    }
                }, 100);

                // Timeout after 10 seconds
                setTimeout(function() {
                    clearInterval(checkInterval);
                    resolve(false);
                }, 10000);
            });
        }
    }
];
```

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

### GuideChimp Placeholder Methods

Source: https://github.com/labs64/guidechimp/wiki/Placeholders-plugin

Methods for managing global placeholders within the GuideChimp tour instance.

```APIDOC
## Placeholder Management Methods

### setPlaceholders(placeholders)
- **placeholders** (Object) - Required - Overwrites all global placeholders with the provided object.

### addPlaceholder(key, value)
- **key** (string) - Required - The placeholder key (without braces).
- **value** (string or number) - Required - The value to assign to the key.

### addPlaceholders(placeholders)
- **placeholders** (Object) - Required - Adds multiple global placeholders from a key:value object.

### removePlaceholder(key)
- **key** (string) - Required - Removes a specific global placeholder by key.

### removePlaceholders(keys)
- **keys** (Array or null) - Optional - An array of keys to remove. If null or not specified, all global placeholders are removed.
```

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

### go() Method

Source: https://context7.com/labs64/guidechimp/llms.txt

Navigates directly to a specific step during an active tour, identified by its index or step number.

```APIDOC
## go() Method

### Description
Navigates directly to a specific step during an active tour, identified by its index or step number.

### Method
`guideChimpInstance.go(step, isIndex)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **step** (Number) - Required - The step number or index to navigate to.
- **isIndex** (Boolean) - Required - If true, `step` is treated as a 0-based index. If false, `step` is treated as a step number.

### Request Example
```javascript
// Go to step by index (0-based)
guideChimp.go(1, true);  // Goes to second step (index 1)

// Go to step by step number
guideChimp.go(30, false);  // Goes to step with step: 30

// Create skip buttons for navigation
document.getElementById('skipToEnd').addEventListener('click', function() {
    guideChimp.go(2, true);
});
```

### Response
#### Success Response (200)
None (This method controls the tour's state).

#### Response Example
None
```

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

### GuideChimp Tour Configuration

Source: https://github.com/labs64/guidechimp/wiki/Configure

Defines the structure of a tour step object used to initialize a GuideChimp tour.

```APIDOC
## JavaScript Tour Configuration

### Description
Configures a tour step using a JavaScript object. Each step defines the target element, content, and interaction behavior.

### Parameters
- **element** (string/HTMLElement) - Optional - Query selector string or HTML element for the tooltip target.
- **step** (number) - Optional - Step number.
- **title** (string) - Required - Tour step title.
- **description** (string) - Required - Tour step description.
- **position** (string) - Optional - Position of the tour steps.
- **interaction** (boolean) - Optional - Allow interaction with the highlighted components.
- **buttons** (array) - Optional - Custom action buttons.
- **scrollPadding** (number) - Optional - Override global padding between top screen border and highlighted element.
- **onBeforeChange()** (function) - Optional - Listener function called before the step change.
- **onAfterChange()** (function) - Optional - Listener function called after the step change.

### Request Example
var tour = [{
    element: '#element-id',
    title: 'Step title',
    description: 'Step description',
    buttons: [{
        title: 'See more',
        class: 'tour-button',
        onClick: function () {
            alert("Step button click");
        }
    }]
}];
var guideChimp = GuideChimp(tour);
guideChimp.start();
```

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

### Configure Beacons via JavaScript

Source: https://github.com/labs64/guidechimp/wiki/Beacons-plugin

Initialize beacons using a JavaScript array of configuration objects. Avoid using the '-' symbol in beacon identifiers.

```javascript
GuideChimp.extend(guideChimpPluginBeacons);

const beacons = [
    {
        element: '#try-and-buy',
        position: 'top-left',
        onClick() {
            alert('Beacon clicked');
        }
    },
    {
        element: '#subscription',
        position: 'bottom',
        tour: [{ title: 'Title', description: 'Description' }],
    },
    {
        element: '#pricing-table',
        position: 'center',
        tour: { steps: [{ title: 'Title', description: 'Description' }], options: { position: 'left' } },
    }
];

const guideChimpBeacons = GuideChimp.beacons(beacons, { boundary: 'outer' });
guideChimpBeacons.showAll();
```

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

### previous() and next() Methods

Source: https://context7.com/labs64/guidechimp/llms.txt

Methods to navigate between adjacent tour steps.

```APIDOC
## previous() and next() Methods

### Description
Methods to navigate between adjacent tour steps.

### Method
`guideChimpInstance.previous()`
`guideChimpInstance.next()`

### Parameters
None

### Request Example
```javascript
// Start the tour
guideChimp.start();

// Move to next step
guideChimp.next();

// Move to previous step
guideChimp.previous();

// Custom navigation buttons
document.getElementById('customNext').addEventListener('click', function() {
    guideChimp.next();
});

document.getElementById('customPrev').addEventListener('click', function() {
    guideChimp.previous();
});
```

### Response
#### Success Response (200)
None (These methods control the tour's state).

#### Response Example
None
```

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

### Import GuideChimp as ES6 Module

Source: https://github.com/labs64/guidechimp/wiki/Install

Import the GuideChimp library and its CSS file when using ES6 modules in your project.

```javascript
import GuideChimp from 'guidechimp';
import 'guidechimp/dist/guidechimp.min.css';
```

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

### GuideChimp Tour with IFrames Element

Source: https://github.com/labs64/guidechimp/wiki/IFrames-plugin

Configure a GuideChimp tour step to highlight an element within nested IFrames. Specify the element's selector and an array of parent IFrame selectors in the 'iFrames' property.

```javascript
GuideChimp.extend(guideChimpPluginIFrames);

var tour = [{
    element: '#first-step-element',
    iFrames: ['#iframe1', '#iframe2', '#iframes3'],
    title: 'First Step Element',
}];

var guide  = GuideChimp(tour);
guide.start();
```

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

### Define GuideChimp Tour with HTML Data Attributes

Source: https://context7.com/labs64/guidechimp/llms.txt

Configure tour steps directly within HTML elements using `data-guidechimp-*` attributes. This method is useful for defining tours without writing JavaScript for step configuration.

```html
<!-- Define tour steps with data attributes -->
<div id="header"
     data-guidechimp-tour="onboarding"
     data-guidechimp-step="1"
     data-guidechimp-title="Welcome to Our App"
     data-guidechimp-description="This is your main navigation header. Use it to access all features.">
    <nav>Header Navigation</nav>
</div>

<div id="sidebar"
     data-guidechimp-tour="onboarding"
     data-guidechimp-step="2"
     data-guidechimp-title="Sidebar Menu"
     data-guidechimp-description="<strong>Quick access</strong> to your most used features."
     data-guidechimp-position="right">
    <ul>Sidebar Content</ul>
</div>

<div id="main-content"
     data-guidechimp-tour="onboarding"
     data-guidechimp-step="3"
     data-guidechimp-title="Main Content Area"
     data-guidechimp-description="Your primary workspace for all activities."
     data-guidechimp-position="top"
     data-guidechimp-interaction="false"
     data-guidechimp-scrollPadding="50">
    <main>Main Content</main>
</div>

<button id="startTour">Start Tour</button>

<script src="guidechimp/dist/guidechimp.min.js"></script>
<link rel="stylesheet" href="guidechimp/dist/guidechimp.min.css">
<script>
    // Initialize tour by name
    var guideChimp = GuideChimp('onboarding');

    document.getElementById('startTour').onclick = function() {
        guideChimp.start();
    };
</script>
```

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

### Define Tour Steps with Custom Buttons and Callbacks

Source: https://context7.com/labs64/guidechimp/llms.txt

Create complex tour steps using a JavaScript array, including custom action buttons, interaction settings, and lifecycle callbacks.

```javascript
var tour = [
    {
        element: '#dashboard',
        step: 1,
        title: 'Dashboard Overview',
        description: 'Your personalized dashboard shows key metrics and recent activity.',
        position: 'bottom',
        interaction: true,
        scrollPadding: 20,
        showPagination: true,
        showProgressbar: true,
        showNavigation: true,

        // Custom action buttons
        buttons: [
            {
                tagName: 'button',
                title: 'Learn More',
                class: 'btn btn-secondary',
                onClick: function() {
                    window.open('/docs/dashboard', '_blank');
                }
            },
            {
                tagName: 'a',
                title: 'Skip Tutorial',
                class: 'btn btn-link',
                onClick: function() {
                    this.stop();
                }
            }
        ],

        // Step-level callbacks
        onBeforeChange: function(toStep, fromStep) {
            console.log('About to show dashboard step');
            // Return false to prevent showing this step
        },
        onAfterChange: function(toStep, fromStep) {
            console.log('Dashboard step now visible');
        }
    },
    {
        element: '#analytics-chart',
        step: 2,
        title: 'Analytics',
        description: 'View detailed analytics and performance metrics here.',
        position: 'left',
        interaction: false,  // Prevent clicking the chart during tour

        onNext: function(nextStep, currentStep) {
            // Called before moving to next step
            return true;  // Allow navigation
        },
        onPrevious: function(prevStep, currentStep) {
            // Called before moving to previous step
            return true;
        }
    },
    {
        // Floating tooltip (no element specified)
        title: 'Tour Complete!',
        description: 'You have completed the dashboard tour. Start exploring!',
        buttons: [
            {
                title: 'Finish',
                class: 'btn btn-primary',
                onClick: function() {
                    this.stop();
                    showConfetti();
                }
            }
        ]
    }
];

var guideChimp = GuideChimp(tour, {
    position: 'bottom',
    padding: 12
});

guideChimp.start();
```

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

### Configure Multiple Tours on Shared Elements

Source: https://context7.com/labs64/guidechimp/llms.txt

Use data-guidechimp-tour attributes to associate a single HTML element with multiple tours, specifying step order and content per tour.

```html
<!-- Element used in multiple tours -->
<div id="feature-panel"
     data-guidechimp-tour="quickstart,advanced"
     data-guidechimp-quickstart-step="1"
     data-guidechimp-advanced-step="3"
     data-guidechimp-title="Feature Panel"
     data-guidechimp-quickstart-description="Basic overview of features"
     data-guidechimp-advanced-description="Advanced configuration options and power user settings"
     data-guidechimp-position="bottom">
    Feature Panel Content
</div>

<div id="settings"
     data-guidechimp-tour="quickstart,advanced"
     data-guidechimp-quickstart-step="2"
     data-guidechimp-advanced-step="1"
     data-guidechimp-title="Settings"
     data-guidechimp-quickstart-description="Adjust basic preferences"
     data-guidechimp-advanced-description="Deep dive into all configuration options">
    Settings Panel
</div>

<script>
    // Start quick tour
    var quickTour = GuideChimp('quickstart');
    document.getElementById('quickBtn').onclick = () => quickTour.start();

    // Start advanced tour
    var advancedTour = GuideChimp('advanced');
    document.getElementById('advancedBtn').onclick = () => advancedTour.start();
</script>
```

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

### Include Licensing Plugin Script

Source: https://github.com/labs64/guidechimp/wiki/Licensing-plugin

Add this script tag to your HTML to include the GuideChimp licensing plugin. Ensure it's loaded before other commercial plugins.

```html
<script src="https://cdn.jsdelivr.net/npm/guidechimp@3/dist/plugins/licensing.js"></script>
```

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

### GuideChimp Events

Source: https://github.com/labs64/guidechimp/wiki/Configure

Lifecycle events that can be hooked into during the tour execution.

```APIDOC
## GuideChimp Events

### Description
Events triggered during the lifecycle of a tour.

### Events
- **onStart**: Called at the start of the tour.
- **onBeforeChange**: Called before the step change.
- **onAfterChange**: Called after the step change.
- **onStop**: Called when the tour is stopped.
- **onComplete**: Called when the tour is completed.
- **onPrevious**: Called before the tour returns to the previous step.
- **onNext**: Called before the tour moves to the next step.

### Example
```javascript
guideChimp.on('onBeforeChange|onAfterChange', (to, from)=>{});
guideChimp.on('onStart|onStop|onComplete', ()=>{});
```
```

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

### Include GuideChimp Files in HTML

Source: https://github.com/labs64/guidechimp/wiki/Install

Manually include the compiled GuideChimp JavaScript and CSS files in your HTML page. This method is recommended for simpler integrations.

```html
<script src="guidechimp/dist/guidechimp.min.js"></script>
<link rel="stylesheet" href="guidechimp/dist/guidechimp.min.css">
```

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

### Navigate to Specific Step with go() Method

Source: https://context7.com/labs64/guidechimp/llms.txt

Directly navigate to a particular step within an active GuideChimp tour using its step index or step number. This method is useful for implementing custom navigation logic, like skip buttons.

```javascript
var guideChimp = GuideChimp([
    { step: 10, element: '#intro', title: 'Introduction', description: 'Start here' },
    { step: 20, element: '#features', title: 'Features', description: 'Key features' },
    { step: 30, element: '#pricing', title: 'Pricing', description: 'Our plans' }
]);

guideChimp.start();

// Go to step by index (0-based)
guideChimp.go(1, true);  // Goes to second step (index 1)

// Go to step by step number
guideChimp.go(30, false);  // Goes to step with step: 30

// Create skip buttons for navigation
document.getElementById('skipToEnd').addEventListener('click', function() {
    guideChimp.go(2, true);
});
```

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

### Define Step Description Template

Source: https://github.com/labs64/guidechimp/wiki/Templating-plugin

Uses the description variable to render the current step description.

```html
<div if="description"
     html="{{ description }}"
     class="gc-description"></div>
```