How to embed Skillable Labs into an iFrame?

Experience the power of seamless integration with Skillable Labs! Embed interactive labs directly into your website using an iframe, enhancing your existing framework and enriching the user experience of learners and candidates within the context of your brand and learning environment.

Best Practices

• Embedding Skillable Labs: This can enhance the learning experience for your users, but it also comes with challenges related to third-party cookies.

• Third-party cookies: These are essential for Skillable Labs authentication and security, but they may be blocked by some browsers due to privacy and security concerns.

• Two ways to overcome: We will show you two ways to overcome this issue:

  • Instructing your users to allow third-party cookies in their browsers.
  • Using the trusted domain feature that we recommend for a more seamless and secure solution.

• Our goal: To help you create an engaging, consistent, and smooth learning environment for your users, where they can launch and interact with labs without any interruptions or problems.

Getting Started

What is an iframe?

As you may know, an iframe is used to display a web page within a web page. Iframes are a great way to customize the look and feel for your users that launch labs, creating a more seamless experience between your website and Skillable Labs.

For more information about setting up and configuring iframes, read HTML iframe syntax by W3 Schools.

3rd Party Cookies

Skillable Studio uses session cookies to ensure secure access to labs. If 3rd party cookies are blocked by the browser, the lab is unable to be displayed within the iframe web page.

The problem with Third-party Cookies

Skillable Labs client is a web-based platform that allows users to launch and interact with labs in a browser. As many other web applications, our Lab client uses session cookies for essential functionality. If as a customer, you want to embed lab client inside your own website using an iframe, this will create a potentials issues when the browser blocks third-party cookies. Third-party cookies are cookies set by a domain different from the one hosting the iframe. In this case, lab client cannot set or read required cookies, and the user cannot access the lab. This is set by your browser, as default many web browsers will be setting blocking third party cookies by default soon. This is because of privacy and security problems of the misuse of cookies (e.g., tracking cookies, ads, malicious cookies, etc.) all around the internet.

How to create a seamless experience when embedding Skillable Labs?

With the constraints mentioned above, if you want to embed Skillable Labs into an iFrame, you have two options:

1. Indicate your learners and candidates to Allow 3rd Party Cookies.
2. Our recommended setup using an API Consumer with Trusted Domains.

Allowing 3rd Party Cookies

To allow 3rd party cookies in your browser, select your browser below for assistance allowing cookies:

• Google Chrome
• Microsoft Edge
• Mozilla Firefox

Recommended setup when Embedding Skillable Labs

To solve the third party cookies default setup and as a best practice when embedding Skillable Labs Client, we have a feature that allows customers to specify a list of trusted domains that can host lab client in an iframe. When a user launches lab client from a trusted domain, lab client will use a different mechanism to authenticate the user and store the session state, without relying on cookies. This way, the user can enjoy the lab experience without any issues, even if the browser blocks third-party cookies by default.

Follow the next steps to set this up:

1. Once you log into Skillable Studio, navigate to Admin and click on API Consumers
2. Once you are in the API Consumers, find or create a new API Consumer.
3. On the configuration screen, you will find the Trusted Domain text box under the Advanced tab:
   
4. Here add the domain of your site. You may also add more domains, one per line, all the domains you use where you embed Skillable Labs and this API Consumer.
5. Now on your site(hosted on one of the Trusted Domains), you need to call Skillable Launch Lab API endpoint and launch the lab using the generated URI.
6. Use that URI as the source of the iFrame
7. Your embedded lab should display your lab without a problem.
   

Testing Google Chrome for the 3rd Party Cookie Phaseout

As Google has begun to disable 3rd Party Cookies by default in 1% of Chrome browsers from January 4, 2024, and plans to extend this to 100% of Chrome browsers by mid Q3 2024 (full details can be found in the article: Preparing for the end of third-party cookies), it's crucial that users have the ability to test their systems today. This includes launching iFramed labs against Skillable.

Google has provided a way to do this in Chrome. To test your systems, you can launch Chrome using the --test-third-party-cookie-phaseout command-line flag. Alternatively, from Chrome 118 onwards, you can type chrome://flags/#test-third-party-cookie-phaseout in the URL bar and then enable the 'Test Third Party Cookie Phaseout' option. This will configure Chrome to block third-party cookies and activate new functionality and mitigations, simulating the state after the phase-out.