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!
https://demo.events.blackthorn.io/blackthorn/index.html (simple embedding)
https://demo.events.blackthorn.io/blackthorn/advanced.html (advanced embedding)

🚧

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:

If you have any questions please log a support ticket.

Whitelisting Domains

To get started, you will need to whitelist 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 whitelisted for multiple organizations, you will need to manually add the domain into each organization.

  1. Navigate to the Blackthorn Events | Admin page
  2. Click "New" and add the domain you'd like to whitelist

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://bt-events-attendeelink-session.herokuapp.com/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>

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 my Iframe?
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.


Did this page help you?