4 Creating Content

This chapter contains OGL content creation knowledge articles.

OGL Selectors

A selector is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them.

Add a Background Image to a Tip

You can add a background image to a tip by using some CSS tricks.

1. Open the source editor in order to change the raw HTML of the tooltip.
2. Surround the part that you want to add a background to with a <div> tag.
3. add the following style attribute to the div tag

   style="background-image: url(image.jpg); background-size: cover;"

See example below.

<div style="background-image: url(//d2p93rcsj9dwm5.cloudfront.net/static/tipcms/img/LOGO.png); background-size:cover;"><p>This text will have a background image</p></div>

Advance from Multiple Actions

In some cases you need to advance a step two ways. For example, when searching a user can both click Search or press Enter on their keyboard. In some cases, this is required for guides to pass SOX and legal compliance.

To account for both types of interaction, you can add an invisible step that listens for the second way to advance the guide. These instructions describe how to manage a situation where you need to add an invisible step that listens for the user to press enter. However, this same approach can be applied to other interactions. Instead of creating a splash tip as these instructions state, you'd actually tie the invisible tip to an element.

Step-by-Step Guide

To add an invisible tip that advances when a user presses Enter:

1. Go to the step where you need to add the second interaction, and then click the wrench icon to open Step Settings.

2. Click the + icon to add another tip to the step.

   

3. Click Add Splash.
4. Open Activation Settings and make the following changes:

   

• • Select Invisible Step.

  • Select Advance When, and then change the activation to User presses ENTER key.

That's it. The step will now advance either when the user clicks a button or when they press Enter.

Assigning Multiple Roles to Guides

We have 4 main roles and guides are commonly shared between them. How can I set up a guide to show to more than one specific role, but not all?

Updated October 22 2020 and available in the OGL Console from November 15 2020.

The Simple Condition allows the OGL developer choose to always display the guide or to set a condition based on a page or role.

Note: Pages and roles must have already been configured in the OGL console.

When always is selected the OGL developer only has the option to set if the guide is:

• Enabled
• Displayed on the Help Panel
• Autoloaded

If the Role option is selected the OGL developer can now set the Role condition of “Is” or “Is NOT” and select the relevant Role(s) from the drop down:

In order to work with Simple conditions OGL now utilizes the Roles setting in the OGL console. The OGL roles MUST be set up as per the roles set in your OGL Fusion embed or Javascript. Click here to download a list of Role mappings.

Branch Based on Dropdown Value

When a guide needs to branch based on the value of a drop down, if "form field - drop down" is not working, there are other options to achieve the same functionality.

Instructions

1. Create a step that instructs the user to select a dropdown value.
   • The step will need to advance using the "Next" button
2. In Advanced Settings/Step Branches, edit the Conditions for a branch and use the following:

   When page has visible element select[title$="DROP DOWN VALUE"]

   • Another option is something like:

     When page has form field - text .xdw > span:first > input:last with value matching DROP DOWN VALUE

Branches and Filling Forms

Branching is one of the most powerful features in the Guided Learning editor. It can be used to create very complex flows.

Still, its most common use-case isn't all that complex. The most common use-case for using branches is to control the flow of the guide based on user choices in forms.

Real Life Example - Linkedin Job Search

Below is an image of the Linkedin job search form,

Now, for the sake of this example, let's say that if the user selects United States we want to recommend that he/she also enters a Postal Code. If a different country is selected we'll point the user directly to the search button.

So, our guide will look like this:

1. Select a country
2. It is recommended to enter a postal code for searches inside the US.

   (this will only display if US was selected)

3. Click Search

The 'natural' flow of an Guided Learning guide is to go from one step to the next; so 1 then 2 then 3. In our case, we want Guided Learning to jump directly from step #1 to step #3 if the user did NOT select US.

In step #1, under the 'advanced settings' click to add a branch.

Select Jump to Step, choose step #3 from the drop down menu.

Now we need to make sure this branch is activated only if the user did NOT select US. So let's click on Add Conditions.

Last step, choose the form field - drop down condition and hover over the drop down to select it. Guided Learning will automatically fill the selected value (e.g. US) for you.

Can I hide a tooltip if another tooltip is displayed?

Yes.

Before solving this, you will need to understand the more general use-case.

In a drop-down menu example, a Guided Learning tooltip is no different that any other element on the screen.

The question is how to identify a tooltip. To do so, we will add a hidden HTML element to the source code of the tooltip.

In the source view of the tooltip we will add the following code

<div id="ir__only-one-tip">&nbsp;</div>

Now, when our tooltip is displayed, this invisible div (this div is invisible because it has no content) will be part of it.

So all that is left to do is to add the following step condition to the other tooltip.

Can I launch a guide if a user gets stuck?

Yes.

You can configure a guide (with an overview of a page, for example) to automatically launch if the user does not move his mouse for a certain amount time.

Or you could use this feature to highlight the help widget if the user is inactive.

How do I do it?

Refer to our knowledge-base article about launcher guides. There you will learn about invisible steps. For now, know an invisible step allows you to "listen in" on user activity (e.g. clicking a button) but also to user inactivity.

This is how you do it:

In your launcher guide, the first and only step, should be an invisible step that will look like this:

Notice that in our example we want to advance after 5 seconds of inactivity.

And that's it! You can then choose an action as described in the invisible steps article

Can I launch a guide when a user field contains a certain value?

Yes.

Consider the following use case. You want to provide your users with content relevant to the features that they use in your product.

Let's assume your product has 10 features which we'll name: feature01, feature02, .... feature10.

In your embed code you are telling Guided Learning which features the currently logged in user has enabled like so:

iridize('api.fields.set', {user_id: '[e-mail]', features: 'feature01, feature07, feature08'});

Now say you want to launch a guide only to users that have feature07 enabled.

Creating the condition "user has field features = feature07" will not do because it will only match if the user has only this feature enabled. (i.e. Guided Learning does string matching between the field and the value you provide)

Instead, we allow you to user regular expressions. Surrounding the text with [ ] tells Guided Learning that the string is in fact a regular expression. This actually allows you to create conditions much more complex than simply 'contains'.

In our example you will need to:

But say you want to have the guide show up if the user has feature07 or feature06, no problem:

[feature07|feature06]

The above will do just that.

Can I launch two guides simultaneously?

Yes.

There is no technical limit on the number of Guided Learning guides that can run simultaneously. Nevertheless, please consider that this may be confusing for your end users.

