https://introjs.com/_next/static/chunks/pages/docs/migration/introjs-v8-migration-245176011aee65a4.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2952],{7036:function(t,e,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/migration/introjs-v8-migration",function(){return o(85046)}])},85046:function(t,e,o){"use strict";o.r(e),o.d(e,{__toc:function(){return l}});var r=o(85893),n=o(45167),i=o(54294),s=o(59004);o(84759);var a=o(82643);let l=[{depth:2,value:"What’s New in v8",id:"whats-new-in-v8"},{depth:2,value:"Breaking Changes",id:"breaking-changes"},{depth:3,value:"1. introJs() is deprecated",id:"1-introjs-is-deprecated"},{depth:3,value:"2. tooltipRenderAsHtml (New option in Tour)",id:"2-tooltiprenderashtml-new-option-in-tour"},{depth:2,value:"Removed or Deprecated",id:"removed-or-deprecated"},{depth:2,value:"Updated API Design",id:"updated-api-design"},{depth:2,value:"Migration Steps",id:"migration-steps"},{depth:2,value:"Need Help?",id:"need-help"}];function d(t){let e=Object.assign({h1:"h1",p:"p",strong:"strong",hr:"hr",h2:"h2",ul:"ul",li:"li",code:"code",h3:"h3",blockquote:"blockquote",br:"br",pre:"pre",span:"span",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",ol:"ol",a:"a"},(0,a.a)(),t.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h1,{children:"\uD83D\uDE80 Migration Guide: Intro.js v8"}),"\n",(0,r.jsxs)(e.p,{children:["This guide will help you migrate from ",(0,r.jsx)(e.strong,{children:"Intro.js v7"})," to ",(0,r.jsx)(e.strong,{children:"v8"}),", covering breaking changes, deprecations, and new features."]}),"\n",(0,r.jsx)(e.hr,{}),"\n",(0,r.jsx)(e.h2,{id:"whats-new-in-v8",children:"What’s New in v8"}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:["Fully modular architecture (with ",(0,r.jsx)(e.code,{children:"tour()"})," and ",(0,r.jsx)(e.code,{children:"hint()"})," separated)"]}),"\n",(0,r.jsxs)(e.li,{children:["New ",(0,r.jsx)(e.code,{children:"tooltipRenderAsHtml"})," option for tour tooltips (default: ",(0,r.jsx)(e.code,{children:"true"}),")"]}),"\n",(0,r.jsx)(e.li,{children:"Better accessibility and customization"}),"\n",(0,r.jsx)(e.li,{children:"Cleaner lifecycle handling"}),"\n"]}),"\n",(0,r.jsx)(e.hr,{}),"\n",(0,r.jsx)(e.h2,{id:"breaking-changes",children:"Breaking Changes"}),"\n",(0,r.jsxs)(e.h3,{id:"1-introjs-is-deprecated",children:["1. ",(0,r.jsx)(e.code,{children:"introJs()"})," is deprecated"]}),"\n",(0,r.jsxs)(e.blockquote,{children:["\n",(0,r.jsxs)(e.p,{children:["❗ ",(0,r.jsx)(e.code,{children:"introJs()"})," is deprecated in v8.",(0,r.jsx)(e.br,{}),"\nUse ",(0,r.jsx)(e.code,{children:"introJs.tour()"})," or ",(0,r.jsx)(e.code,{children:"introJs.hint()"})," instead."]}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:(0,r.jsx)(e.strong,{children:"Before (v7):"})}),"\n",(0,r.jsx)(e.pre,{"data-language":"js","data-theme":"default",hasCopyCode:!0,children:(0,r.jsx)(e.code,{"data-language":"js","data-theme":"default",children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"introJs"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"()"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".start"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]})})}),"\n",(0,r.jsx)(e.p,{children:(0,r.jsx)(e.strong,{children:"Now (v8):"})}),"\n",(0,r.jsx)(e.pre,{"data-language":"js","data-theme":"default",hasCopyCode:!0,children:(0,r.jsxs)(e.code,{"data-language":"js","data-theme":"default",children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"introJs"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".tour"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"()"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".start"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// or for hints"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"introJs"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".hint"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"}

