{"id":32231859,"url":"https://github.com/alexandre-io/introduction.js","last_synced_at":"2025-10-22T11:49:01.828Z","repository":{"id":58222107,"uuid":"46667709","full_name":"Alexandre-io/introduction.js","owner":"Alexandre-io","description":"Introductions for websites to guide step-by-step your users.","archived":false,"fork":false,"pushed_at":"2020-05-23T13:02:36.000Z","size":61,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-22T11:48:57.911Z","etag":null,"topics":["angular","guide","html","introjs","javascript","welcome"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Alexandre-io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-22T16:00:03.000Z","updated_at":"2020-05-23T13:02:38.000Z","dependencies_parsed_at":"2022-08-31T02:51:52.710Z","dependency_job_id":null,"html_url":"https://github.com/Alexandre-io/introduction.js","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/Alexandre-io/introduction.js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandre-io%2Fintroduction.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandre-io%2Fintroduction.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandre-io%2Fintroduction.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandre-io%2Fintroduction.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alexandre-io","download_url":"https://codeload.github.com/Alexandre-io/introduction.js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandre-io%2Fintroduction.js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280431489,"owners_count":26329786,"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","status":"online","status_checked_at":"2025-10-22T02:00:06.515Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["angular","guide","html","introjs","javascript","welcome"],"created_at":"2025-10-22T11:48:57.257Z","updated_at":"2025-10-22T11:49:01.824Z","avatar_url":"https://github.com/Alexandre-io.png","language":"JavaScript","readme":"# introduction.js [![Build Status](https://travis-ci.org/Alexandre-io/introduction.js.svg)](https://travis-ci.org/Alexandre-io/introduction.js) [![Codacy Badge](https://api.codacy.com/project/badge/grade/b39eadeb3b9346bc85ba05e42e5f6739)](https://www.codacy.com/app/alexandre_io/introduction-js) \r\n\r\nIntroductions for websites to guide step-by-step your users.\r\n\r\nWas inspired from [intro.js](https://github.com/usablica/intro.js) and [angular-intro.js](https://github.com/mendhak/angular-intro.js)\r\n\r\n## Usage\r\n\r\n### Without framework\r\n\r\n**1** - Include `introduction.min.js` and `introduction.min.css` in your page.\r\n\r\n**2** - Add `data-intro` and `data-step` to your HTML elements. (cf. examples)\r\n\r\n### With AngularJS\r\n**1** - Include `introduction.min.js` and `introduction.min.css` in your page.\r\n\r\n**2** - Include `introduction.js` into your angular.module.\r\n\r\n**3** - Add directives `ng-intro-options` and `ng-intro-method` to your HTML elements in a controller. (cf. examples)\r\n\r\n## Install\r\n```javascript\r\n    bower install introduction.js --save\r\n````\r\n\r\n## Native API\r\n\r\n###introductionjs([targetElm])\r\n\r\nCreating an introductionjs object.\r\n\r\n**Parameters:**\r\n - targetElm : String (optional)\r\n   Should be defined to start introduction for specific element, for example: `#intro-farm`.\r\n\r\n**Returns:**\r\n - introductionjs object.\r\n\r\n**Example:**\r\n```javascript\r\nintroductionjs() //without selector, start introduction for whole page\r\nintroductionjs(\"#intro-farm\") //start introduction for element id='intro-farm'\r\n````\r\n\r\n-----\r\n\r\n###introductionjs.start()\r\n\r\nStart the introduction for defined element(s).\r\n\r\n**Returns:**\r\n - introductionjs object.\r\n\r\n**Example:**\r\n```javascript\r\nintroductionjs().start()\r\n````\r\n-----\r\n\r\n###introductionjs.goToStep(step)\r\n\r\nGo to specific step of introduction.\r\n\r\n**Parameters:**\r\n - step : Number\r\n\r\n**Returns:**\r\n - introductionjs object.\r\n\r\n**Example:**\r\n```javascript\r\nintroductionjs().goToStep(2).start(); //starts introduction from step 2\r\n````\r\n\r\n-----\r\n\r\n###introductionjs.nextStep()\r\n\r\nGo to next step of introduction.\r\n\r\n**Returns:**\r\n - introductionjs object.\r\n\r\n**Example:**\r\n```javascript\r\nintroductionjs().start().nextStep();\r\n````\r\n\r\n-----\r\n\r\n###introductionjs.previousStep()\r\n\r\nGo to previous step of introduction.\r\n\r\n**Returns:**\r\n - introductionjs object.\r\n\r\n**Example:**\r\n```javascript\r\nintroductionjs().goToStep(3).start().previousStep(); //starts introduction from step 2\r\n````\r\n\r\n-----\r\n\r\n###introductionjs.exit()\r\n\r\nExit the introduction.\r\n\r\n**Returns:**\r\n - introductionjs object.\r\n\r\n**Example:**\r\n```javascript\r\nintroductionjs().exit()\r\n````\r\n\r\n-----\r\n\r\n###introductionjs.setOption(option, value)\r\n\r\nSet a single option to introductionjs object.\r\n\r\n**Parameters:**\r\n - option : String\r\n   Option key name.\r\n\r\n - value : String/Number\r\n   Value of the option.\r\n\r\n**Returns:**\r\n - introductionjs object.\r\n\r\n**Example:**\r\n```javascript\r\nintroductionjs().setOption(\"skipLabel\", \"Exit\");\r\n````\r\n\r\n----\r\n\r\n###introductionjs.setOptions(options)\r\n\r\nSet a group of options to the introductionjs object.\r\n\r\n**Parameters:**\r\n - options : Object\r\n   Object that contains option keys with values.\r\n\r\n**Returns:**\r\n - introductionjs object.\r\n\r\n**Example:**\r\n```javascript\r\nintroductionjs().setOptions({ 'skipLabel': 'Exit', 'tooltipPosition': 'right' });\r\n````\r\n\r\n----\r\n\r\n###introductionjs.refresh()\r\n\r\nTo refresh and order layers manually\r\n\r\n**Returns:**\r\n - introductionjs object.\r\n\r\n**Example:**\r\n```javascript\r\nintroductionjs().refresh();\r\n````\r\n\r\n----\r\n\r\n\r\n###introductionjs.oncomplete(providedCallback)\r\n\r\nSet callback for when introduction completed.\r\n\r\n**Parameters:**\r\n - providedCallback : Function\r\n\r\n**Returns:**\r\n - introductionjs object.\r\n\r\n**Example:**\r\n```javascript\r\nintroductionjs().oncomplete(function() {\r\n  alert(\"end of introduction\");\r\n});\r\n````\r\n\r\n-----\r\n\r\n###introductionjs.onexit(providedCallback)\r\n\r\nSet callback to exit of introduction. Exit also means pressing `ESC` key and clicking on the overlay layer by the user.\r\n\r\n**Parameters:**\r\n - providedCallback : Function\r\n\r\n**Returns:**\r\n - introductionjs object.\r\n\r\n**Example:**\r\n```javascript\r\nintroductionjs().onexit(function() {\r\n  alert(\"exit of introduction\");\r\n});\r\n````\r\n\r\n-----\r\n\r\n###introductionjs.onchange(providedCallback)\r\n\r\nSet callback to change of each step of introduction. Given callback function will be called after completing each step.\r\nThe callback function receives the element of the new step as an argument.\r\n\r\n**Parameters:**\r\n - providedCallback : Function\r\n\r\n**Returns:**\r\n - introductionjs object.\r\n\r\n**Example:**\r\n```javascript\r\nintroductionjs().onchange(function(targetElement) {\r\n  alert(\"new step\");\r\n});\r\n````\r\n\r\n-----\r\n\r\n###introductionjs.onbeforechange(providedCallback)\r\n\r\nGiven callback function will be called before starting a new step of introduction. The callback function receives the element of the new step as an argument.\r\n\r\n**Parameters:**\r\n - providedCallback : Function\r\n\r\n**Returns:**\r\n - introductionjs object.\r\n\r\n**Example:**\r\n```javascript\r\nintroductionjs().onbeforechange(function(targetElement) {\r\n  alert(\"before new step\");\r\n});\r\n````\r\n\r\n-----\r\n\r\n###introductionjs.onafterchange(providedCallback)\r\n\r\nGiven callback function will be called after starting a new step of introduction. The callback function receives the element of the new step as an argument.\r\n\r\n**Parameters:**\r\n - providedCallback : Function\r\n\r\n**Returns:**\r\n - introductionjs object.\r\n\r\n**Example:**\r\n```javascript\r\nintroductionjs().onafterchange(function(targetElement) {\r\n  alert(\"after new step\");\r\n});\r\n````\r\n\r\n-----\r\n###Attributes:\r\n - `data-intro`: The tooltip text of step\r\n - `data-step`: Optionally define the number (priority) of step\r\n - `data-tooltipClass`: Optionally define a CSS class for tooltip\r\n - `data-highlightClass`: Optionally append a CSS class to the helperLayer\r\n - `data-position`: Optionally define the position of tooltip, `top`, `left`, `right`, `bottom`, `bottom-left-aligned` (same as 'bottom'), 'bottom-middle-aligned' and 'bottom-right-aligned'. Default is `bottom`\r\n\r\n###Options:\r\n\r\n - `steps`: For defining steps using JSON configuration\r\n - `nextLabel`: Next button label\r\n - `prevLabel`: Previous button label\r\n - `skipLabel`: Skip button label\r\n - `doneLabel`: Done button label\r\n - `tooltipPosition`: Default tooltip position\r\n - `tooltipClass`: Adding CSS class to all tooltips\r\n - `highlightClass`: Additional CSS class for the helperLayer\r\n - `exitOnEsc`: Exit introduction when pressing Escape button, `true` or `false`\r\n - `exitOnOverlayClick`: Exit introduction when clicking on overlay layer, `true` or `false`\r\n - `showStepNumbers`: Show steps number in the red circle or not, `true` or `false`\r\n - `keyboardNavigation`: Navigating with keyboard or not, `true` or `false`\r\n - `showButtons`: Show introduction navigation buttons or not, `true` or `false`\r\n - `showSkipButton`: Show skip button or not, `true` or `false` \r\n - `showBullets`: Show introduction bullets or not, `true` or `false`\r\n - `showProgress`: Show introduction progress or not, `true` or `false`\r\n - `showArrow`: Show arrow to dialog or not, `true` or `false`\r\n - `scrollToElement`: Auto scroll to highlighted element if it's outside of viewport, `true` or `false`\r\n - `overlayOpacity`: Adjust the overlay opacity, `Number`\r\n - `disableInteraction`: Disable an interaction inside element or not, `true` or `false`\r\n - `swipeNavigation`: Navigating with swipe or not, `true` or `false`\r\n - `swipeSensibility`: Swipe sensibility\r\n\r\n-----\r\n\r\n## Angular API\r\n`ng-intro-options=\"IntroOptions\"`\r\n\r\nYou should create a `$scope.IntroOptions` in your controller which contains the introduction.js options. This also allows you to modify the options as part of your controller behavior if necessary.  You don't have to use `IntroOptions`, you can specify some other name. \r\n\r\n### Start method\r\n\r\n`ng-intro-method=\"CallMe\"` \r\n\r\nThe directive will create a method on `$scope.CallMe` so that you can invoke it yourself later.  Make sure the there isn't a method `CallMe` already in your controller. To use the method be sure to wrap it with `$timeout`. You don't have to use `CallMe`, you can specify some other name.\r\n\r\n### Call the start method\r\n\r\nYou can invoke it from an event such a click, \r\n\r\n`ng-click=\"CallMe();\"` \r\n\r\nas long as you are still in the same controller scope.  You can also specify a step number in the method call, `CallMe(3);`.\r\n\r\nYou can start the intro from code, either call `$scope.CallMe();`.  If the `$scope.CallMe();` doesn't work, it might be because your DOM isn't ready. Put it in a `$timeout`.\r\n\r\n### Autostart\r\n\r\nIf you set `ng-intro-autostart=\"true\"`, the intro will start as soon as the directive is ready. \r\n\r\n### Autorefresh\r\n\r\nIf an intro tour includes dynamic content, use `ng-intro-autorefresh=\"true\"` to call introduction.js' refresh method.\r\n\r\n### Callbacks\r\n\r\nIntroduction.js provides several callbacks.  You can receive these callbacks in your controller.  For example, for the `onchange` event, specify the function name in the directive. \r\n\r\n`ng-intro-onchange=\"ChangeEvent\"`\r\n\r\nIn your controller, create `ChangeEvent`\r\n\r\n    $scope.ChangeEvent = function (targetElement, scope) {\r\n        console.log(\"Change Event called\");\r\n        console.log(targetElement); //The target element\r\n        console.log(this); //The introductionjs object\r\n    };\r\n\r\nThe other introduction.js callbacks you can specify are `ng-intro-oncomplete`, `ng-intro-onexit`, `ng-intro-onchange` `ng-intro-onbeforechange` and `ng-intro-onafterchange`.\r\n\r\n### Exit Method\r\n\r\n`ng-intro-exit-method=\"ExitMe\"`\r\n\r\nThen in your controller, you can force exit using\r\n\r\n`$scope.ExitMe(function() { //callback } );`\r\n\r\n\r\n## Tests\r\n```javascript\r\n    npm test\r\n````\r\n\r\n## Build\r\n```javascript\r\n    grunt build\r\n````","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandre-io%2Fintroduction.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexandre-io%2Fintroduction.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandre-io%2Fintroduction.js/lists"}