Can I link one guide to another?

Yes.

To create a link between 2 guides, you need to know the API name of the guide you want to link to.

Open the first guide (from which you want to link) in the editor; select the step after which the second guide should launch and open its advanced settings. Click on add/edit branches and follow these instructions.

Launch a Guide Branch Type

Choose the Launch a Guide branch type to launch another guide from within the current guide. When used without branch conditions, this is often used to string together several guides into a unified guide. When branch conditions are used this is often used for forking a guide based on user choices or application state.

Editing a Launch a Guide branch with advanced settings. This branch is set to Launch a Guide with apiName "98j68vyj".

1. Select Branch Type

Branch type select box.

2. Guide apiName

The apiName of the guide to launch. The apiName of a guide can be found in the guide's listing on the Guides page of the Guided Learning dashboard.

3. Step API Id

By default the launched guide is started from its first step. When this textbox is not empty, the launched guide will start from the step with the API id in the textbox. The step API id may be found in the Step Settings Panel of the Guide Editor.

4. Keep Current Guide Open

The Launch a Guide type of branch normally launches the guide and then closes the current guide. When the Keep Current Guide Open checkbox is checked the current guide is kept open. Additionally, the branch choosing process continues on to the following branches (if any) and to the default next step if no other branch is chosen. This is often useful when launching a guide which is run in a popup window (see Popup Window Name setting below), where the current guide stays open waiting for the user to get back from following the launched guide on the popup window.

5. Add/Edit Conditions

Click to open the conditions editor, where you can add/edit Conditions to the branch.

6. Show/Hide Advanced Settings

Click to toggle whether advanced branch settings (items 7-11 below) are visible.

7. Wait for Page to Load

When this checkbox is checked the launched guide will not start until a page load takes place (either a full page load or a SPA route load on a properly integrated SPA). This is almost always necessary when launching a guide in a popup window (see Popup Window Name setting below). Another use for this setting is when combined with the Redirect to Page or Reload Page settings.

8. Redirect to Page

When the textbox is not empty, the user will be redirected to the URL specified in the textbox when launching the guide. Please note that it is almost always a good idea to also set the Wait for Page to Load setting when using Redirect to Page.

9. Reload Page

When this checkbox is checked, the page will be reloaded when launching the guide. Please note that it is almost always a good idea to also set the Wait for Page to Load setting when using Redirect to Page.

10. Popup Window Name

By default the launched guide starts in the current browser tab/window. When this textbox is not empty the guide will be launched in a tab/window with the Javascript window.name property matching the text in the textbox. This is useful for launching guides within a popup window or another tab. For use with a popup window, this setting almost always requires also setting the Wait for Page to Load setting to work properly.

11. On Close Return-Here/Launch-a-Guide

This setting sets an action to take place when the launched guide is closed (either by the user or by finishing the guide).

• Return Here: with this setting the launcher guide is suspended upon launching the guide. When the launched guide is closed the launcher guide resumes from the same step it was when suspended.
• Launch a Guide: with this setting the launcher guide is closed as usual. When the launched guide is closed, the guide with the apiName set in the textbox is launched.

12. Done/Cancel

Click on Done to finish editing the branch and keep your changes. Click on Cancel to discard the changes made to the branch.

Can I open more than one tooltip at once?

Yes.

There is no limit to the number of tooltips that can be opened simultaneously.

You can tell Guided Learning to display more than one tooltip at any step in your guide by using the + icon

Tip: This can be very useful for creating hover help for a certain page in your app.

Can you have a guide with only one step, and not show the step counter?

Yes.

Actually a common use-case for that is when showing an overview 1-minute video to a first time user. In the display setting of a tooltip, uncheck the step counter option.

Can you set a condition for a guide to only show once?

Yes.

Under 'Activation'

Add a condition to "show when user has seen guide less than 1 time"

Changing the Flow Based on a Users's Choice

Sometimes you need to ask the user a question and change the flow of the guide based on the answer that the user provides. The answer does not necessarily have to be something in the UI of the application. It can be something specific to what the user wants to do now.

A good example of this is creating a troubleshooting guide or, as some call it, a diagnostics guide.

You have probably already been on one of these phone calls with a customer support representative (CSR). You explain the problem to the CSR and in return s/he asks you a list of questions. Each question depends on the answer you gave to the one before it. At the end of these questions, hopefully, your problem is solved.

A troubleshooting/diagnostics' guide can be of tremendous help to either party here:

1. If you didn't have to call anyone to ask these questions you'd be happy to service yourself!
2. If the CSR did NOT have to read this list of questions from a printed document or worse her/his torn notebook, the service would be much quicker and less prone to error.

Actual Use Case

Let's see this in action with an real life scenario, "smartphone battery does not charge".

This would be the document your CSR will be reading from:

1. CSR: Is the wall socket providing power? Try connecting the charger to a another socket that you know for certain works. For example, a socket you have a working lamp connected to.
2. You (option 1): I changed the socket and it works! --> FINISH
3. You (option 2): Still nothing --> GOTO 4
4. CSR: Are you charging from a USB port on a computer?
5. You (option 1): No --> GOTO 7
6. You (option 2): Yes --> GOTO 8
7. CSR: Contact your service provider. The phone may be damaged.
8. CSR: ensure that the computer is turned on. Some computers provide no USB power when they’re turned off.
9. You (option 1): I turned on my computer and it works! --> FINISH
10. You (option 2): Still nothing --> GOTO 7

The Guided Learning Way - Session Variables

Guided Learning allows you to ask the user a question inside a tooltip; It saves the user's answer and allows you to change the flow of the guide accordingly using Branches. Read more in our Branches article.

The tooltip above consolidates the 3 steps in our list into a single tooltip. To configure the possible answers we will need to click on the session variables button and configure each answer as can be seen in the image below.

Notice that all answers should have the same value (e.g. q1) set as the Variable Name.

What we need to do next is to alter the guide flow based on the answer that the user clicks on. To do this we will setup a branch to jump to the relevant step. In our example, if the user click Yes! we should end the guide; Guided Learning will default to going to the following question hence we do not need to creating any additional settings for the case that the user selected Still Nothing

The above outlines the condition that needs to be added to the branch.

Cloning a Tooltip

Cloning a tooltip is useful when:

