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>

Track Form Responses

Your organization’s Google Analytics account can now "listen" to events in an iframe to link the Attendee journey to your main Google Analytics account with an event listener. The Google Analytics ID entered in the Salesforce org will determine which Google Analytics account the collected data will go to.

Please review the text below and then watch the video to see how everything works.

In this example, the Google Analytics account will use the event listener FORM_SUBMITTED to complete the following steps.

1. “Listen” to Form changes
2. Extract the changes from the iframe
3. collect the data for the Google Analytics account
4. Redirect the Attendee to a new page after completing the checkout process

Listeners, added via JavaScript, listen to everything the iframe emits. In this example, you will see this code.

{
event: “FORM_SUBMITTED”,
handler: function (params). {
		logEvent(“FORM_SUBMITTED:  “ + JSON.stringify(params)};
		onFormSubmitted(): // Call the function to handle the submission
},
},

// Function to handle the form submitted event
function onFormSubmitted( ) {
// Open Google.com  in a new tab when the event is triggered
window.open(“https://www.google.com”, “_blank”);
}

For this example, the listener listens and then opens a separate page, www.google.com, in a new blank tab outside the iframe. This process can also be performed using the Event Page URL or the website of your choice.

1. Complete the Event registration process, but don’t click the Register button.
2. Before clicking Register, look at the code to see that no Forms have been submitted.
3. Click Register.
4. You will be redirected to the URL that was added to the code. In this case, a blank Google.com tab opens.
5. The ERS records are processed in the background.
6. The results in the code show the attendee form data (first name, last name, email, language, question answers, and the path (where the form was submitted)).

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.

Q: How do I track pre-registration form answers?
A: The iframe event listener, FORM_SUBMITTED, is available with the BT iframe. It allows users to track results and gain insights from pre-registration form answers from within the iframe. (Post-registration form answers will not trigger the event listener.)

When an Attendee submits a BT Form, the host page receives a FORM_SUBMITTED event with the following details from the pre-registration form.

• path - form submission URL path
• name - form name
• data - form submission data

Click here for more information.

If you have any questions, please contact Blackthorn Support.