Iframes
  • 18 Mar 2024
  • 4 Minutes to read
  • Dark
    Light

Iframes

  • Dark
    Light

Article Summary

Overview

The Event Group, Event Overview, Session, or Checkout pages can be embedded into your web pages!

Requirements

The domain page must be HTTPS and setup with an SSL certificate. If you want this domain allowed for multiple organizations, you will need to manually add the domain into each organization.

We've created iframe code generators. Have a go with them!

Language Option Unsupported

Normally, when viewing an Event you will have the option to choose a language in the top-right corner. This is currently unsupported when embedding Events.

Please use the code below which contains examples of iframing each option. You can mix and match options below to fit your needs. For example, if you want to set a specific date and a height limit to the component, you can do that!

The script src="https://events.blackthorn.io/loader" and data-path are both required for all embedded Events. The URL https://events.blackthorn.io/loader will be the primary link. The data-path can be copy and pasted from any active Event.

The data-path is highlighted in the example URL below:
code sample

IMPORTANT STEP: Please contact Blackthorn Support to share your domain as we need to add it to your License Metadata in the LMO.

Allowlisting Domains

Do I need to include the www?

Allowlisting covers domains with or without the “www.”

To get started, you will need to allowlist the domain where Blackthorn Events will be located. The domain page must be HTTPS and setup with an SSL certificate. If you want this domain allowlisted for multiple organizations, you will need to manually add the domain into each organization.

  1. Navigate to the Blackthorn | Events Admin page.
  2. Click the Allowlist Domains tab.
  3. Click New and add the domain you'd like to allowlist.
    Whitelist Domain

Iframing into a Visualforce Page

Please find the updated code to load the component.
<div id="lightning" /> <!-- this is the div where the component is loaded-->
 function renderExecutionComponent(){
           
            //document.getElementById('lightning').innerHTML = ''; we should not be doing this
            $Lightning.use("c:BteventRegistrationApp", function() {              
                    var comapp=$Lightning.createComponent("conference360:blackthornEvents",
                     {},"lightning",function(component) {
                           //handler after component load
                    });              
            });  
 }

Also, I see there is a use of jQuery library, please ensure that it is loaded else it can result in error which will block the component.

Be sure to load the jQuery library if one is in use (not required).

Scripts

  • The script below shows an example of the Event Group view/list view. Notice the /g/ in the data-path. This is to signify the group view.
<html>
 <body>  
  <script
  src="https://events.blackthorn.io/loader" 
  data-path="/3itLbC6/g/GqSRtvJ4Nk">
  </script>
 </body>
</html>

  • This is an example of the calendar view. Notice the /d/ n the data-path. This is to signify the switch to calendar view.
    Note: the date querystring is optional, & can be used to define a default view for the calendar.
<html>
 <body>  
  <script
  src="https://events.blackthorn.io/loader" 
  data-path="/3itLbC6/d/GqSRtvJ4Nk?date=2020-11-20">
  </script>
 </body>
</html>

  • This script is an example of Sessions. This will display the related Sessions of an Event for an AttendeeLink.
<html>
 <body>  
    <script
   src="https://events.blackthorn.io/loader" 
   data-path="/en/4Px8G46/a/M_Rs9GQZ4IxU9JDGXO1pvA7-0X3nh9sduYnp4MS5TOOVv7r14QXQOCszMQwmxO0E/salesforce-basecamp-dusseldorf-5a0v4P8Nke8/confirmation/sessions">
   </script>
 </body>
</html>

  • This script is an example of Event overview. This will display a specific Event inside your webpage.
<html>
 <body>  
  <script
  src="https://events.blackthorn.io/loader" 
  data-path="/3itLbC6/4a0w3i5TFK">
  </script>
 </body>
</html>

  • This script is an example of Event Items. This will display a specific Event Item inside your webpage.
<html>
 <body>
  <script
  src="https://events.blackthorn.io/loader"
  data-path="3h2AhtF7/HNex28aSVs/free-event- 
  5a123h1ZwSX/cart">
  </script>
 </body>
</html>

  • To change the height of the iframe, use the following. If the height is not changed manually, it will automatically resize to fit your page.
<html>
 <body>  
  <script
     src="https://events.blackthorn.io/loader" 
     data-path="/3itLbC6" maxheight="800">
  </script>
 </body>
</html>

  • To change the width of the iframe, use the following. If the width is not changed manually, it will automatically resize to fit your page.
<html>
 <body>  
    <script 
        src="https://events.blackthorn.io/loader"
        data-path="event_uri_goes_here" height="400px" width="800px">
  </script>
 </body>
</html>

Embed a Media Player

The Iframe Injectors feature allows customers to embed iframes on Event’s Custom Content (Custom tabs).

The Iframe Injectors is behind a feature flag, which means that it can be enabled per Organization basis on the License record (LMO). To enable it, add a License Metadata entry for CONTENT_IFRAME_ENABLED with the value true.

To add an iframe to a custom tab:

On the Content rich text field on Custom Content enter the iframe data like the following example: "[embed prop1="xxx" prop2="xxx" .... propn="xxx"] [/embed]" where props are the required properties for the iframe (width, height, src, ….).
embed media player

If the feature is not enabled via License Metadata, the embed tag will be shown as plain text.

FAQ

Q: How can I set up a Redirect URL in an iframe?
A: The redirection domain should have relaxed CSP rules (Setup > Security > CSP Trusted Sites) or the parent domain needs to be added to the frame-ancestor rule.

Q: How can I set up Custom CSS Injection, Google Tag Manager, or Google Analytics to work with the Iframe Injectors?
A: Any style, media, font, etc … from third party sources / domains need to include these sources in their CSP rules. This also goes for Google Tag Manager, Google Analytics, and any other tracking tools that generate iframes. See https://content-security-policy.com/ for more.

If you have any questions, please contact Blackthorn Support.


What's Next