This document explains how a Conferences i/o web app can be embedded into an HTML iframe. 


TABLE OF CONTENTS



Why would I want to embed Conferences i/o into an HTML iframe?


There are two common patterns for embedding Conferences i/o into an HTML iframe.


Pattern #1: Livestream / webinar integration

Web-based livestream platforms often allow for custom HTML to be inserted into a side panel, in a space that might typically be used for live chat or information about the livestream. When this option is available, an HTML iframe can be used to insert Conferences i/o into that side panel space. Though viewers can always use a secondary device (like a phone or another browser) to join Conferences i/o, embedding into a side panel is certainly the most convenient option.


Pattern #2: Intranet integration

Most intranet software (such as Sharepoint) allows for custom HTML to be inserted. A common use-case is to embed a Conferences i/o session in an intranet to collect questions for an organization-wide meeting.


Other patterns

Though livestream integration and intranet integration are the most common patterns, there are certainly other scenarios where an HTML iframe makes sense.


What Conferences i/o URL should be embedded into an HTML iframe?

This question has a complex answer because there are two potential forms of URLs in Conferences i/o.


The first form is a standard Conferences i/o URL, what a user would see in the browser for a Conferences i/o web application, such as https://example.cnf.io/sessions/abcd.


The second form is a modified Conferences i/o URL that specifically triggers an “activation” process that gives the Conferences i/o iframe access to browser cookies. The modified form is identical to the standard form, except that “/iframe” is appended between the domain and the remainder of the request, like in https://example.cnf.io/iframe/sessions/abcd.


Please note: The iframe URL must be used when collecting identifying information (name, email, etc), using the consent module, utilizing a single sign-on integration, passing identifying information into Conferences i/o via the URL, or using attendance tracking functionality. Please see Appendix A below for more information on the modified URL form that triggers an activation process.


What does HTML iframe code look like?

Here is a simple example of HTML iframe code to embed Conferences i/o.

<iframe 
    src="https://help.cnf.io/sessions/mkta"
    style="width:100%; max-width: 400px; height: 600px;">
</iframe>

Notice that the URL embedded into this HTML iframe is a direct link for a session.


This example includes CSS style attributes which help define the size of the <iframe>. Please note that these style attributes may need to be customized for use in other applications.



Appendix A: HTML iframe Activation Process

Why is the activation process necessary?

Like all web-based applications, Conferences i/o requires access to browser cookies for normal functioning. When loading a Conferences i/o page directly, this is generally not a problem; by default the browser will allow cookies to be created in a first-party context.


However, the circumstances change when embedding Conferences i/o into another website using an HTML iframe, known as third-party context. Some browsers like Chrome allow the websites in an iframe to access cookies as if the site was visited directly. But, some browsers, such as Safari, do not. Increasingly, browsers are moving to stricter rulesets for third-party cookies, so this is an obstacle that is not going away.


Browsers block third-party cookies due to advertising networks and social networks that silently track people across the websites they visit, particularly when those sites use analytics tools provided by those networks. These are typically known as tracking cookies, and unfortunately the mechanism for blocking tracking cookies also prevents legitimate application-style usage like with Conferences i/o.


How can the activation process be triggered?

To work around the issue, there is a special way to embed Conferences i/o in an HTML iframe and have full access to cookies. This is achieved using an interstitial page on the Conferences i/o app that checks for cookie access and then helps a user activate cookie access when cookies are not immediately available.


To use it, slightly modify the URL that is embedded into an HTML iframe. If the session URL is https://demo.cnf.io/sessions/abcd, modify it by appending “/iframe/” after the “demo.cnf.io” part so that it becomes https://demo.cnf.io/iframe/sessions/abcd.


The /iframe addition triggers the special interstitial page on the Conferences i/o app. When cookies are available, users will be redirected to the expected page.


What does the interstitial page look like?

If a browser requires additional steps to activate cookies for the Conferences i/o iframe, users will see this prompt: 


The Start Activation button will open a new tab/window.


Browser-specific notes

Chrome (Windows/Mac/Mobile)

As of August 2020, Chrome on Windows and Mac is cookie-permissive by default. Generally, users will never see the interstitial page when using a Chrome browser.


Incognito Mode in Chrome — By default, Incognito Mode in Chrome completely blocks third-party cookies. An HTML iframe embedded Conferences i/o page will never work with Chrome’s Incognito mode.


Firefox (Windows/Mac)

As of August 2020, Firefox is cookie-permissive by default.


Safari (Mac/iPhone/iPad)

Safari requires the most process-wise to get cookies working. During the “activation” process, users will see a prompt like this:


Unfortunately, there is no way to avoid this step, and users must choose “Allow” to complete activation.