Setup

1. First migrate table

It is necessary for saving rules on pages

./yii migrate --migrationPath=@vendor/matejch/yii2-page-guide/src/migrations

2. Add to modules in your web.php

'pageGuide' => [
    'class' => \matejch\pageGuide\PageGuide::class,
]

3. Add widget on pages you want to use page guide on

By default, it is rendered in place you put widget on

 <?= \matejch\pageGuide\widget\PageAssist::widget() ?>

You can adjust postion of widget by setting btnPositionCss

<?= \matejch\pageGuide\widget\PageAssist::widget(['btnPositionCss' => 'position: fixed;top: 100px;right: -2px;']) ?>

4. Additional intro options from intro.js library

If you want you can add intro.js option into widget with attribute introOptions

More options here intro.js

Example with progress bar

<?= \matejch\pageGuide\widget\PageAssist::widget(['introOptions' => ['showProgress' => true] ]) ?>

5. Selectors options, when creating guide

You can set selectors option in widget that takes array of css selectors

Example

<?= \matejch\pageGuide\widget\PageAssist::widget(['selectors' => ['.form-group','.float-left','#name']]) ?>

If no selectors are set, widget attempts to find important elements, in following way:

1. inputs input:not([type=hidden])
2. if form is on page then also .form-group elements are selected

6. Callbacks

Available callbacks for intro.js and widget are

oncomplete onexit onbeforeexit onchange onbeforechange onafterchange

Example of usage:

<?= \matejch\pageGuide\widget\PageAssist::widget(['introCallbacks' => [
    'onchange' => new \yii\web\JsExpression("function (targetElement) { console.log('next step'); }"),
    'oncomplete' => new \yii\web\JsExpression("function () { console.log('Intro completed'); }"),
    'onexit' => new \yii\web\JsExpression("function () { console.log('Exit by pressing ESC or Clicking overlay'); }"),
    'onbeforeexit' => new \yii\web\JsExpression("function () { console.log('Before closing intro'); }"),
    'onbeforechange' => new \yii\web\JsExpression("function (newStepElement) { console.log('Before new step start'); }"),
    'onafterchange' => new \yii\web\JsExpression("function (newStepElement) { console.log('After new step start'); }"),

]
]) ?>