Gentle Guide

A dependency-free library to create interactive walkthroughs in web-apps
v1.0.2

Getting Started

Sometimes you need to take your new users by the hand and guide them thru the main aspects of your site. This library creates an interactive guide that solves that in a very basic way: displaying cards with meaningful content and pointing it to a certain element of your site.

Install with npm

Gentle Guide is available to install using npm. 

                        $ npm i @devmanextensions/gentle-guide

Install with Yarn

Gentle Guide is available to install using Yarn. 

                        $ yarn add @devmanextensions/gentle-guide

Gentle Guide is available to install using html <link>. 

                        
<!DOCTYPE html>

<head>
    <link rel="stylesheet" src="gg.min.css" />
    <link rel="stylesheet" src="gg-default-theme.min.css" />
</head>

<body>
    <!-- body -->
    
    <script src="gg.min.js"></script>
</body>

Basic Usage

This is pretty simple: define your cards and pass it to the GGuide object. 

                        
const cards = [
    {
        selector: '#header_title',
        position: 'bottom',
        content: '<strong>Welcome to Gentle Guide!</strong><br />A dependency-free library to create interactive walkthroughs in web-apps. <em>Let\'s start!</em>',
        options: {},
    },
    // more cards
];

const gguide = new GGuide(cards, {
    onFinish: function() {
        console.log("Hi, I'm finish now.");
    }
}).begin();