• You have created a beautiful tooltip, with customized settings and styles. And you want to create another one just like it
• You have created a step with multiple tooltips and you want to move one of those tooltips to a new step
• You want to move a tooltip, you have created, into an existing step (e.g. to branch the guide)

Cloning will create an identical copy with all the text, styling, conditions, branches and any other setting.

To clone a tooltip, in the editor, you will need to select it first.

Once selected, click on the clone icon:

The clone dialog will appear,

1. Choose whether you want to clone only the selected tip (default) or all tooltips
2. In the drop-down select where you want to clone to. This can be the same step (default), a new step (the new step will be created immediately after the selected step), or any other step in your guide.
3. Click the Clone button

Context Sensitive Help (CSH) using Oracle Guided Learning

"Context-sensitive help is a kind of online help that is obtained from a specific point in the state of the software, providing help for the situation that is associated with that state."

This definition is taken from this wikipedia article. Also from this article, "Context-sensitive help can be implemented using tooltips" which is exactly where Oracle Guided Learning comes in.

While you can use Guided Learning to create flows to guide users through complex procedures, sometimes, some extra information that appears when you put your mouse cursor over a button or a form field can do a world of good.

In Guided Learning we call these on-hover tooltips. To add them to any page in your application please do the following:

1. In the display settings of each tooltip, remember to:
   • check 'Hide Next button'
   • check 'Hide Close button'
   • uncheck 'Show Back button'
   • check 'Hide step count footer'
2. In the activation settings of each tooltip, remember to set 'Show on hover'
3. In the step settings section uncheck 'Highlight Target Element'

Contextual Page Level Help

Let's say that a new feature has been added to your application and you've written a detailed article about how to use this feature and have added this article to your knowledge-base/help-center/wiki.

How do I get the users who use this feature to read the article and to see the full power of the feature?

What if you could:

1. Open a splash window for the first 3 times the user lands on the feature page
2. Embed a 30-second overview video of this feature
3. Write the key benefits of using this feature
4. Link to your detailed article for more information

Actually, you can do this! We call this Contextual Page Level Help.

Here is how Guided Learning can help you look like a pro:

• Create a new walk-through guide on your guides page
• Make the first step a splash.
• Use the display settings to change the placement of the tip to be inside-top-right

• Now open the extended text editor and write/embed the desired content.
• Be sure to remove the Back button and consider using remind me later
• Remove the Highlight; this would allow the user to interact with the page as he sees fit while reading your content.
• Under the Advanced Settings, set Fixed Position; this will make the tip stay in view as the user scrolls the page up or down.

Here's the result:

Create Popup Message on Disabled Element

Instructions

Add the steps involved:

1. Create the disable layer as you normally would
2. Make it invisible and set it to advance on click

   

3. On the same step, create another sub-step that will 'show on hover'.
4. Set the target element for this tip to .stDisableDiv

   

The way OGL disables an element is by placing a "transparent" layer on top of it. If for example we disable a button when the end users click on the button they are in fact clicking on that transparent layer and the button never "sees" the click and is hence unusable.

When you set a tip to show on hover, OGL waits for the end-user to put their mouse over the relevant element and show the tip then; but if the element is also disabled, the mouse will never be over the element but only on that "transparent" layer mentioned above.

The solution is to have the tip show when the mouse goes over the layer instead of the element itself.

Embedding an IFrame in an Iridize Step

One of the cool ways of using Guided Learning is embedding external content into a Guided Learning tooltip.

You can use this feature to:

• Provide your users with a survey that you’ve created (in SurveyMonkey or in Google Sheets for example) directly over the interface of your product.
• Give your users direct access to relevant information in your FAQ or Knowledgebase while they are using the product
• Sharing information from an external source or website in a contextually relevant

This feature utilizes Guided Learning’s ability to embed iframes (or Inline Frame) in our tooltip. This iframe-tooltip can appear as single-step guides or as part of a longer guide (one of the steps), based on your requirements and the process.

And, of course, these guides and tooltips can be made to appear according to pre-set conditions (only once, only on certain pages, only to certain people, etc.), just as any other guide. In addition, Guided Learning collects all usage data and lets you know that your users have actually seen this content (even though it is outside of your product).

793px

Embedding an iframe

The mechanism of embedding an iframe into a bubble is similar to embedding a video or an audio link and uses the same process. Guided Learning has a generic algorithm that recognizes the type of content that is provided in the URL and automatically deploys it correctly in the bubble.

Just as with video and audio, there are two ways you can embed iframes into Guided Learning tooltip. In both cases, the process is easy and quick.

From the Editor

• Launch the Guided Learning Editor

• Click (1) Open Full Editor, then select (2) Embed Media From External Sites (see Image)

• In the console box enter the URL for your iframe and click “ok”

• The external website will now appear in your Guided Learning tooltip

• You can minimize the Expanded Editor and either continue to the next Step or click “Done” and continue to the Guide Activation Conditions.

From the OGL Console

1. Click New Content.
2. Select Training Content from the Gude Type dropdown.
3. Enter the Location URL of the page you wish to embed.
4. Enter a Display Name.
5. Click Create Content.

Next:

1. Select a Training Type from the dropdown.
2. Select Modal from the Renderer dropdown.
3. Click Save.

• You can now choose the URL you wish this guide to appear on.

IMPORTANT: Some products do not allow you to embed them inside of an iframe. We suggest you test each page to see that it works before launching it to your users.

Expanded Content Editor Reference

The expanded view of the editor includes many options for creating, styling, and embedding rich content into your Guided Learning guides and walkthroughs. Below is a quick reference for the most important options and their application.

-

View Source: view and edit the HTML source of the step's content directly.

Advanced Paste: when pasting rich text content into the editor you may want to use these buttons to paste as plain text (without styling) or to paste from Word and keep the content styles intact.

-

Undo/Redo: undo changes to the content or redo changes that were previously undone.

-

Clear Styling: remove all content styling, such as text color, background color, font size, and type, etc.

-

Quote: turn selected text into a Quote element with its custom styling.

-

Text Direction: Set the direction of the currently selected paragraph to Right or Left.

-

Link/Unlink: turn selected text into a link (anchor) or insert a link at the current cursor position. The Link Dialog allows you to set the type of the link, its URL, and its target window (open in same/new tab or window).

-

Table: add or modify a Table element. Table Dialog lets you set table properties such as the number of rows and columns, table headers, border, width, and more.

NOTE: you can also right-click a table in the content to open the table properties as well as cell and row-level options.