1,children:"()"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".addHints"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"(["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"])"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".showHints"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]})]})}),"\n",(0,r.jsx)(e.hr,{}),"\n",(0,r.jsxs)(e.h3,{id:"2-tooltiprenderashtml-new-option-in-tour",children:["2. ",(0,r.jsx)(e.code,{children:"tooltipRenderAsHtml"})," (New option in Tour)"]}),"\n",(0,r.jsxs)(e.p,{children:["Tour tooltips now ",(0,r.jsx)(e.strong,{children:"render HTML by default"}),". If your ",(0,r.jsx)(e.code,{children:"intro"})," content contains HTML, it will be rendered as HTML automatically."]}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.strong,{children:"Default:"})," ",(0,r.jsx)(e.code,{children:"true"})]}),"\n",(0,r.jsx)(e.p,{children:"To disable HTML rendering and show content as plain text:"}),"\n",(0,r.jsx)(e.pre,{"data-language":"js","data-theme":"default",hasCopyCode:!0,children:(0,r.jsxs)(e.code,{"data-language":"js","data-theme":"default",children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"introJs"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".tour"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"()"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".setOptions"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"({"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"  tooltipRenderAsHtml"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"false"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"  steps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" ["})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"    { intro"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"<b>This will be shown as plain text</b>"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" }"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"  ]"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"});"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:" "})]})}),"\n",(0,r.jsxs)(e.blockquote,{children:["\n",(0,r.jsx)(e.p,{children:"\uD83D\uDEE1 Use caution when injecting user-generated HTML to avoid XSS vulnerabilities."}),"\n"]}),"\n",(0,r.jsx)(e.hr,{}),"\n",(0,r.jsx)(e.h2,{id:"removed-or-deprecated",children:"Removed or Deprecated"}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:["Deprecated: ",(0,r.jsx)(e.code,{children:"introJs()"})]}),"\n",(0,r.jsx)(e.li,{children:"Removed legacy internal APIs"}),"\n",(0,r.jsx)(e.li,{children:"Removed automatic HTML rendering assumption in older steps"}),"\n"]}),"\n",(0,r.jsx)(e.hr,{}),"\n",(0,r.jsx)(e.h2,{id:"updated-api-design",children:"Updated API Design"}),"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",(0,r.jsxs)(e.table,{children:[(0,r.jsx)(e.thead,{children:(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.th,{children:"Feature"}),(0,r.jsx)(e.th,{children:"v7 Syntax"}),(0,r.jsx)(e.th,{children:"v8 Replacement"})]})}),(0,r.jsxs)(e.tbody,{children:[(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:"Start a tour"}),(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"introJs().start()"})}),(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"introJs.tour().start()"})})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:"Add hints"}),(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"introJs().addHints([...])"})}),(0,r.jsx)(e.td,{children:(0,r.jsx)(e.code,{children:"introJs.hint().addHints([...])"})})]}),(0,r.jsxs)(e.tr,{children:[(0,r.jsx)(e.td,{children:"Render HTML in tooltip"}),(0,r.jsx)(e.td,{children:"Rendered by default"}),(0,r.jsxs)(e.td,{children:["Now explicitly controlled with ",(0,r.jsx)(e.code,{children:"tooltipRenderAsHtml"})]})]})]})]}),"\n",(0,r.jsx)(e.hr,{}),"\n",(0,r.jsx)(e.h2,{id:"migration-steps",children:"Migration Steps"}),"\n",(0,r.jsxs)(e.ol,{children:["\n",(0,r.jsxs)(e.li,{children:["Replace ",(0,r.jsx)(e.code,{children:"introJs()"})," with ",(0,r.jsx)(e.code,{children:"introJs.tour()"})," or ",(0,r.jsx)(e.code,{children:"introJs.hint()"})]}),"\n",(0,r.jsxs)(e.li,{children:["Use ",(0,r.jsx)(e.code,{children:"tooltipRenderAsHtml: false"})," if you want plain text in tooltips"]}),"\n",(0,r.jsx)(e.li,{children:"Review any customized tooltip or hint behavior"}),"\n",(0,r.jsx)(e.li,{children:"Test onboarding flows thoroughly"}),"\n"]}),"\n",(0,r.jsx)(e.hr,{}),"\n",(0,r.jsx)(e.h2,{id:"need-help",children:"Need Help?"}),"\n",(0,r.jsxs)(e.p,{children:["Open an issue or start a discussion on GitHub:",(0,r.jsx)(e.br,{}),"\n\uD83D\uDC49 ",(0,r.jsx)(e.a,{href:"https://github.com/usablica/intro.js",children:"https://github.com/usablica/intro.js"})]}),"\n",(0,r.jsx)(e.hr,{}),"\n",(0,r.jsx)(e.p,{children:"Happy onboarding with v8! \uD83C\uDF89"})]})}let c={MDXContent:function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}=Object.assign({},(0,a.a)(),t.components);return e?(0,r.jsx)(e,{...t,children:(0,r.jsx)(d,{...t})}):d(t)},pageOpts:{filePath:"pages/docs/migration/introjs-v8-migration.md",route:"/docs/migration/introjs-v8-migration",frontMatter:{title:"Migration Guide",description:"Migration Guide Intro.js v8"},timestamp:1784724577e3,pageMap:[{kind:"Meta",data:{homepage:{type:"page",title:"Homepage",href:"/"},docs:{type:"page",title:"Docs",href:"/docs",display:"hidden"},"/docs/getting-started/start":{type:"page",title:"Quick Start",href:"/docs/getting-started/start"},"docs/support":{type:"page",title:"Support",href:"/docs/support"},blog:{type:"page",title:"Blog",href:"/blog"}}},{kind:"Folder",name:"docs",route:"/docs",children:[{kind:"Meta",data:{index:"Introduction","getting-started":"Getting Started",tour:"Tour",hints:"Hints",themes:"Themes",wrappers:"Wrappers",developers:"Developers",migration:"Migration","-- More":{type:"separator",title:"More"},API:{title:"API",href:"/docs/api",newWindow:!0},community:"Community",support:"Support"}},{kind:"MdxPage",name:"community",route:"/docs/community",frontMatter:{title:"Community",description:"Get help from the community"}},{kind:"Folder",name:"developers",route:"/docs/developers",children:[{kind:"MdxPage",name:"build",route:"/docs/developers/build",frontMatter:{title:"Build Intro.js",description:"Build Intro.js from source code"}},{kind:"MdxPage",name:"changelog",route:"/docs/developers/changelog",frontMatter:{title:"Intro.js Changelog",description:"Intro.js Changelog"}},{kind:"Meta",data:{build:"Build Intro.js",changelog:"Intro.js Changelog"}}]},{kind:"Folder",name:"getting-started",route:"/docs/getting-started",children:[{kind:"Meta",data:{install:"Install Intro.js",start:"Quick Start",license:"License"}},{kind:"MdxPage",name:"install",route:"/docs/getting-started/install",frontMatter:{title:"Install Intro.js",description:"How to install Intro.js and get started"}},{kind:"MdxPage",name:"license",route:"/docs/getting-started/license",frontMatter:{title:"License",description:"Intro.js commercial and open-source License"}},{kind:"MdxPage",name:"start",route:"/docs/getting-started/start",frontMatter:{id:"start",title:"Quick Start",description:"A simple way to add a basic tours and hints to your page"}}]},{kind:"Folder",name:"hints",route:"/docs/hints",children:[{kind:"Meta",data:{examples:"Examples",api:{type:"page",title:"Hints API",href:"/docs/api/classes/packages_hint_hint.Hint.html",newWindow:!0},attributes:{type:"page",title:"Hints HTML Attributes",href:"/docs/api/modules/packages_hint_dataAttributes.html",newWindow:!0},options:{type:"page",title:"Hints Options",href:"/docs/api/interfaces/packages_hint_option.HintOptions.html",newWindow:!0}}},{kind:"MdxPage",name:"api",route:"/docs/hints/api",frontMatter:{title:"Hint API",description:"API documentation for the hint feature in Intro.js"}},{kind:"MdxPage",name:"attributes",route:"/docs/hints/attributes",frontMatter:{title:"Hints HTML Attributes",description:"HTML attributes for managing hint elements in Intro.js"}},{kind:"Folder",name:"examples",route:"/docs/hints/examples",children:[{kind:"MdxPage",name:"hello-world",route:"/docs/hints/examples/hello-world",frontMatter:{title:"Hints Hello World",description:"Add hints to your page using HTML attributes",keywords:["javascript","tour","guide"]}},{kind:"Meta",data:{"hello-world":"Hints Hello World"}}]},{kind:"MdxPage",name:"options",route:"/docs/hints/options",frontMatter:{title:"Hints options",description:"Options for managing hint elements in Intro.js"}}]},{kind:"MdxPage",name:"index",route:"/docs",frontMatter:{title:"Intro.js Documentation",description:"Intro.js is a lightweight library for creating step-by-step introductions for your products.",slug:"/"}},{kind:"Folder",name:"migration",route:"/docs/migration",children:[{kind:"MdxPage",name:"introjs-v8-migration",route:"/docs/migration/introjs-v8-migration",frontMatter:{title:"Migration Guide",description:"Migration Guide Intro.js v8"}},{kind:"Meta",data:{"introjs-v8-migration":"Migration Guide"}}]},{kind:"MdxPage",name:"support",route:"/docs/support",frontMatter:{title:"Support",description:"Get support for Intro.js"}},{kind:"Folder",name:"themes",route:"/docs/themes",children:[{kind:"MdxPage",name:"install",route:"/docs/themes/install",frontMatter:{title:"Install themes",description:"How to install themes in IntroJS"}},{kind:"MdxPage",name:"list",route:"/docs/themes/list",frontMatter:{title:"Intro.js Themes",description:"A list of awesome custom templates available for Intro.js"}},{kind:"Meta",data:{install:"Install themes",list:"Intro.js Themes"}}]},{kind:"Folder",name:"tour",route:"/docs/tour",children:[{kind:"Meta",data:{examples:"Examples",api:{title:"Tour API",href:"/docs/api/classes/packages_tour_tour.Tour.html",type:"page",newWindow:!0},attributes:{title:"Tour HTML Attributes",href:"/docs/api/modules/packages_tour_dataAttributes.html",type:"page",newWindow:!0},options:{title:"Tour Options",href:"/docs/api/interfaces/packages_tour_option.TourOptions.html",type:"page",newWindow:!0}}},{kind:"MdxPage",name:"api",route:"/docs/tour/api",frontMatter:{title:"Tour API",description:"API documentation for the tour feature in Intro.js"}},{kind:"MdxPage",name:"attributes",route:"/docs/tour/attributes",frontMatter:{title:"Tour HTML Attributes",description:"HTML attributes for managing tour elements in Intro.js"}},{kind:"Folder",name:"examples",route:"/docs/tour/examples",children:[{kind:"MdxPage",name:"async-await",route:"/docs/tour/examples/async-await",frontMatter:{title:"Async/Await callbacks",de

1scription:"Using async/await callbacks in Intro.js",keywords:["javascript","tour","guide","async","await","promise"]}},{kind:"MdxPage",name:"confirm-before-exit",route:"/docs/tour/examples/confirm-before-exit",frontMatter:{title:"Confirm before exit",description:"Get a confirmation before closing the tour",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"css-class",route:"/docs/tour/examples/css-class",frontMatter:{title:"CSS ClassName",description:"Customize your product tour using the `tooltipClass` option",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"disable-interaction",route:"/docs/tour/examples/disable-interaction",frontMatter:{title:"Disable element interaction",description:"Disable interactions with elements inside the highlighted box",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"dont-show-again",route:"/docs/tour/examples/dont-show-again",frontMatter:{title:"Don't Show Again",description:'Display the "Don\'t Show Again" checkbox in your product tour',keywords:["javascript","tour","guide","dont-show-again"]}},{kind:"MdxPage",name:"floating-tooltip",route:"/docs/tour/examples/floating-tooltip",frontMatter:{title:"Floating tooltip",description:"Create floating tooltips that don't highlight a specific element",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"hello-world",route:"/docs/tour/examples/hello-world",frontMatter:{title:"Tour Hello World",description:"Create your product tour using data-intro and data-title HTML attributes",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"html-tooltip",route:"/docs/tour/examples/html-tooltip",frontMatter:{title:"HTML in tooltip",description:"Use HTML tags in the tooltip content",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"json-config",route:"/docs/tour/examples/json-config",frontMatter:{title:"JSON configuration",description:"Define your tour settings using JSON",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"localization",route:"/docs/tour/examples/localization",frontMatter:{title:"Localization (i18n)",description:"Use the `language` option to localize your product tour with built-in language support",keywords:["javascript","tour","guide","localization","i18n","internationalization","language"]}},{kind:"MdxPage",name:"progress-bar",route:"/docs/tour/examples/progress-bar",frontMatter:{title:"Progress bar",description:"Show a progress bar at the top of the page",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"rtl",route:"/docs/tour/examples/rtl",frontMatter:{title:"Right-to-left tour",description:"Intro.js supports RTL by default. Simply include `introjs-rtl.css` and customize buttons.",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"scrollable-element",route:"/docs/tour/examples/scrollable-element",frontMatter:{title:"Scrollable element",description:"Highlight elements inside a scrollable element",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"svg",route:"/docs/tour/examples/svg",frontMatter:{title:"Tour for SVG elements",description:"Create a product tour using SVG elements",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"tooltip-positions",route:"/docs/tour/examples/tooltip-positions",frontMatter:{title:"Tooltip positions",description:"Define the position of the tooltip",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"without-bullets",route:"/docs/tour/examples/without-bullets",frontMatter:{title:"Tour without bullets",description:"Use the `showBullets` flag to show/hide the bullets in your product tour",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"without-buttons",route:"/docs/tour/examples/without-buttons",frontMatter:{title:"Tour without buttons",description:"Use the `showButtons` flag to show/hide all buttons in your product tour",keywords:["javascript","tour","guide"]}},{kind:"Meta",data:{"async-await":"Async/Await callbacks","confirm-before-exit":"Confirm before exit","css-class":"CSS ClassName","disable-interaction":"Disable element interaction","dont-show-again":"Don't Show Again","floating-tooltip":"Floating tooltip","html-tooltip":"HTML in tooltip","json-config":"JSON configuration",localization:"Localization (i18n)","progress-bar":"Progress bar",rtl:"Right-to-left tour","scrollable-element":"Scrollable element","tooltip-positions":"Tooltip positions",svg:"Tour for SVG elements","hello-world":"Tour Hello World","without-bullets":"Tour without bullets","without-buttons":"Tour without buttons"}}]},{kind:"MdxPage",name:"options",route:"/docs/tour/options",frontMatter:{title:"Tour options",description:"Options for managing tour elements in Intro.js"}}]},{kind:"Folder",name:"wrappers",route:"/docs/wrappers",children:[{kind:"MdxPage",name:"R",route:"/docs/wrappers/R",frontMatter:{title:"Intro.js R",description:"R wrapper for Intro.js"}},{kind:"MdxPage",name:"add",route:"/docs/wrappers/add",frontMatter:{title:"Add your Intro.js wrapper",description:"Add your Intro.js wrapper to this list"}},{kind:"MdxPage",name:"angularjs",route:"/docs/wrappers/angularjs",frontMatter:{title:"Intro.js Angular",description:"AngularJS service and directives for Intro.js"}},{kind:"MdxPage",name:"dart",route:"/docs/wrappers/dart",frontMatter:{title:"Intro.js Dart",description:"Dart wrapper for Intro.js"}},{kind:"MdxPage",name:"drupal",route:"/docs/wrappers/drupal",frontMatter:{title:"Intro.js Drupal",description:"Drupal wrapper for Intro.js"}},{kind:"MdxPage",name:"ember",route:"/docs/wrappers/ember",frontMatter:{title:"Intro.js Ember",description:"Ember wrapper for Intro.js"}},{kind:"MdxPage",name:"gwt",route:"/docs/wrappers/gwt",frontMatter:{title:"Intro.js GWT",description:"GWT wrapper on top of Intro.js"}},{kind:"MdxPage",name:"magento",route:"/docs/wrappers/magento",frontMatter:{title:"Intro.js Magento",description:"Magento wrapper for Intro.js"}},{kind:"MdxPage",name:"rails",route:"/docs/wrappers/rails",frontMatter:{title:"Intro.js Rails",description:"Rails wrapper for Intro.js"}},{kind:"MdxPage",name:"react",route:"/docs/wrappers/react",frontMatter:{title:"Intro.js React",description:"React wrapper for Intro.js"}},{kind:"MdxPage",name:"wordpress",route:"/docs/wrappers/wordpress",frontMatter:{title:"Intro.js Wordpress",description:"Wordpress wrapper for Intro.js"}},{kind:"MdxPage",name:"yii",route:"/docs/wrappers/yii",frontMatter:{title:"Intro.js Yii",description:"Yii wrapper for Intro.js"}},{kind:"MdxPage",name:"yii2",route:"/docs/wrappers/yii2",frontMatter:{title:"Intro.js Yii2",description:"Yii2 wrapper for Intro.js"}},{kind:"Meta",data:{add:"Add your Intro.js wrapper",angularjs:"Intro.js Angular",dart:"Intro.js Dart",drupal:"Intro.js Drupal",ember:"Intro.js Ember",gwt:"Intro.js GWT",magento:"Intro.js Magento",R:"Intro.js R",rails:"Intro.js Rails",react:"Intro.js React",wordpress:"Intro.js Wordpress",yii:"Intro.js Yii",yii2:"Intro.js Yii2"}}]}]}],flexsearch:{codeblocks:!0},title:"Migration Guide",headings:l},pageNextRoute:"/docs/migration/introjs-v8-migration",nextraLayout:i.ZP,themeConfig:s.Z};e.default=(0,n.j)(c)},59004:function(t,e,o){"use strict";var r=o(85893),n=o(11163),i=o(54294);e.Z={logo:(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("img",{src:"/img/logo.svg",width:"37px",height:"32px",style:{marginRight:"5px"}}),(0,r.jsxs)("span",{children:[(0,r.jsx)("b",{children:"Intro.js"})," documentation"]})]}),primaryHue:220,primarySaturation:65,docsRepositoryBase:"https://github.com/usablica/intro.js",editLink:{component:null},project:{link:"https://github.com/usablica/intro.js"},useNextSeoProps(){let{route:t,asPath:e}=(0,n.useRouter)(),{frontMatter:o}=(0,i.ZR)(),r=o.description||"Create step-by-step product tours, user onboarding guides easily. Intro.js is a lightweight, open-source user onboarding library. Get started for free!",s=o.title?o.title+" – Intro.js":"Intro.js",a="https://introjs.com"+e,l="/"!==t&&s?"https://introjs.com/api/og?title=".concat(s):"https://introjs.com/img/social.png";return{titleTemplate:"%s – Intro.js Docs",description:o.description,canonical:a,themeColor:"#0070f3",openGraph:{type:"website",url:a,title:s,description:r,locale:"en_US",site:"introjs.com",images:[{url:l,alt:s,type:"image/jpeg"}],siteName:"introjs.com"},twitter:{handle:"@usablica",title:s,description:r,site:"introjs.com",url:a,cardType:"summary_large_image",image:l}}},sidebar:{titleComponent(t){let{title:e,type:o}=t;return"separator"===o?(0,r.jsx)("span",{className:"cursor-default",children:e}):(0,r.jsx)(r.Fragment,{children:e})},defaultMenuCollapseLevel:1,toggleButton:!0},footer:{text:(0,r.jsxs)("span",{children:[new Date().getFullYear()," \xa9"," ",(0,r.jsx)("a",{href:"https://introjs.com",target:"_blank",children:"Intro.js"}),"."]})},toc:{backToTop:!0},head:function(){let{route:t,asPath:e}=(0,n.useRouter)(),{frontMatter:o}=(0,i.ZR)(),s=o.description||"Create step-by-step product tours, user onboarding guides easily. Intro.js is a lightweight, open-source user onboarding library. Get started for free!",a=o.title?o.title+" – Intro.js":"Intro.js",l="/"!==t&&a?"https://introjs.com/api/og?title=".concat(a):"https://introjs.com/img/social.png";return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}

1),(0,r.jsx)("meta",{httpEquiv:"Content-Language",content:"en"}),(0,r.jsx)("meta",{name:"apple-mobile-web-app-title",content:"Intro.js"}),(0,r.jsx)("link",{rel:"shortcut icon",href:"/img/favicon.ico"}),(0,r.jsx)("link",{rel:"icon",type:"image/png",href:"/img/favicon.ico"}),(0,r.jsx)("link",{rel:"apple-touch-icon",href:"/img/favicon.ico"}),(0,r.jsx)("meta",{name:"twitter:title",content:a}),(0,r.jsx)("meta",{name:"twitter:description",content:s}),(0,r.jsx)("meta",{name:"twitter:image",content:l}),(0,r.jsx)("meta",{name:"twitter:url",content:"https://introjs.com"+e}),(0,r.jsx)("script",{src:"https://cdn.jsdelivr.net/npm/[email protected]/intro.min.js",defer:!0}),(0,r.jsx)("link",{rel:"stylesheet",href:"https://cdn.jsdelivr.net/npm/[email protected]/introjs.css"})]})}}},15789:function(){}},function(t){t.O(0,[3996,5675,5098,2888,9774,179],function(){return t(t.s=7036)}),_N_E=t.O()}]);