[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"footer-description":3,"footer-secondary":5,"footer-primary":33,"header-nav":121,"header-nav-data":260,"site-banners":262,"dfd79d2b-7af5-4cdb-aa94-3f73de97ebd8":268,"74634853-196b-4ce3-b256-4534c054838f":274,"8f849cd0-a47b-4e32-bb19-b478973c90f7":304,"358b0659-1f05-4427-bd1c-4bc03a43c182":310,"1b444c23-b593-4391-9410-4ca5d2c7a7cb":317,"@directus-labs/tour-group-interface":322,"9df3f40e-6272-4ec6-a0d7-cc29265e087c":357},{"description":4},"\u003Cp>A composable backend to build your Headless CMS, BaaS, and more. \u003C/p>",{"items":6},[7,14,21,27],{"id":8,"title":9,"url":10,"page":11,"children":13},"8a1b7bfa-429d-4ffc-a650-2a5fdcf356da","Cloud Policies",null,{"permalink":12},"/cloud-policies",[],{"id":15,"title":16,"url":17,"page":18,"children":20},"bea848ef-828f-4306-8017-6b00ec5d4a0c","License","#",{"permalink":19},"/bsl",[],{"id":22,"title":23,"url":17,"page":24,"children":26},"4e914f47-4bee-42b7-b445-3119ee4196ef","Terms",{"permalink":25},"/terms",[],{"id":28,"title":29,"url":17,"page":30,"children":32},"ea69eda6-d317-4981-8421-fcabb1826bfd","Privacy",{"permalink":31},"/privacy",[],{"items":34},[35,58,78,98],{"id":36,"title":37,"url":10,"page":10,"children":38},"522e608a-77b0-4333-820d-d4f44be2ade1","Solutions",[39,44,49,54],{"id":40,"title":41,"url":10,"page":42},"fcafe85a-a798-4710-9e7a-776fe413aae5","Headless CMS",{"permalink":43},"/solutions/headless-cms",{"id":45,"title":46,"url":10,"page":47},"79972923-93cf-4777-9e32-5c9b0315fc10","Backend-as-a-Service",{"permalink":48},"/solutions/backend-as-a-service",{"id":50,"title":51,"url":10,"page":52},"0fa8d0c1-7b64-4f6f-939d-d7fdb99fc407","Product Information",{"permalink":53},"/solutions/product-information-management",{"id":55,"title":56,"url":57,"page":10},"63946d54-6052-4780-8ff4-91f5a9931dcc","100+ Things to Build","https://directus.io/blog/100-tools-apps-and-platforms-you-can-build-with-directus",{"id":59,"title":60,"url":10,"page":10,"children":61},"8ab4f9b1-f3e2-44d6-919b-011d91fe072f","Resources",[62,66,70,74],{"id":63,"title":64,"url":65,"page":10},"f951fb84-8777-4b84-9e91-996fe9d25483","Documentation","https://docs.directus.io",{"id":67,"title":68,"url":69,"page":10},"366febc7-a538-4c08-a326-e6204957f1e3","Guides","https://docs.directus.io/guides/",{"id":71,"title":72,"url":73,"page":10},"aeb9128e-1c5f-417f-863c-2449416433cd","Community","https://directus.chat",{"id":75,"title":76,"url":77,"page":10},"da1c2ed8-0a77-49b0-a903-49c56cb07de5","Release Notes","https://github.com/directus/directus/releases",{"id":79,"title":80,"url":10,"page":10,"children":81},"d61fae8c-7502-494a-822f-19ecff3d0256","Support",[82,86,90,94],{"id":83,"title":84,"url":85,"page":10},"8c43c781-7ebd-475f-a931-747e293c0a88","Issue Tracker","https://github.com/directus/directus/issues",{"id":87,"title":88,"url":89,"page":10},"d77bb78e-cf7b-4e01-932a-514414ba49d3","Feature Requests","https://github.com/directus/directus/discussions?discussions_q=is:open+sort:top",{"id":91,"title":92,"url":93,"page":10},"4346be2b-2c53-476e-b53b-becacec626a6","Community Chat","https://discord.com/channels/725371605378924594/741317677397704757",{"id":95,"title":96,"url":97,"page":10},"26c115d2-49f7-4edc-935e-d37d427fb89d","Cloud Dashboard","https://directus.cloud",{"id":99,"title":100,"url":10,"page":10,"children":101},"49141403-4f20-44ac-8453-25ace1265812","Organization",[102,107,112,116],{"id":103,"title":104,"url":105,"page":106},"1f36ea92-8a5e-47c8-914c-9822a8b9538a","About","/about",{"permalink":105},{"id":108,"title":109,"url":17,"page":110},"b84bf525-5471-4b14-a93c-225f6c386005","Careers",{"permalink":111},"/careers",{"id":113,"title":114,"url":115,"page":10},"86aabc3a-433d-434b-9efa-ad1d34be0a34","Brand Assets","https://drive.google.com/drive/folders/1lBOTba4RaA5ikqOn8Ewo4RYzD0XcymG9?usp=sharing",{"id":117,"title":118,"url":10,"page":119},"8d2fa1e3-198e-4405-81e1-2ceb858bc237","Contact",{"permalink":120},"/contact",{"items":122},[123,185,241,246,253],{"id":124,"title":125,"url":10,"callout":126,"callout_title":127,"children_title":128,"page":10,"children":129},"62c04c6c-5793-4702-8ed1-73dd563fd605","Product","8f849cd0-a47b-4e32-bb19-b478973c90f7","Project Showcase","Use Cases and Features",[130,136,142,149,154,162,170,178],{"id":131,"title":41,"url":132,"description":133,"image":10,"icon":134,"page":135},"e7d7d5ed-89b1-4455-8b4a-8ae92c70e3a0","/solutions/headless-cms/","Manage and deliver content with ease","code_blocks",{"permalink":43},{"id":137,"title":46,"url":138,"description":139,"image":10,"icon":140,"page":141},"60bdefd9-95e6-45a3-9f81-4748d07c59d3","/solutions/backend-as-a-service/","Build and ship applications faster","speed",{"permalink":48},{"id":143,"title":144,"url":145,"description":146,"image":10,"icon":147,"page":148},"5f9aebeb-4f89-445e-9850-5b1261a2743c","Headless Commerce","/solutions/product-information-management/","A single source of truth for products","shopping_cart_checkout",{"permalink":53},{"id":150,"title":151,"url":57,"description":152,"image":10,"icon":153,"page":10},"49e46134-80be-470e-8c73-afb1417fa9b6","100+ More Use Cases","Build anything (or everything)","lightbulb",{"id":155,"title":156,"url":157,"description":158,"image":10,"icon":159,"page":160},"a589ac77-a5ce-45c5-a054-e43111e19158","Instant APIs","/products/connect/","Connect a database, get REST + GraphQL APIs","api",{"permalink":161},"/toolkit/connect",{"id":163,"title":164,"url":165,"description":166,"image":10,"icon":167,"page":168},"4a0f129a-c546-4493-b0a9-306e51692e90","Granular Policy-Based Auth","/products/auth/","Provide secure, autonomous data access","lock_person",{"permalink":169},"/toolkit/auth",{"id":171,"title":172,"url":173,"description":174,"image":10,"icon":175,"page":176},"f9250f2c-93a4-4108-80db-011bbe391ecf","Visual Automation Builder","/products/automate/","Automate content and data workflows with ease","build",{"permalink":177},"/toolkit/automate",{"id":179,"title":180,"url":10,"description":181,"image":10,"icon":182,"page":183},"f1ae4e40-5b05-42a4-9cd3-33dda35cc939","50+ More Features","Get everything you need out-of-the-box","auto_fix",{"permalink":184},"/features",{"id":186,"title":60,"url":10,"callout":187,"callout_title":188,"children_title":189,"page":10,"children":190},"2f6ad0d1-6dd3-4f17-b5c8-9f2abf71409a","dfd79d2b-7af5-4cdb-aa94-3f73de97ebd8","Watch Directus TV","Learn More",[191,198,205,211,218,224,230,235],{"id":192,"title":193,"url":194,"description":195,"image":10,"icon":196,"page":197},"0a3bf9f5-1ef2-43f4-bc09-7ff7488241c5","Blog","/blog","Read our latest articles and guides","library_books",{"permalink":194},{"id":199,"title":200,"url":17,"description":201,"image":10,"icon":202,"page":203},"165e3dc2-e51b-4456-8382-99c5775b0412","Case Studies","Case studies and success stories","magic_button",{"permalink":204},"/case-studies",{"id":206,"title":207,"url":208,"description":209,"image":10,"icon":210,"page":10},"5ae324b6-bf44-4c21-95ad-e6dc0c1c1f40","Community Forum","https://community.directus.io/","Questions and conversations","comment",{"id":212,"title":213,"url":17,"description":214,"image":10,"icon":215,"page":216},"b1db03f0-e537-490e-8c0f-c61c401d1024","Agency Directory","Browse our list of agency partners ","handshake",{"permalink":217},"/agency-directory",{"id":219,"title":220,"url":105,"description":221,"image":10,"icon":222,"page":223},"991731c8-eb40-4eec-85a5-6e977bcd7ec9","About Us","Learn more about Directus and the team","supervised_user_circle",{"permalink":105},{"id":225,"title":226,"url":227,"description":228,"image":10,"icon":229,"page":10},"52aebf38-b3ad-4a27-807d-ce52398cd509","Wall of Love","https://testimonial.to/directus/all","See what others are saying about us","heart_plus",{"id":231,"title":118,"url":17,"description":232,"image":10,"icon":233,"page":234},"a86eca65-d5ae-4263-b7d9-4f1a1c50a0b1","Have a general inquiry or question for us?","mark_email_unread",{"permalink":120},{"id":236,"title":80,"url":10,"description":237,"image":10,"icon":238,"page":239},"28225825-8d41-4809-9032-192fbf5c6e5d","Reach out to Directus support","support",{"permalink":240},"/support",{"id":242,"title":243,"url":244,"callout":10,"callout_title":10,"children_title":10,"page":10,"children":245},"a3f1275d-b088-4b11-99bf-143fcbf39104","Developers","/docs",[],{"id":247,"title":248,"url":249,"callout":10,"callout_title":10,"children_title":10,"page":250,"children":252},"fae8fded-d2e2-468e-a68b-82abec7a7225","Enterprise","/solutions/enterprise/",{"permalink":251},"/solutions/enterprise",[],{"id":254,"title":255,"url":256,"callout":10,"callout_title":10,"children_title":10,"page":257,"children":259},"5c5e2fbc-49fd-4e41-a71e-e4f8db2b00cf","Pricing","/pricing/",{"permalink":258},"/pricing/self-hosted",[],{"header_cta_buttons":261},"74634853-196b-4ce3-b256-4534c054838f",[263],{"id":264,"icon":265,"content":266,"link":267,"include_paths":10,"exclude_paths":10},"812bf73d-ebfb-4246-9538-937a09a0c795","connected_tv","Learn more about our native MCP","https://directus.io/mcp",{"id":187,"title":269,"description":270,"image":271,"external_url":272,"icon":265,"badge":273,"page":10,"resource":10},"Directus TV","Go down the rabbit hole with hours of original video content from our team. ","ab70faf5-fc28-4608-a7e7-74fd4f020a9d","/tv","Video",{"alignment":275,"style":276,"experiment_enabled":277,"experiment":10,"experiment_variant":278,"buttons":281,"variants":291},"center","default",false,{"id":279,"key":280,"experiment":10},"8c4951b4-a6f9-4c06-9f71-fd39a3bdad1e","control",[282,285,288],{"id":283,"block_button_id":284},15,"358b0659-1f05-4427-bd1c-4bc03a43c182",{"id":286,"block_button_id":287},16,"9df3f40e-6272-4ec6-a0d7-cc29265e087c",{"id":289,"block_button_id":290},232,"1b444c23-b593-4391-9410-4ca5d2c7a7cb",[292],{"id":293,"alignment":275,"style":276,"buttons":294,"experiment_variant":301},"e1885d45-3119-41a3-8294-3cd796ea6f02",[295,298],{"id":296,"block_button_id":297},203,"ade37731-147d-48c4-864a-cec007576362",{"id":299,"block_button_id":300},202,"1cb4e89f-f7de-4b46-bbb8-080191517a72",{"id":302,"key":303},"66d2be4f-2492-4944-8060-039c15515918","variant",{"id":126,"title":305,"description":306,"image":307,"external_url":10,"icon":10,"badge":10,"page":308,"resource":10},"Built With Directus","See what everyone's been building with Directus","e658de72-fb08-4ed2-8029-215c712c789e",{"permalink":309},"/built-with-directus",{"id":284,"external_url":10,"label":311,"color":312,"outline":277,"icon":10,"size":313,"target":314,"ph_event":10,"page":315,"resource":10},"Book a Demo","primary","medium","_self",{"permalink":316},"/demo",{"id":290,"external_url":97,"label":318,"color":319,"outline":320,"icon":321,"size":313,"target":314,"ph_event":10,"page":10,"resource":10},"Log In","secondary",true,"arrow_forward",{"name":323,"description":324,"verified":277,"id":325,"readme":326,"type":327,"last_updated":328,"host_version":329,"downloads":330,"total_downloads":331,"sandbox":320,"license":332,"publisher":333,"versions":340,"formatted_name":351,"formatted_readme":352,"formatted_description":324,"featured_image":353,"images":354,"recent_downloads_7_days":331,"recent_downloads_30_days":331},"@directus-labs/tour-group-interface","Create an interactive tour for your form.","714a19f1-8eb8-4ba6-8975-42d90c60f422","# Tour Group Interface\n\nCreate an interactive tour for your form.\n\n![Demo of the Tour Group Interface](https://raw.githubusercontent.com/directus-labs/extensions/main/packages/tour-group-interface/docs/demo.gif)\n\n## Installation\n\nRefer to the [Official Guide](https://docs.directus.io/extensions/installing-extensions.html) for details on installing the extension from the Marketplace or manually.\n\n## Usage\n\nThis interface creates an interactive walkthrough for your form/item view.\n\nIn the settings, you can define each step of your interactive tour, as well as some customization options. The latter are useful for differentiation when using multiple tours within the same page.\n\n![Interface settings of the Tour Group Interface](https://raw.githubusercontent.com/directus-labs/extensions/main/packages/tour-group-interface/docs/settings.png)\n\nSince this is a group interface, you can wrap fields with it. The group interface tries to inject classes into these fields, so that you can easily select them for your interactive tour.\n\nFor example, if you wrap a field called `title` with the tour group, it will try to inject both the `.tour-input-title` and `.tour-field-title` classes. Use your browser to inspect which classes are available for your fields to use as selectors.\n\n### Adding a step for your tour\n\nAfter clicking the `Add Step` button in the interface settings, you can set up your tour step. The `Element` field requires a selector that targets an element you want to focus on with this tour step. Basically, you can choose any selector as long as it exists on the page where the tour is running.\n\nAt the bottom of your tour step settings, you will find the class names that the interface tries to add to the fields within this group.\n\nSpecify a `Title` and/or a `Description` to appear in the tour step popup, whose position you can adjust using the `Position Side` and `Position Alignment` options.\n\nThe `Force Click` and `Prevent Back Navigation` settings help you implement common use cases, such as when you want the interactive tour to continue only after a button is clicked, and because it may opens a modal, you should not be able to navigate back, when you reach that step.\n\n![Tour Step Settings](https://raw.githubusercontent.com/directus-labs/extensions/main/packages/tour-group-interface/docs/settings-step.png)\n\n**Tip:** If you don’t add a tour step, the group interface will still try to inject the classes as described above. This means that you can use this interface for this purpose only.\n","interface","2024-12-04T17:12:37.746Z","^10.0.0 || ^11.0.0",[],0,"MIT",{"username":334,"verified":320,"id":335,"github_username":334,"github_name":336,"github_blog":337,"github_bio":10,"github_location":338,"github_company":10,"github_avatar_url":339},"phazonoverload","8486d50d-a6bc-45c6-8627-60f3c144732c","Kevin Lewis","https://lws.io","Berlin","https://avatars.githubusercontent.com/u/1461554?v=4",[341],{"version":342,"package":325,"publisher":335,"type":327,"host_version":329,"publish_date":328,"verified":277,"id":343,"url_repository":10,"url_homepage":10,"url_bugs":10,"file_count":344,"unpacked_size":345,"sandbox":320,"sandbox_requested_scopes":10,"license":332,"bundled":346,"maintainers":347},"1.0.0","87e5b73f-04c7-43a7-aea5-d6ce631feaa0",3,38626,[],[348,349,350],11624,11625,11626,"Tour Group Interface","\u003Ch1>Tour Group Interface\u003C/h1>\n\u003Cp>Create an interactive tour for your form.\u003C/p>\n\u003Cp>\u003Cimg src=\"https://raw.githubusercontent.com/directus-labs/extensions/main/packages/tour-group-interface/docs/demo.gif\" alt=\"Demo of the Tour Group Interface\">\u003C/p>\n\u003Ch2>Installation\u003C/h2>\n\u003Cp>Refer to the \u003Ca href=\"https://docs.directus.io/extensions/installing-extensions.html\">Official Guide\u003C/a> for details on installing the extension from the Marketplace or manually.\u003C/p>\n\u003Ch2>Usage\u003C/h2>\n\u003Cp>This interface creates an interactive walkthrough for your form/item view.\u003C/p>\n\u003Cp>In the settings, you can define each step of your interactive tour, as well as some customization options. The latter are useful for differentiation when using multiple tours within the same page.\u003C/p>\n\u003Cp>\u003Cimg src=\"https://raw.githubusercontent.com/directus-labs/extensions/main/packages/tour-group-interface/docs/settings.png\" alt=\"Interface settings of the Tour Group Interface\">\u003C/p>\n\u003Cp>Since this is a group interface, you can wrap fields with it. The group interface tries to inject classes into these fields, so that you can easily select them for your interactive tour.\u003C/p>\n\u003Cp>For example, if you wrap a field called \u003Ccode>title\u003C/code> with the tour group, it will try to inject both the \u003Ccode>.tour-input-title\u003C/code> and \u003Ccode>.tour-field-title\u003C/code> classes. Use your browser to inspect which classes are available for your fields to use as selectors.\u003C/p>\n\u003Ch3>Adding a step for your tour\u003C/h3>\n\u003Cp>After clicking the \u003Ccode>Add Step\u003C/code> button in the interface settings, you can set up your tour step. The \u003Ccode>Element\u003C/code> field requires a selector that targets an element you want to focus on with this tour step. Basically, you can choose any selector as long as it exists on the page where the tour is running.\u003C/p>\n\u003Cp>At the bottom of your tour step settings, you will find the class names that the interface tries to add to the fields within this group.\u003C/p>\n\u003Cp>Specify a \u003Ccode>Title\u003C/code> and/or a \u003Ccode>Description\u003C/code> to appear in the tour step popup, whose position you can adjust using the \u003Ccode>Position Side\u003C/code> and \u003Ccode>Position Alignment\u003C/code> options.\u003C/p>\n\u003Cp>The \u003Ccode>Force Click\u003C/code> and \u003Ccode>Prevent Back Navigation\u003C/code> settings help you implement common use cases, such as when you want the interactive tour to continue only after a button is clicked, and because it may opens a modal, you should not be able to navigate back, when you reach that step.\u003C/p>\n\u003Cp>\u003Cimg src=\"https://raw.githubusercontent.com/directus-labs/extensions/main/packages/tour-group-interface/docs/settings-step.png\" alt=\"Tour Step Settings\">\u003C/p>\n\u003Cp>\u003Cstrong>Tip:\u003C/strong> If you don’t add a tour step, the group interface will still try to inject the classes as described above. This means that you can use this interface for this purpose only.\u003C/p>\n","https://raw.githubusercontent.com/directus-labs/extensions/main/packages/tour-group-interface/docs/demo.gif",[353,355,356],"https://raw.githubusercontent.com/directus-labs/extensions/main/packages/tour-group-interface/docs/settings.png","https://raw.githubusercontent.com/directus-labs/extensions/main/packages/tour-group-interface/docs/settings-step.png",{"id":287,"external_url":358,"label":359,"color":319,"outline":277,"icon":10,"size":313,"target":314,"ph_event":10,"page":10,"resource":10},"https://directus.cloud/account/register","Get Started"]