-

Special Symbols: add a special symbol to the current cursor position. This is especially useful for adding currency symbols, such as Euro or Pound or Yen.

-

Image: add or modify an Image element. The Image Dialog allows you to set image properties such as its URL, size, alignment, and whether it is a Captioned Image.

NOTE: you can change the Image's size both from the Image Dialog or by the in-content drag-to-resize controls. For Captioned Images, the caption can be edited directly in the content.

-

Embed Video (and media): add or modify a Video or Slideshow from and external sources such as Youtube, Vimeo, and Slideshare. While the main use of this option is to embed Videos in guides and messages the full list of supported services also includes Audio, Photo and Rich Content sources such as Soundcloud, Bandcamp, Flickr, Instagram, and Wikipedia. Here you may find the full list of currently supported sources.

-

Text Style: set or modify the selected text's Style (Heading 1-6, Paragraph), Font type, and Font Size using these drop-downs.

-

Emphasis: set or unset Bold, Italic, and Underline emphasis on the currently selected text.

-

Text Alignment: Set the alignment for the currently selected paragraph to Left, Center, Right, or Justify.

-

List: add a numbered or bullet list. Right-click the list elements to open up the list properties dialog, where you may choose numbered list type (Decimal, Latin numerals, Alpha, etc.) or bullet list type (Circle, Disc, or Square).

-

Indentation: increase and decrease text indentation level. Increasing the indentation level of a list item creates a nested.

-

Text Colors: set the text and background colors of the currently selected text. The color selection dialog lets you choose a color from a list of preset colors or enter your own custom colors.

-

Session Variable Button: add a Session Variable Button. Session Variable Buttons can be used to create rich guide flows based on user choices. Clicking on a Session Variable Button dynamically sets a Variable that can be used in Step and Branch conditions to control step activation and guide flow. The Variable can also be persisted as a User Field, which can be used in Guide Activation Conditions.

Table Border Removal

When creating a tip containing a table for formatting purposes (padding), you probably don't want the border to be visible.

To hide the border, add the following to the theme:

div.sttip table, div.sttip tr, div.sttip td {

border: none;

padding: 6px 9px;

}

Horizontal Scrolling

When you are on the top home page of Fusion and you need to have the user select an element from the horizontal scroll bar at the top of the page that is not visible unless you scroll, and you want to have an additional tip in the same step for the next navigational step, follow the settings in the screenshot below:

Pay special attention to the Scroll parent selector and make sure it is set to "#navmenu-wrapper".

How can I embed a video in a guide?

In order to embed a video you must first upload the video to a video hosting service (e.g. Youtube or Vimeo). If your video is hosted elsewhere please work with your Oracle account team.

Video Guide

There are 2 options to embed a video an Guided Learning guide. If you simply want to share a video with your users Guided Learning allows you to quickly create a video; a video guide is a guide with a single tooltip that contains a video. It will look something like this:

To create such a video guide follow these instructions:

Guided Learning allows you to embed a video in any step of any walkthrough guide. You never need to create a special guide in order to embed a video.

Open the relevant guide for editing; select the step you would like to embed a video in or create a new step. Once the step is selected open the full text editor (see image below).

once clicked, click on the the 'embed media' button and paste the URL of page where the video is hosted.

Note: Try both the URL from the browser's address bar or the embed URL. For example, in YouTube those the URL looks like this

https://www.youtube.com/watch?v=L4VERUyBEVc&index=4&list=PLYZ9LfvwzQZJDMSz6KsPDfJQqYBmpa5-R

and the embed URL looks like this:

https://youtu.be/L4VERUyBEVc?list=PLYZ9LfvwzQZJDMSz6KsPDfJQqYBmpa5-R

How can I point a Guide to the OGL Widget?

Follow these steps to Point a step in a guide to the OGL widget:

1. Select the Splash to temporarily give the step a target as .body
   

2. Select Target to enable the functionality to manually select the target selector.
   

3. Select Edit Selector to enable manual editing of the target selector with a text string.
   

4. Once the edit field is active, replace the current selector with the following: .ou-convergence-launcher
5. Select the check mark (√) to save your changes.
   

Note: The step will not display in the editor, as the OGL widget is not present whilst editing a guide. Test your changes by selecting ‘Save and Close’ and then by running the guide from the OGL widget.

How do I select a column?

Selecting a column is not straight forward since a column is not an HTML element. An HTML table is modeled as a set of records displayed one after the other. The columns are only a matter of display.

Instead of selecting a column it is recommended to point a tip at the column's header.

If you want to create a border around the column and mask the rest of the page you will need to select the entire table and then use the highlight stretch to make it smaller.

Use negative numbers for the left and right to make the highlight "smaller".

IMPORTANT: using the highlight stretch option is not responsive. the pixels you choose are hard coded no matter what the size of the screen is.

You may also need to check the offset of the tip itself because by default the tip will position at the center of the table. To do that use the tip offset setting

How do I skip the navigation steps if I'm already on the right page?

Consider the following use case:

You have created a guide that instructs the user on how to update the contact person for an account.

Your guide is divided into two logical parts:

1. Searching and navigating to the relevant account
2. Updating the contact person

Now what if the user is already on the page for the account, you would want the Guided Learning guide to skip the first part of the guide and jump over the first part directly to the second (i.e. updating the contact person).

Let's see how this can be achieved with Oracle Guided Learning

Essentially we need to make our guide identify that it is on the right page and if so jump (branch in Guided Learning speak) to the first step of the second part.

1. To do that we will add another splash tip on the first step of the guide
2. Make this tip invisible

   

   Make sure the 'Advance when' option is left unchecked.

3. Add a branch to jump to the relevant step (first step in the second part)

   

   If we stop now, the guide will always jump to the second part. So we need to add step conditions to limit this behavior.

4. In 90% of the cases a single condition to match the URL of the page will suffice

   

   Note that you don't have to provide the full URL

How to Capture New Screenshots in OGL

Base guides include screenshots captured in a demo Vision environment. You can change the screenshot from Vision to your own Cloud application screenshot.

There are two methods to generate screenshots in OGL: auto capture and manual capture.

Method 1: Using Auto Capture

1. Open the guide for editing.
2. Press Ctrl + Shift + A to authorize screen captures.
3. Select the Auto capture check box if it is not already enabled.
4. Click the Save and Next button (bottom right option in the screenshot below).

