Iframes

Iframing allows for seamless embedding of various Events elements, such as calendars, Session details, and specific Event Items. This feature is essential for creating a more interactive and engaging online presence for your Events, making it easier for Attendees and interested parties to access important information directly on your site.

Use Cases

Use Case 1

I am an Event Organizer who wants to present my Events as a calendar. Using the iframe feature, I can embed a calendar on my site to provide visitors with a quick, comprehensive view of all scheduled Events, facilitating better planning and engagement.

Use Case 2

I am an Event Organizer or marketer who wants to organize multiple Events in one view. By using an iframe, I can showcase entire Event Groups on my website, allowing visitors to view a collection of related Events in one place. This is especially useful for series or themed Events, where cohesion and ease of access are key.

Use Case 3

I am an Event Organizer who wants to organize my Event by specific details. By using an iframe, I can display specific Session details within an Event, helping Attendees find the Sessions most relevant to their interests and making it easier for them to navigate the Event.

Allowlisting Domains

To get started, you must 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 must manually add the domain to each organization.

1. In the App Launcher, enter and click “Events (Admin).”
2. Click the Blackthorn | Events Admin tab.
3. Click the Allowlist Domains tab.
4. Click New.
5. Enter a Name.
6. Set Domain = the domain you want to allowlist. (required)
7. Click Save.
   

NOTE: Users are no longer required to contact Blackthorn Support to share their domain when allowlisting a domain. However, if you are having trouble setting up your vanity domain using these steps, please contact Blackthorn Support .

Set Up a Simple Embedded Site

Before you can test, you must complete the following steps to add the demo domain.

1. In the App Launcher, enter and click “Events (Admin).”
2. Click the Blackthorn | Events Admin tab.
3. Click the Allowlist Domains tab.
4. Click New.
5. Enter a Name.
6. Set Domain = “https://demo.events.blackthorn .io”. (required)
7. Check the Third Party Domain checkbox.
8. Click Save.
   

Testing

We've created iframe code generators to test simple and advanced embedded sites.

• https://demo.events.blackthorn.io/blackthorn/index.html (simple embedding)
• https://demo.events.blackthorn.io/blackthorn/advanced.html (advanced embedding)

Use the code below, which contains iframing examples, for testing.

You can also mix and match the options below to fit your needs. For example, you may need to set a specific date and a height limit for the component.

The script src="https://events.blackthorn.io/loader" and data path are 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:

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, ….).

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.