--- sourceDocument: Xanadu ServiceNow AI Platform user interface sourceDocumentLink: https://www.servicenow.com/docs/r/xanadu/platform-user-interface Release : - xanadu ft:locale : - en-US ft:publication_title : - Xanadu ServiceNow AI Platform user interface ft:clusterId : - platux bundleId : - platux workflow : - Platform --- # Enable guided tours # Enable guided tours {#ariaid-title1} * Release version: Xanadu * * Updated August 1, 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes to read Enable guided tours for Service Portal pages as well as the standard platform UI. ## Before you begin Role required: admin ## About this task The Guided Tour Designer was first introduced in the Jakarta release. For new instances that were created in Jakarta and beyond, guided tours are active by default. For instances that originate from pre-Jakarta, guided tours are inactive by default. With the Xanadu release, you can also enable guided tours to run on Service Portal pages. When you upgrade your instance to Xanadu, the following results occur: * For instances that are new in Xanadu, the Guided Tours for Service Portal feature is active by default. * For pre-Xanadu instances that you upgrade to Xanadu, the Guided Tours for Service Portal feature is inactive by default. {#activate-guidedtours-service-portal__ul_cz2_nmq_32b} Note: The [Service Portal](https://www.servicenow.com/docs/aDoIZlOcBXAck1dFMDKg9w "Service Portal allows you to build a mobile-friendly self-service portal experience for your employees or customers. Service Portal is a ServiceNow AI Platform feature that is active by default and interacts with parts of the platform so users can access platform features through portals.") application provides a framework that enables you to customize your portal so that your users can access specific platform features in a custom context. You can create a guided tour for a Service Portal page to guide your users through its content step by step. ## Procedure 1. In the application navigator, enter sys_properties.list. 2. From the System Properties list, find the following properties and set their values to True. {#activate-guidedtours-service-portal__table_vfg_3lf_pfb__entry__2} | Property | Description | |-|-| | com.snc.guided_tours.standard_ui.enable | Enables guided tours across your instance to run on the standard platform UI and Workspaces. | | com.snc.guided_tours.sp.enable | Enables guided tours across your instance to run on Service Portal pages. You can create and publish tours for standard UI pages regardless of this property setting. | | com.snc.guided_tours.custom_ui.enable | Enables guided tours across your instance to run on the Custom UI pages. | [ ] {#activate-guidedtours-service-portal__table_vfg_3lf_pfb} ## Result You can create, update, and play guided tours that reference both standard platform UI elements and tours that reference custom UI elements on a Service Portal page. Your users can play these tours. ## What to do next Start planning, outlining, and drafting your guided tours. If you are drafting Service Portal guided tours, refer to these items. {#activate-guidedtours-service-portal__table_mjh_zsr_zdb__entry__2} | Item | Details | |-|-| | Guided tour callout steps | Guided tours must be able to recognize every element that they point to so they can locate it after a callout step is created on the element. Therefore, Service Portal page creators must ensure that every custom element they create has a unique name to help validate it as a record in the database. For example, if you create two widgets on a Service Portal page, you must assign them with unique names, such as Widget1 and Widget2. You can customize the elements further by appending additional attributes to the HTML and unique values to their properties. For example, the system currently uses data-gtd-eid and data-id attributes to identify the elements as unique. | | Service Portal pages | In the base system, you can only launch tours from pages that use the SP Header Menu. Manually launched tours do not display on pages with custom header menus. If your guided tour is on a Service Portal page that does not use the SP Header Menu, you must configure your tour for auto-launch so the tour is visible to your users. To ensure this type of tour is visible to your users, see [Configure auto-launch for guided tours](https://www.servicenow.com/docs/uBCpGdGnnsbRVp4Pj64fRw "Configure one or more tours to launch automatically when a user lands on a page."). If your Service Portal uses Page Route Maps, tours may not show when expected. For example, your users may not see a tour when expected if the tour is configured for a redirected page. For more information, see [Redirect a reference to a Page ID](https://www.servicenow.com/docs/RVNyhlaUgA5cLL9FQp2J4w "Redirect all references from Service Portal widgets to a certain page to point to a new page with a single record to avoid manually replacing the hard-coded page ID in widgets.") . | | Service Portal branding | When you update the branding for a Service Portal page, the callouts in the guided tour for that page also update accordingly. For example: You update your Service Portal panel background theme color to yellow, and its primary color to red. Result: Your guided tour callout panel background becomes yellow and the callout text field becomes red. | [ ] {#activate-guidedtours-service-portal__table_mjh_zsr_zdb} {#activate-guidedtours-service-portal__table_anv_qnv_zdb__entry__1} | Service Portal guided tour callout colors ||| |-|-|-| | You can customize your guided tour callout colors or use the guided tour defaults. ||| | Parameter | Default | Custom | | Parameter | Guided tour callouts use the following Service Portal properties: | To set the callout color independently of the Service Portal colors, apply the following CSS variables: | | Callout background color | Panel background color | $gtd-callout-background | | Callout text color | Text color | $gtd-callout-content-color | | Callout number color (Example: 2/5) | Text muted | $gtd-callout-number-color | | Callout close button (X) color | Text muted | $gtd-callout-close-color | | Callout primary button color | Primary button background color | $gtd-callout-active-color | [ ] {#activate-guidedtours-service-portal__table_anv_qnv_zdb}