The screenshots are now automatically captured.

• To continue capturing screenshots automatically while reselecting the guide elements, use the Save and Next button.

  

Method 2: Using Manual Capture

1. Open the guide for editing.
2. Press Ctrl + Shift + A to authorize screen captures.
3. Deselect the Auto Capture check box.
4. Click the Camera button (see screenshot below). Once this is clicked, the screenshot is manually captured.

   

Changing Default “Vision” Screenshot

1. Log in to your cloud application.
2. Open the OGL Help Panel.
3. Click on the Step guide icon as shown below.

   

   The Step guide appears as shown below.

   

4. Click the unpin arrow (see the red box in the screenshot below) to detach the step guide and open it in a new tab. Having the base step guide open and available will make it easier to determine if you need to reselect target elements in your bae guide while recapturing screenshots.

   

5. 1. Open the OGL Console (https://guidedlearning.oracle.com/account/#/).
   2. Open the guide for editing.
6. The OGL Editor opens as shown below:
7. Press Shift+Control+A to enable screenshots
8. Choose your step where you want to change the screenshot
9. Using Method 1 or Method 2, you may select your element and click on the Save and Next or the Camera button
10. Repeat for other steps or tips where you want to change the screenshots
11. Click Save and Close to save the guide

    

How to Increase the Tip Width of the Message in OGL

Workaround

1. Create a Process from the New content

   

2. Create a splash tip and set the tip width as per requirement

   Note: Update the step conditions as required. The page conditions can also be added in the guide activation setting.

   

3. Change the type from Process to message in the guide settings

   

4. Select the guide to autoload in the guide activation setting

   

   Note: To change the tip width further, change the message type to process, update the tip width and revert the type to message.

How to Launch a Guide Based on User Interaction - Create a "Launcher Guide"

Don't wait for the users to pull the guide, push the guide to them:

• The best way to train a user (on a process) is when s/he uses the process for the first time.
• You want to share more information with the user about the feature he/she has just started using.

Guided Learning allows you to launch a guide based on a user's interaction with your application. Common use cases would be:

• Launch the 'create lead' guide as soon as the user clicked on the 'create new lead' button. Or more generally, launch a walkthrough guide as soon as the user clicked on a button.
• Launch a guide as soon as the user starts filling a form
• Launch a guide when the page contains something. For example, launch a guide if a common error message appears on the screen.

We call these guides Guided Learning Launcher Guides.

Normally, a launcher guide would have a single, invisible step that would wait for the desired user interaction. And a branch to launch the desired guide as soon as the user makes this desired interaction.

How to Launch a Guide from another Guide

There are several ways to link two guides together with Guided Learning.

Launch a guide when the user completes another guide

To launch a guide when the user completes another guide we need to create a branch.

Select the last tip in your "first" guide. Open the Advanced Settings panel and click to add a new branch.

Add a 'Launch a Guide' branch and select your "second" guide from the drop down list.

NOTE: You do not need to select a step. By default Guided Learning will start the guide from the beginning.

Launch a guide when the user clicks on a button in a tool-tip

Sometimes you would like the user to choose which guide they want to launch now. What if you would like to ask the user "What would you like to do now?"?

To create such an experience type the text of your tip (including the text of the options). Now select the text for the first option and click on the Launch a guide button.

In the popup, select the guide that you want to launch. You can choose whether you want the display to be a link or a button.

How to Make Tasklist Fixed at One Position

Issue: Tasklist was moving around the screen and difficult for users to find.

Instructions

Add the steps involved:

1. In design kit, search for the below code:

   div.sttip.ir-todoList {

    display: inline-block;

    position: absolute;

2. Change the value for position from absolute to fixed as shown below:

   div.sttip.ir-todoList {

    display: inline-block;

    position: fixed;

How to Prevent a Tooltip from Hiding a Drop Down Menu

We often receive a request that sounds something like this:

"The top navigation of my application uses hover menus.
When a user puts his mouse on a menu item a sub-menu is opened;
when the mouse moves out of the item the sub-menu disappears. 
If I place a tooltip on the menu item, as soon as the mouse is over 
the item, the tooltip covers the drop down and the user cannot see the sub-menu."

Notice how the tooltip hides the Media sub menu.

The best way to address this issue is using step conditions. Step conditions allow you to condition the display of any tooltip. In this example, we would like to tell Guided Learning to only show this tooltip if the sub-menu is not visible.

To add this condition, click the Add link under the tooltip's activation settings.

Once, clicked, add the following condition.

Notice how we are testing if the first item in the sub-menu (i.e. campaigns) is visible.

You can also amend the tip width or placement in the Display Settings. The tip width is measured in pixels or %. If just numbers are entered, it is pixels. For percentage, put a “%” at the end of the number.

How to Setup a "Remind me later" Button

Remind me later is very useful when launching a guide automatically.

There are 2 things you need to do:

1. Check the 'remind me later' setting in the first step of your guide.
2. Add the following activation conditions to the guide.

The first conditions determines how many times the user will be shown this guide. In the example above, if the user clicked 3 times on remind me later he will not see the guide again.

The second conditions determines what is the minimal time between 2 views of this guide. In our example the guide will not be displayed more than once per day (86400 seconds).

The third conditions makes sure that if the user has already engaged with the guide or closed it on purpose he will not see it again.

How to Work with Element Selection Settings

In OGL Editor, Element Selector Settings allow you to select Element Text, Element Title or Id Attributes of the page elements of the application you’re working with.

Managing Fusion Account for Only English (Default) Language

Element Selection Settings are unchecked by default in OGL Guide Editor for Fusion applications. When selecting an element in Guide Editor for a single language account, try to choose Fusion-specific selector. If there’s no Fusion-specific selector available for the selected element:

1. Click the Settings gear in the top-right corner of the Editor

   

2. Enable ‘Use Element Text’ and ‘Use Element Title’ options.

   This will ensure selection of Title and Attribute of the object and will result in fewer element selection issues during guide upgrades.

   

Managing Fusion Account for Multiple Languages

For multi-language accounts, it is recommended to disable Element Selection Settings. The selection of Title and Attribute of the objects will result in more element selection issues during guide upgrades because of difference between elements text/titles in default language (English) and other languages.

Managing Non-Fusion Accounts

For Non-Fusion applications, Element Selection Settings are enabled by default. When selecting an object, by default the Guide editor will look for the Title or Attribute of the Object. They are good for capturing the element because they tend to be constant and are unique in a page. This ideally is the best practice for choosing Selectors for Non-Fusion accounts.

I want to create a new guide that is based on another guide I have already created. Is this possible?

In the OGL Console, find the guide you want to clone, click on the bottom right, then click on the Clone button, a copy of your guide will be created for you. Open it and make your desired changes.

I want to enable user to proceed upon clicking the spacebar

Guided Learning has a special event to capture clicking on the space bar as well as other major keyboard keys like ENTER and BACKSPACE.

Under the 'Activation Settings', you will see a drop down next to the 'Advance when:' option; select 'User presses SPACE key' and you're done.

I would like guide to launch only on the root "/" path of my website

To do this you will need to create the following URL condition.

'when page has URL matching /' and check the exact match setting.

Set up a Cross Domain/Cross App Guide

Cross-Domain

An application can have IFRAMES which are can be serviced from the same domain as the main page (also known as the top) or from a different domain. For security reasons, if an IFRAME is serviced from a different domain, the browser does not allow the OGL player to access it from the top window.

To create OGL solutions that can start from the top window and continue in the IFRAME, we need to create a communication channel for OGL between the top frame and the IFRAME.

To make this happen, the following prerequisite steps have to be carried out:

1. Request the correct script for the main application (if applicable)
2. Request the OGL script for the IFRAME (Ensure iridize.stateOnly=window != top ? true : undefined; is included in the JavaScript for the IFRAME and the main application)
3. Embed/enable OGL in the top frame (the main application i.e. Fusion)
4. Embed OGL in the IFRAME (Note: if there are several IFRAMEs being serviced from different domains, each of these IFRAMES need to have the OGL script embedded)

How to Set-up a Cross-Domain Guide

Let's say we have a process guide with 10 steps as an end-to-end process, with the first five steps being executed in the top frame, and the last five being executed in the IFRAME as illustrated below:

From the illustration, we see that we need to set up a Cross-Domain Guide Connection between steps 5 and 6 in the E2E Process. To enable this, we build the E2E process guide in parts:

1. First, build part of the process to run on the 1st application as one guide (Steps 1-5).

   

   

2. Then build the part of the process to run on the 2nd application (Steps 6-10).

   

   Note:

   Take a note of the apiName.

   

3. Open the top frame part of the guide in the OGL Full Editor
4. Select the last step in the guide (i.e. step 5 in our example)
5. Select Step Settings
6. Expand the Advanced Settings section
7. Select Add next to Step Branches
8. Select Add Branch

   

9. Select Launch a Cross-Domain Guide from the dropdown.
10. Enter the apiName of the iframe part of the guide
11. Enter the Start from step
12. Enter the selector for the IFRAME (See IFRAME Selector Guideline below)
13. Select Done to save the branch.
14. Save and close the guide

    Once these steps have been completed, the user executes the guide (top frame part of the guide), the iframe part of the guide will be executed when the user moves past the step with the branch.

    Key considerations

    • Determine if the iframe part of the guide should be in the OGL Help Widget or not)
    • Determine when and how the step with the branch advances (i.e. advance on click etc.)
    • Determine how to track these guides in analytics
    • Determine a clear documentation strategy for maintenance
    IFRAME Selector Guideline for Cross-Domain BranchesBasic Idea on Selectors
    • attr^=val : gets an attribute starting (^) with val.
    • attr*=val : gets an attribute containing (*) val.
    • attr$=val : gets an attribute ending ($) with val.

    For example:

    • iframe[src*="/servlet"] returns an iframe with src containing “/servlet” in any part of the string.
    • iframe[src^="/5001"] returns an iframe with src starting with “/5001”
    How to get the proper selector

    1. Do an inspect element on the iframe.

    2. Find the iframe src attribute.

    3. Use a subset of its value. For instance: The iframe “File Attachment” has the src“ /5001 F000002jdbq ?isdtp =vw&isWsVw=true&nonce=2014e000ccc4c41384944ea28a38fe591b2b936d9b48d5d99f2bdffda916bfd5&sfdcIFrameOrigin=https%3A%2F%2Fkphr--trn1.cs90.my. salesforce.com”

    • The following three selectors can be use for the iframe above.
      1. iframe[src*="?isdtp"]
      2. iframe[src^="/5001"]
      3. iframe[src$="my.salesforce.com"]

    Always pick the selector that looks more likely to identify a single iframe. For instance, by choosing 2 or 3 there is a higher chance of referring to more than one iframe, therefore the cross-domain call could fail.

• 

In case of nested IFRAMES (iframe inside another iframe)

use '>>' as a separator eg: iframe[src*="AdfLoader"] >> iframe[src*="PageLoader"]

Cross-Application

An application can start in one application (i.e. Fusion) and continue in another application (i.e. CPQ). Normally, this means a new browser tab will be opened when moving from the first application to the second. Similarly, we need to create a communication channel for OGL, we achieve this by embedding OGL in both applications.

The following prerequisite steps have to be carried out:

1. Request the correct script for the main application (if applicable)
2. Request a new appID and the OGL JavaScript for the 2nd application (Ensure iridize.crossAppIframe=true is included in the JavaScript)
3. Embed/enable OGL in the first application ( i.e. Fusion)
4. Embed OGL in the 2nd application

How to Set-up a Cross-Application Guide

Similar to a cross-domain guide, a cross-application guide has to be built in parts. the key difference is that for cross-application, the parts cannot be in the same OGL APPID.

Let's say we have a process guide with 10 steps as an end-to-end process, with the first five steps being executed in the main (1st) application, and the last five being executed in the 2nd application as illustrated below:

From the illustration, we see that we need to set up a Cross-Application Guide Connection between steps 5 and 6 in the E2E Process. To enable this, we build the E2E process guide in parts:

1. First, build the top-frame part of the process as one guide (Steps 1-5) in one appID.

   

   

2. Then build the iframe part of the process (Steps 6-10) in the second appID.
   
   
3. Go to the first part of the process guide
4. Open the guide in the OGL Full Editor
5. Select the last step in the guide (i.e. step 5 in our example)
6. Select Step Settings
7. Expand the Advanced Settingssection.
8. Select Add next to Step Branches.
9. Select Add Branch

   

1. Select Launch a Cross App Guide from the dropdown
2. Enter the appID of the 2nd application
3. Enter the apiName of the guide in the 2nd application (this is the second part of the process guide)
4. Enter the Start from step
5. Select Done to save the branch
6. Save and close the guide

Once these steps have been completed, the user executes the guide (in the first application), the second part of the guide will be executed when the user moves past the step with the branch.

Key considerations

• Determine if the iframe part of the guide should be in the OGL Help Widget or not)
• Determine when and how the step with the branch advances (i.e. advance on click etc.)
• Determine how to track these guides in analytics
• Determine a clear documentation strategy for maintenance

Smart Tip and Beacon Best Practices

1. Create a Smart tip or Beacon guide from the New Content
   
   
   
   

   Configuration:

   Guide Type → Select Smart Tip from the drop down

   URL → Based on customer instance

   Display Name → According to requirement

2. Smart tip: A tip which displays when a user mouses over ? to provide more information about the field.

   Do: All the tool tips within the smart tip guide should be confined to a specific page.

   Don’t: Create tool tips which are related to two different pages in the single smart tip guide.
   
   

3. If two or more smart tips need to be created on one page, create all the smart tips in one step as multi tip
   
   
   
   

   Display Settings for Smart tip or Beacon guides:

   • Highlight → Disable
   • Hide Next button → Enable
   • Show Back button → Disable
   • Hide steps count/progress bar footer → Disable
     
     
     
     

   Activation Settings: No Changes to the default.
   
   

   Advanced Settings:No Changes to the default.
   
   

4. The page should be defined in the activation condition with Autoload turned on
   
   
   
   

   Mandatory: Always have a page URL condition mapped to the smart tip where it should appear.

5. Remove any other condition under activation other than page URL Condition
   
   
   
   

   Note: We can certainly add role segmentation for smart tips as desired.

   For a Non-Fusion application, we need to manually take the URL and add it as a condition in Activation.

6. Ensure both Smart tip and Beacon are not set to Sticky Guide by unchecking the option
   
   
   
   

   Note: Enabling Sticky Guide for an Auto Load smart tip causes a performance issue.

So if my application has a form and the user clicks on close instead of submit, I would like for the guide to end then. Is that possible?

Yes, it is most certainly possible:

1. On the step where you are expecting the user to click submit,
2. Create an invisible tip that would advance when the user clicks on the cancel button
3. Add a branch to this new tip that would close the guide. The branch is activated as soon as the tip is 'complete' which in our case would be when the user clicks on the cancel button.

Step Conditions and Page Conditions

Step Conditions control when a certain step will be activated. Normally this means when to display a certain tooltip. For an invisible step, they will normally control when the guide should advance to the next step. The types of step conditions are identical to Page type conditions available in the guide activation conditions.

This article describes all types of conditions that you can create using the Guided Learning editor.

For more details on the underlying concept, please refer to the next article, Step Conditions Explained.

URL Matching

URL Matching will match against any part of the page's address.

You can use regular expressions as well. Use any javascript regular expression by surrounding it with [ ] brackets. For example: [product_id=1.*] will match all URL with product_id's that starts with 1.

Use the "exact match" check box if you want the entire path to match exactly with the provided value. Note that the domain (e.g. http://www.iridize.com) will be ignored in this evaluation.

URL Parameter

Will match against a specific URL parameter. You can either test that the specific URL parameter exists or evaluate its value.

Variable

Will match against a javascript variable. You can either test the existence of a variable or test its actual value.

Cookie

Will match against a browser cookie. You can either test the existence of a cookie or test its actual value.

Session Variable

Will match against a special Guided Learning variable. The Guided Learning javascript API allows setting session variables that exist only throughout the duration of the currently logged in user. You can then condition your guides to display based on these variables.

Element

Will match against any element on the page's Document Object Model (DOM). You can also extend this condition by telling Guided Learning to wait for multiple objects matching the provided selector.

Visible Element

Will match against a visible element on the page's Document Object Model (DOM). This is more restrictive than an element condition because in HTML an element can be invisible.

Step Conditions Explained

Step Conditions control when a certain tooltip will be displayed.

Before displaying a tooltip, Guided Learning will iterate over all of the step conditions; only if all conditions are met will the tooltip be displayed. If any condition is not met Guided Learning will not show the tooltip.

Being that web applications are dynamic in nature, Guided Learning is continually testing all conditions; as a result, your tooltip can be displayed and hidden multiple times based on how the user interacts with the page.

Example Use Case

Let's say you have a social share button in your application. To encourage your users to click on this button, you add a tooltip to point directly at it. But, when the user clicks on the share button a popup window appears; when it does you will probably want the tooltip to disappear. When the popup is closed you would like the tooltip to display again.

No problem!

What you need to do is to add a step condition to this tooltip. The step condition should say "Show this tooltip when the page does not have a visible share popup".

Adding Step Conditions

• https://docs.oracle.com/en/education/oracle-university/guided-learning/user-guide/creating-ogl-content.html#GUID-1F27177C-4A85-42C8-ABDF-7E29FED9E577

Task List / Onboarding Widget

The Improved Task List allows you to offer your users a personalized list of guides, videos, and links, which are presented as one group, and allow them to see how far they have advanced in completing/viewing the list.

Task Lists can be used for:

• Training flows that walk your users through a new software platform
• Onboarding sequences that train and certify new employees
• Pre-defined checklists the users need to complete while working on a certain process
• And more…

Guided Learning’s Improved Task-List has several special features that make it a very powerful tool for onboarding, training, and assistance. With our Improved Task List, you can:

• Create unlimited Task-Lists per product
• Create a Task List for each type of user, based on role, past activity – or any other rules you wish to choose
• Allow your users to reset the task list progress

The Task List Experience

An end-user can access and launch tasks lists in two methods:

• Launch the List from the Task List icon which floats on the bottom right of your screen
• If the List is set to be available from the Help Widget you can search for it and launch it from there.

The Task List Experience

An end-user must set the User ID in the javascript to enable the Task List.

Note:

If the user ID is not set in the Javascript, it throws an error and the task list does not get displayed.

Creating a Task List

• https://docs.oracle.com/en/education/oracle-university/guided-learning/user-guide/creating-ogl-content.html#GUID-BA7681F2-BE0C-4A3E-B888-DC8FF03D217A

Guided Learning's new Task List is a very powerful mechanism for helping your users find their way around a new project.

Understanding Guide Options

• https://docs.oracle.com/en/education/oracle-university/guided-learning/user-guide/creating-ogl-content.html#GUID-6F20CFC7-79CE-4FC1-B1B0-86CF2253500C

URL Configuration for a Guide

There are several URL parameters that you can configure to fine tune and customize the behavior of any walk-through guide.

In this article we will go over all of them in detail.

URL

You explicitly set this URL when you enter a URL and start creating a guide.

The URL controls the following:

• Unless you manually set the Editing URL (see below) this will be the where Guided Learning will take you to edit the guide when you click on the guide's name.
• It is the URL you will be redirected to when you preview the guide.
• If this guide appears in your help widget and you have configured the guide to Redirect if on different page than URL, than when the guide is clicked in the help widget Guided Learning will automatically redirect the end user to this URL.

Normally this will be a link to your staging environment where you create and test your guides before rolling them out to production.

You can change the URL on the guide options page under Advanced Options.

Editing URL

By default this will be identical to your the URL above. But if for any reason they should not be the same you can change it.

This URL has no bearing on where your guide will be seen by your end users

You can change the editing URL on the guide options page under Advanced Options.

Activation URL

This URL tells Guided Learning on which URLs to display the guides in the help widget and on which to launch the guide automatically (aka autoload).

Unlike the first two URL types there can be multiple Activation URLs. Furthermore you can use regular expressions to create URL wildcards.

Activation URLs are configured via the 'URL matching' condition type in the guide activation conditions.

Using Branches for Form Validation

Branches are a very powerful tool for changing the flow of a guide when filling out a form.

But there is much more to branches and forms. Guided Learning allows you to use branches to validate user input.

• What if the user did not make the expected selection in the drop-down menu?
• What if the user had left a field blank?
• What if the user had entered a password that is too short?

Combining branches with the Guided Learning conditions framework gives you the power to verify user choices.

Let's see how to do this with Guided Learning.

All of the examples are based on the YouTube form for editing a video's basic information.

Example 1: Enforcing a Selection

For this example, let's make sure that the user sets the video to be Public.

Our guide will look something like this:

1. Select Public from the Privacy Settings dropdown
2. Great, you've selected Public

In order to make the user select Public, we will create a loop so that if Public had not been selected we will remain on step #1 instead of advancing to step #2.

The natural flow of any walkthrough guide is to move from one step to the next (i.e. from step 1 to step 2, from 2 to 3, and so on). In order to break this flow, we will add a branch. Before naturally moving to step #2, Guided Learning will inspect all branches and if all of the conditions for a certain branch are met that branch will be taken.

In our example,

If the user did not select Public from the drop-down menu we want the guide to go to step #1. First, we will set up the branch (jump to the first step in the guide).

Then we will click to Add/Edit the condition:

Guided Learning is fully aware of what a drop-down menu is; when selected it will automatically choose the selected value and mimic the drow-down so that you could select the value of choice.

Note that if the user did select Public, our branch conditions will not be met and Guided Learning will default to the natural flow and advance to step #2.

Example 2: Disallow Empty Field

For our second example, on the same Youtube form, let's make sure the user selects a title for the video.

Much like in the previous example, our guide will have the following 2 steps:

1. Name your video.
2. Great! Name given.

   The branch is going to be very similar. In fact, the only difference is going to be in the condition. Here, since we are not testing against a drop-down menu we will create the following condition:

   

The strange-looking [$^] is the regular expression way of saying "empty". While this is somewhat complex, the fact that Guided Learning uses a regular expression engine allows use of very powerful text conditions like:

• has the word acme or corp - [acme|corp]
• at least 8 characters long - [\w{8}]
• only numbers and letters (e.g. no special symbols) - [^\w+$]
• capital first letter and only small letters after - [^[A-Z][a-z]+$]

The surrounding [] are for letting Guided Learning know there is a regular expression inside.

Video does not Align in Center

Does your tooltip load like this (misaligned toward the left or right of the screen)?

To resolve this, please open the guide in the editor.

Go to the display settings and under Tip placement choose 'inside-center'.

Video not Showing in Tip

By default, Guided Learning videos are set up to be responsive and fit on any screen.

When taking advantage of this responsiveness, the alignment option (see image below) is obsolete.

When embedding a video you have 2 options:

1. Use the responsive video and not use the align left/right option (set alignment to none. the width of the tip will be adjusted to fit the video and the screen automatically)

   

2. Disable the responsiveness by setting a width to the tip in pixels (under the display settings) and not in %

What is a beacon?

A beacon is a great way to attract your users and make them engage with a new feature or component that was added to your application.

The beacon is the pulsating circle. You can place it on any element in your application by selecting it in the flow editor. The beacon setting is under the display settings.

A great way to use a beacon is as a launcher to another guide. This will allow you to see separated analytics for users who engaged with the beacon (by hovering over it).

What is the best way to guide a user while filling out a form?

Generally speaking, users today know what a web form is and how it needs to be filled. You probably won’t provide your end user with much added value by pointing at a password field and telling him/her to “enter your password in the text field”.The best practice is to provide your users with an overview of the purpose of the form. Provide additional information about fields that may be unfamiliar to your users. It is recommended not to disable the highlight as your users may want to go back and make changes to other form fields.

What is the help icon?

Smart Tips provide context-sensitive help on a field, button, or other UI element. There are three types of Smart Tips:

• Icon: Used to provide context-sensitive help, hover text, and supplemental information to buttons, labels, and other screen elements
• Invisible: Anchored to an element on the page, Invisible Smart Tips are used to provide context-sensitive help without using a help icon or beacon
• Beacon: Like an Icon Smart Tip, a Beacon adds a pulsing image drawing the reader's attention. Best practice is to use this type of Smart Tip for emergency and temporary notifications

Guided Learning places the help icon to the right of the element.

The help icon setting is available under the display settings in the Guided Learning editor.

You can style the help icon by downloading the design kit.

Note:

When setting a help icon, select the Tip placement and Help icon placement on the same side, as shown in the below screenshot. This will prevent the Tip from overlapping the selector which can cause the Tip to flicker.

Do not set the Tip placement and Help icon placement on opposite sides as this will cause the Tip to overlap the selector and cause the Tip to flicker.

When I use two or more activation options in a guide, do they work like OR or like AND conditions?

They work like an AND.

That is, all conditions must be met for the guide to be launched.

Note that if you want to create an OR condition so that the guide could launch on more than one URL, you can do that using a regular expression.