Skip to content

Basic Usage

Rudkovskiy edited this page Feb 4, 2020 · 17 revisions

Basic Usage (HTML)

const guideChimp = new GuideChimp('mytour');
guideChimp.start();
<div data-guidechimp-tour="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 link = document.createElement('a');
link.className = 'my-class';
link.setAttribute('href', 'https://example.com');
link.innerText = 'See more';

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() {
                    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: [link],
    }
];

var guideChimp = new GuideChimp(tour);

guideChimp.start();
</script>

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

Clone this wiki locally