Skip to content

Basic Usage

R.Brown edited this page Feb 4, 2020 · 17 revisions

Basic Usage (HTML)

const guideChimp = new GuideChimp('mytour');
guideChimp.start();
<div data-guidechimp-name="mytour"
     data-guidechimp-step="1"
     data-guidechimp-title="Title: Step 1"
     data-guidechimp-description="Description: Lorem Ipsum is simply dummy text of the printing and typesetting industry.">
</div>

See in action - TODO

Basic Usage (JavaScript)

<script>
    var tour = [
        {
            element: '[data-id="id-1"]',
            title: 'Try & Buy',
            description: 'This licensing model is useful in case you want to distribute secure trial or demo version of your product. Trial licenses are granted for a short time and allow customers to try the product before buying it.',
            buttons: [
                {
                    title: 'See more',
                    class: 'button_style',
                    onClick: function () {
                        alert("Step button click");
                    }
                }
            ]
        },
        {
            element: '[data-id="id-3"]',
            title: 'Pricing Table',
            description: 'Price and package in minutes without having to re-code or re-engineer back-office systems.',
            buttons: [
                {
                    title: 'See more',
                    class: 'button_style',
                    onClick: function () {
                        alert("Step button click");
                    }
                }
            ]
        }
    ];

    var guideChimp = new GuideChimp(tour);

    setTimeout(function () {
        guideChimp.start();
    }, 500);

</script>

See in action - https://codepen.io/netlicensing/full/QWwXRoQ

Clone this wiki locally