You are here: LearnCenter Designer > Widgets > Widget Portability - BETA

Widget Portability - BETA

Widget Portability enables you to embed supported Widgets on external SSO-enabled websites by placing a snippet of code on the hosting page. This means you can use LearnCenter Widgets on your non-LearnCenter websites, Taleo Business Edition (TBE) sites, or internal intranet sites.

You must “white list” any web sites on which you plan to use Widgets using a new Allowed Domains page in the root LearnCenter. White listing a website means you are telling LearnCenter that this website is secure for use. Once placed on an external page, the look and feel of a Widget can be customized to match that website’s design by overwriting default LearnCenter CSS styles.

Steps to Enable

To enable this feature you must do the following:

Enable SSO for your LearnCenter.
Enter the appropriate domain information ofn the Allowed Domains page (root LearnCenter > Integrations > Allowed Domains).
Copy the snippet of code from the appropriate Widget’s Embed BETA tab.
Paste the code on the appropriate external web page.
(Optional) Update the HTML code so that the Widget uses the hosting site’s CSS.

Tips and Considerations

For this feature to work, you must enable the following items. This is information you will need to discuss or present to your IT personnel and your web design staff.

Widget Publising Requirements

SSO must be enabled on the hosting website.
Hosting website domain must be listed on the Allowed Domains page (root LearnCenter > Integrations Control Panel menu).
You must have the ability to embed a snippet of HTML code on the designated hosting website.

Widget Use

Your Internet browser must allow pop-up windows (SSO authentication relies on pop-up windows)
It is recommended that you use an Oracle-recommended, modern browser, such as Microsoft® Internet Explorer® 11, or the latest versions of Google Chrome® or Mozilla Firefox®. You can use earlier versions of Microsoft Internet Explorer browsers, but there may be additional browser prompts that affect User Experience. Refer to the Oracle Learn Cloud System Requirements document (Oracle Taleo Learn System Requirements (Doc ID 1461788.1) for a complete list of supported browsers.

Embed Tab on Widgets

The Embed tab is available on the Learning Plans, Transcript, and My Tasks Widgets. Use this tab for obtaining a snippet of code to place on the appropriate SSO-enabled (and allowed domain) webpage.

The Widget Embedding Code contains a snippet of code for you to copy and paste onto the appropriate web page. This code becomes available for use once you have saved the Widget for the first time (during Widget creation). Simply click to select the snippet, copy it to your clipboard, and paste it to the appropriate web page location. There are parameters available for use with custom CSS styles. One is for styling date pickers. The second is for determining how you authenticate Users: either by pop-up (default) or iframe.

data-learn-datepicker-styles: Flag to control loading of DatePicker CSS, accepts true|false, default: true
data-learn-auth-mode: Widget SSO authentication method, accepts: popup|iframe, default: popup

If you have not yet set up a LearnCenter for SSO, there will be no code here and a message displays instead.

A similar warning message displays to alert you if you do not have an allowed domain saved on the Allowed Domains page in the root LearnCenter.

This tab only tells you if you have any saved domains on the Allowed Domains page. It will not tell you which domains are saved. You must visit the Allowed Domains page in the root LearnCenter to see a list of all saved domains.

Pasting the Snippet Code onto another Webpage

To paste the snippet onto an SSO-enabled (and allowed domain) webpage, view the page in HTML format and paste the snipped into the HTML body. If you would like to override the LearnCenter CSS styles and use the web page CSS, you can do so. All Learn Widget styles are visible in the HTML code, and are prefixed with “learn-portability”.

Example snippet code could look like this: