Create an onboarding modal
- UpdatedJan 30, 2025
- 5 minutes to read
- Yokohama
- Adoption services
Create your own onboarding modals to introduce your users to a new experience or application.
Before you begin
Role required: admin
Procedure
- Navigate to All > Adoption Services > Create Guidance.
-
To create your onboarding modal, do the following:
-
On the form, fill in the fields.
Table 1. Guidance form Field Description Order Order that the guidance displays. The lowest number displays first and the next chronological number follows. Name Name of the onboarding experience. Type Type of guidance that appears in the UI. Select Modal. Roles Roles for this guidance. Application Application for the guidance. Status Status of the guidance. Active Select to enable or disable the guidance. - Select Submit.
-
On the form, fill in the fields.
-
To launch an Onboarding modal once created, do the following:
- Create a client script in UIB.
-
Under the code snippet enter
api.emit('SN_HELP#GUIDANCE_START_REQUESTED',{guidanceId:"ID"});
- Replace the ID with the sys_id of the modal guidance to be opened.
- Save the page.
- Select Body in the left panel of the UIB page.
- In the right panel, select the Events tab.
- Under Dispatched Events select Add.
-
In the event name, add
SN_HELP#GUIDANCE_START_REQUESTED
and give the label with a name. - Select Save.
-
To create embedded help guidance steps, do the following:
-
Select your guidance from the Guidances list.
-
On the Help Guidance Steps related list, select New.
-
On the form, fill in the fields.
Table 2. Help Guidance Step form Field Description Name Name of your guidance. Layout Selected layout of the guidance. - Video
- Image
- Text
- Question
- Image and Text
- Image and Question
Order Order that the guidance displays. The lowest number displays first and the next chronological number follows. Action Label Button labels that enable the user to navigate the guidance modal. Application Application scope for the guidance. This guidance applies to the Global scope. Guidance The guidance that this Help Guidance Step applies to. - Select Submit.
-
Select your guidance from the Guidances list.
-
To create help contents for your help guidance steps, do the following:
-
Select your help guidance step in the related list.
-
On the Help Contents related list, select New.
-
Note: Form fields are different for each type of guidance. Refer to the correct form for your guidance.On the text form, fill in the fields.
Table 3. Help Content text form Field Description Title Title of the help content. Subtitle Subtitle that's displayed in the modal of the help content in the UI. Type Type of guidance that's selected. Application Application scope for the guidance. Guidance Step Help Guidance Step that this Help Content is associated with. For example, Intro/welcome, All menu, and History. Default Help content that is the default for the guidance step. Footer Footer that's displayed in the modal of the help content in the UI. Provide Custom HTML Custom HTML for your help content. Text Text that displays in the modal of the help content in the UI. - Click Submit.
-
On the video form, fill in the fields.
Table 4. Help Content video form Field Description Title Title of the help content. Subtitle Subtitle that's displayed in the modal of the help content in the UI. Type Type of guidance that's selected. Video Link The link for your video to display. Note: Only YouTube and Vimeo are supported.Application Application scope for the guidance. Guidance Step Help Guidance Step that this Help Content is associated with. For example, Intro/welcome, All menu, and History. Default Help content that is the default for the guidance step. Footer Footer that's displayed in the modal of the help content in the UI. Provide Custom HTML Custom HTML for your help content. Alternate Text Alternate text that displays in the modal of the help content in the UI. - Click Submit.
-
On the image form, fill in the fields.
Table 5. Help Content image form Field Description Title Title of the help content. Subtitle Subtitle that's displayed in the modal of the help content in the UI. Type Type of guidance that's selected. Image The image selected to display in your guidance. Application Application scope for the guidance. Guidance Step Help Guidance Step that this Help Content is associated with. For example, Intro/welcome, All menu, and History. Default Help content that is the default for the guidance step. Footer Footer that's displayed in the modal of the help content in the UI. Provide Custom HTML Custom HTML for your help content. Provide Image Link The image link is displayed in the guidance. Alternate Text Alternate text that displays in the modal of the help content in the UI. - Click Submit.
-
On the question form, fill in the fields.
Table 6. Help Content question form Field Description Title Title of the help content. Subtitle Subtitle that's displayed in the modal of the help content in the UI. Type Type of guidance that's selected. Application Application scope for the guidance. Guidance Step Help Guidance Step that this Help Content is associated with. For example, Intro/welcome, All menu, and History. Default Help content that is the default for the guidance step. Footer Footer that's displayed in the modal of the help content in the UI. Provide Custom HTML Custom HTML for your help content. - Select Submit.
-
Select New in the Help Question related field.
Table 7. Help question form Field Description Question The content of the question to add in the guidance. Order The order of the question in the guidance. Variant The variant of the question. - Radio is selected for questions with only one answer.
- Checkbox is selected for questions with multiple answers.
Application Application scope for the guidance. Help Content The Help Content that the question is created for. Mandatory The question is Mandatory when selected. -
Select New in the Help Answers related field to create answers.
Table 8. Help answer form Field Description Label The label for the answer. Value The value for the answer. Order The order of the answer. Application Application scope for the guidance. Question The question the answer is created for. - Select Submit.
-
Select your help guidance step in the related list.
- Create any additional guidance that you want to build your onboarding experience.
- When you're done building your onboarding guidance, confirm that the status of your guidance is set to Published on the Guidance form.
- On the Guidance form, select Update.