{"id":20281956,"url":"https://github.com/matej-ch/yii2-page-guide","last_synced_at":"2025-04-11T07:58:33.110Z","repository":{"id":38187120,"uuid":"425979105","full_name":"Matej-ch/yii2-page-guide","owner":"Matej-ch","description":"With this component you can add page guide or assistant to different pages of your application","archived":false,"fork":false,"pushed_at":"2022-06-09T19:54:08.000Z","size":520,"stargazers_count":1,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-11T14:08:58.205Z","etag":null,"topics":["assistant","guide","introjs","onboarding","page-assist-for-users","step-by-step","yii2","yii2-modules","yii2-widget"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Matej-ch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-11-08T20:10:48.000Z","updated_at":"2022-05-20T20:14:24.000Z","dependencies_parsed_at":"2022-08-18T07:16:49.777Z","dependency_job_id":null,"html_url":"https://github.com/Matej-ch/yii2-page-guide","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matej-ch%2Fyii2-page-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matej-ch%2Fyii2-page-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matej-ch%2Fyii2-page-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matej-ch%2Fyii2-page-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Matej-ch","download_url":"https://codeload.github.com/Matej-ch/yii2-page-guide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224632847,"owners_count":17343925,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["assistant","guide","introjs","onboarding","page-assist-for-users","step-by-step","yii2","yii2-modules","yii2-widget"],"created_at":"2024-11-14T14:07:41.293Z","updated_at":"2024-11-14T14:07:42.084Z","avatar_url":"https://github.com/Matej-ch.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"![latest_tag](https://badgen.net/github/tag/Matej-ch/yii2-page-guide)\n![wiki](https://badgen.net/badge/icon/wiki?icon=wiki\u0026label)\n\nPage guide extension\n====================\nAbility to add guide or assistant to pages for better user orientation or explaining functionality to user\n\nInstallation\n------------\n\nThe preferred way to install this extension is through [composer](http://getcomposer.org/download/).\n\nEither run\n\n```\nphp composer.phar require --prefer-dist matejch/yii2-page-guide \"^1.0\"\n```\n\nor add\n\n```\n\"matejch/yii2-page-guide\": \"^1.0\"\n```\n\nto the requirement section of your `composer.json` file.\n\nSetup\n-----\n\n#### 1. First migrate table\n\nIt is necessary for saving rules on pages\n\n```php \n./yii migrate --migrationPath=@vendor/matejch/yii2-page-guide/src/migrations\n```\n\n#### 2. Add to modules in your web.php\n\n```php \n'pageGuide' =\u003e [\n    'class' =\u003e \\matejch\\pageGuide\\PageGuide::class,\n]\n\n```\n\n#### 3. Add widget on pages you want to use page guide on\n\nBy default, it is rendered in place you put widget on\n\n```php\n \u003c?= \\matejch\\pageGuide\\widget\\PageAssist::widget() ?\u003e\n```\n\nIf you want it to be positioned on right top side, use widget option **_'btnPositionCss'_**\n\n```php \n\u003c?= \\matejch\\pageGuide\\widget\\PageAssist::widget(['btnPositionCss' =\u003e 'position: fixed;top: 100px;right: -2px;']) ?\u003e\n\n```\n\n### 4. Additional intro options from intro.js library\n\nIf you want you can add intro.js option into widget with attribute `introOptions`\n\nMore options here [intro.js](https://introjs.com/docs/examples/customizing/html-tooltip) \n```php \n\u003c?= \\matejch\\pageGuide\\widget\\PageAssist::widget(['introOptions' =\u003e ['showProgress' =\u003e true] ]) ?\u003e\n\n```\n### 5. Optional\n\nWidget now also supports intro.js callbacks\n\nAvailable callbacks are `oncomplete` `onexit` `onbeforeexit` `onchange` `onbeforechange` `onafterchange`\n\n```php \n\u003c?= \\matejch\\pageGuide\\widget\\PageAssist::widget(['introCallbacks' =\u003e [\n    'onchange' =\u003e new \\yii\\web\\JsExpression(\"function (targetElement) { alert('next step'); }\")]\n]) ?\u003e\n\n```\n\nUsage\n-----\nAccess index and form for creation of rules with \n\n```php \n{key_of_module_you_use_in_web.php}/page-guide/index\n```\n\n#### 1. Create new set of rules\n\nInsert url on your yii web page into first input\n\nPress button go to page that opens url in new window\n\nFrom this window drag and drop elements you want to use into previous window\n\nYou can also set it by hand, just add step number, element id and text\n\ncheck image of page guide form\n![](readme/Create%20page%20guide.png)\n\n\n#### 2. Add widget to the page you want to use it on\n\nWhen you are in creator mode, every draggable element is highlighted with blue dashed border\n\nBy default, in creator mode all visible input elements on page are set as draggable, and if form is detected on page\n\nalso, all elements with form-group class are set.\n\n------\n\nWith widget option _**'selectors'**_ (array), you can set multiple class names or ids or other valid _css selectors_\n\nfor picking draggable elements in creator mode.\n\n```php \n\u003c?= \\matejch\\pageGuide\\widget\\PageAssist::widget(['selectors' =\u003e ['.guide','#selectable_id']]) ?\u003e\n\n```\n\n\nHere is example how it looks, when rules are set and user can display guide/assistant\n![](readme/Contact%20with%20guide.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatej-ch%2Fyii2-page-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatej-ch%2Fyii2-page-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatej-ch%2Fyii2-page-guide/lists"}