https://github.com/matej-ch/yii2-page-guide
With this component you can add page guide or assistant to different pages of your application
https://github.com/matej-ch/yii2-page-guide
assistant guide introjs onboarding page-assist-for-users step-by-step yii2 yii2-modules yii2-widget
Last synced: about 1 year ago
JSON representation
With this component you can add page guide or assistant to different pages of your application
- Host: GitHub
- URL: https://github.com/matej-ch/yii2-page-guide
- Owner: Matej-ch
- Created: 2021-11-08T20:10:48.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-06-09T19:54:08.000Z (about 4 years ago)
- Last Synced: 2024-11-11T14:08:58.205Z (over 1 year ago)
- Topics: assistant, guide, introjs, onboarding, page-assist-for-users, step-by-step, yii2, yii2-modules, yii2-widget
- Language: PHP
- Homepage:
- Size: 508 KB
- Stars: 1
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Page guide extension
====================
Ability to add guide or assistant to pages for better user orientation or explaining functionality to user
Installation
------------
The preferred way to install this extension is through [composer](http://getcomposer.org/download/).
Either run
```
php composer.phar require --prefer-dist matejch/yii2-page-guide "^1.0"
```
or add
```
"matejch/yii2-page-guide": "^1.0"
```
to the requirement section of your `composer.json` file.
Setup
-----
#### 1. First migrate table
It is necessary for saving rules on pages
```php
./yii migrate --migrationPath=@vendor/matejch/yii2-page-guide/src/migrations
```
#### 2. Add to modules in your web.php
```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
```php
= \matejch\pageGuide\widget\PageAssist::widget() ?>
```
If you want it to be positioned on right top side, use widget option **_'btnPositionCss'_**
```php
= \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](https://introjs.com/docs/examples/customizing/html-tooltip)
```php
= \matejch\pageGuide\widget\PageAssist::widget(['introOptions' => ['showProgress' => true] ]) ?>
```
### 5. Optional
Widget now also supports intro.js callbacks
Available callbacks are `oncomplete` `onexit` `onbeforeexit` `onchange` `onbeforechange` `onafterchange`
```php
= \matejch\pageGuide\widget\PageAssist::widget(['introCallbacks' => [
'onchange' => new \yii\web\JsExpression("function (targetElement) { alert('next step'); }")]
]) ?>
```
Usage
-----
Access index and form for creation of rules with
```php
{key_of_module_you_use_in_web.php}/page-guide/index
```
#### 1. Create new set of rules
Insert url on your yii web page into first input
Press button go to page that opens url in new window
From this window drag and drop elements you want to use into previous window
You can also set it by hand, just add step number, element id and text
check image of page guide form
#### 2. Add widget to the page you want to use it on
When you are in creator mode, every draggable element is highlighted with blue dashed border
By default, in creator mode all visible input elements on page are set as draggable, and if form is detected on page
also, all elements with form-group class are set.
------
With widget option _**'selectors'**_ (array), you can set multiple class names or ids or other valid _css selectors_
for picking draggable elements in creator mode.
```php
= \matejch\pageGuide\widget\PageAssist::widget(['selectors' => ['.guide','#selectable_id']]) ?>
```
Here is example how it looks, when rules are set and user can display guide/assistant
