Guide: Embed Goldcast Events on Your Website

Learn how to embed Goldcast webinars and events on your site.

Heads up! This feature is currently in Beta. To know more, contact your CSM or Goldcast Support (support@goldcast.io). 

 

Goldcast has introduced an exciting new feature that allows you to embed your events and webinars on your website. Embedding is a great option when you want to:

  • Host your events and webinars within your digital ecosystem
  • Increase the time attendees spend on your site to enhance SEO metrics
  • Include events and webinars as part of your brand's online presence 

Steps to embed a Goldcast event/webinar on your website

Step 1: Generate embed code in Goldcast Studio

For Events

  1. Log into Goldcast Studio and click the Events tab to open your preferred event. 
  2. Once on the event dashboard, scroll to the Embed Info section, and click the Setup button.
     
     
  3. Copy-paste the URL or domain where you want to embed the event experience and click Next

    Heads up! Make sure to enter the complete URL starting with https://www.

     
  4. Click Copy to copy the generated embed code and close the window. 

     

Note: You'll receive an alert to Send Updated Calendar Invites to attendees. Click Send Invites to resend calendar invites with updated magic links. This is a must to redirect registrants to the webpage where you'll be embedding the event. However, if you're doing the embedding before opening event registrations, you can skip this step. 

 

For Webinars

  1. Log into Goldcast Studio and click the Events tab to open your preferred webinar. 
  2. Once on the webinar dashboard, scroll to the Embed Info section, and click the Setup button.
     
     
  3. Copy-paste the URL or domain where you want to embed the event experience and click Next

    Heads up! Make sure to enter the complete URL starting with https://www.

     
  4. Click Copy to copy the generated embed code and close the window. 

     

Note: You'll receive an alert to Send Updated Calendar Invites to attendees. Click Send Invites to resend calendar invites with updated magic links. This is a must to redirect registrants to the webpage where you'll be embedding the event. However, if you're doing the embedding before opening event registrations, you can skip this step. 

 

 
 

 

Step 2: Add the embed code to your site

  1. Paste the embed code you copied from Goldcast Studio into the HTML of your desired webpage. 
  2. Place the copied code within the <body> tag of your webpage. 

That's it! Goldcast will now embed your event or webinar on the webpage you have added. When attendees click the magic link, they will land on the embedded webpage, where they can join the event as usual. 

Best Practices

Tip #1: Complete the embed setup before opening registrations

We highly recommend completing the embed setup before starting event registrations. This way, attendees get the magic link that directs them to your website from the get-go.

If you enable the embed feature after registrations are open, here’s what happens:

  • New registrants will receive magic links specific to the embed.
  • Existing registrants will get updated calendar invites. When they click the magic link in those invites, Goldcast will direct them to the webpage where the event is embedded.

Tip #2: Configure the Goldcast embedded event widget as required

export type Config = {
  // URL for the embedded server. This will be available in the snippet you copy from Goldcast. 
  embeddedServerUrl: string;   

  // Optional display dimensions
  height?: string;             // Optional height of the embedded widget (e.g., '400px')
  width?: string;              // Optional width of the embedded widget (e.g., '800px')

  // Optional URL parameter extraction flags (Important: Use any ONE of the three)
  eventID?: string;            // Required unique eventID
  isEventIdInParam?: boolean;  // Flag to extract event ID from URL path segments
  isEventIdInQuery?: boolean;  // Flag to extract event ID from URL query parameters
};

Here, ?: indicates optional parameters. You can configure these parameters to customize the Goldcast embedded event widget. Here is an example to help you:

const config = {  
  embeddedServerUrl: 'https://embedded-server.goldcast.io',
  height: '500px',
  width: '800px',  
  eventID: '74c53859-3c75-4a1b-a188-757afbfa7d55',
};

Heads up: Use only ONE of the three parameters to pass event ID. 

  • eventID?: string
  • isEventIdInQuery?: boolean
  • isEventIdInParam?: boolean
 

Tip #3: Test the Embed

We suggest testing the embed URL on the target webpage before the event goes live. This strategy will allow you to visualize how it appears. We highly recommend completing this step during the event setup process, as it will help you determine whether you prefer to embed the event or host it in Goldcast's event space. 

Removing an embed

Follow these steps to remove an embed:

For Events

Once you remove the embed, the event will no longer be available on the webpage you used earlier. Instead, it will be available in Goldcast's event space. 

  1. Log into Goldcast Studio and click the Events tab to open your preferred event. 
  2. Once on the event dashboard, scroll to the Embed Info section, and click the Edit button. 
  3. Click Remove Embed.  

 

Note: You'll receive an alert to Send Updated Calendar Invites to attendees. Click Send Invites to resend calendar invites with updated magic links. This is a must to redirect registrants to Goldcast's event space, where the event will be hosted. 

Pro Tips: After removing the embed, make sure to:

  • Delete the embed code from your website
  • Remove any related HTML or script tags
  • Update your webpage to prevent broken content
 
 
 

For Webinars

Once you remove the embed, the webinar will no longer be available on the webpage you used earlier. Instead, it will be available in Goldcast's event space. 

  1. Log into Goldcast Studio and click the Events tab to open your preferred webinar. 
  2. Once on the webinar dashboard, scroll to the Embed Info section, and click the Edit button. 
  3. Click Remove Embed.  

Note: You'll receive an alert to Send Updated Calendar Invites to attendees. Click Send Invites to resend calendar invites with updated magic links. This is a must to redirect registrants to Goldcast's event space, where the event will be hosted. 

Pro Tips: After removing the embed, make sure to:

  • Delete the embed code from your website
  • Remove any related HTML or script tags
  • Update your webpage to prevent broken content
 
 
 

 

FAQs & Troubleshooting

1: Will embedding affect the experience of speakers, producers, and coordinators?

No. The embedding experience is only for attendees. Upon clicking their magic links, speakers, producers, and coordinators will be directed to the Goldcast event space as usual. Their experience will remain the same as that of non-embedded events. 

2: Can I resize the embedded frame on my website?

By default, the embedded frame is responsive and adjusts automatically to browser dimensions. However, if you want to set it to custom dimensions, you can set the height and width parameters to your desired specifications. 

Example: 

<div id="gc-embedded-div"></div>
    <script src="https://embedded.sdk.goldcast.io/embedded-sdk.js"></script>
    <script>
        const config = {
          embeddedServerUrl: 'https://embedded-server.goldcast.io',
          height:'400px',
      	  width:'800px'  
        };
        const renderEmbeddedWidget = new window.GOLDCAST.RenderEmbeddedWidget(config);
        renderEmbeddedWidget.init();
    </script>

3: Can I embed multiple events on the same URL?

Yes. There are three different strategies for embedding multiple events on the same URL:

Method #1: Using InQuery parameter

You can load different events on the same URL by including the eventID as follows when you're embedding in Studio:

  • https://www.yoursite.com?eventId=event-id-1
  • https://www.yoursite.com?eventId=event-id-2
<div class="container mx-auto bg-gray-200 rounded-md h-[85vh] w-[90vw] overflow-hidden">
    <div id="gc-embedded-div"></div>
</div>

<script src="https://embedded.sdk.goldcast.io/embedded-sdk.js"></script>
<script>
    // Configuration for events using In Query parameters
    const config = {
        embeddedServerUrl: 'https://embedded-server.goldcast.io',
        isEventIdInQuery: true
    };

    const renderEmbeddedWidget = new window.GOLDCAST.RenderEmbeddedWidget(config);
    renderEmbeddedWidget.init();
</script>

Method #2: Using path parameter

You can load different events on the same URL by including the eventID as follows when embedding in Studio:

  • https://www.yoursite.com/events/event-id-1
  • https://www.yoursite.com/events/event-id-2
<div id="gc-embedded-div"></div>
<script src="https://embedded.sdk.goldcast.io/embedded-sdk.js"></script>
<script>
    // Configuration for events using path parameters
    const config = {
        embeddedServerUrl: 'https://embedded-server.goldcast.io',
        isEventIdInParam: true
        
        // Note: The event ID will be extracted from the URL path. 
        // Important: Make sure the event ID is the last param of your path
    };

    const renderEmbeddedWidget = new window.GOLDCAST.RenderEmbeddedWidget(config);
    renderEmbeddedWidget.init();
</script>

Method #3: Wrap in a class

<div class="container mx-auto bg-gray-200 rounded-md h-[85vh] w-[90vw] overflow-hidden">
    <div id="gc-embedded-div-event"></div>
</div>

<script src="https://embedded.sdk.goldcast.io/embedded-sdk.js"></script>
<script>
    const config1 = {
        eventID: 'event-id-1',
        embeddedServerUrl: 'https://embedded-server.goldcast.io',
        };
        
    const renderEmbeddedWidget1 = new window.GOLDCAST.RenderEmbeddedWidget(config1);
    renderEmbeddedWidget1.init({
        targetId: 'gc-embedded-div-event1'
    });
</script>

4: What happens if an unregistered user lands on the embedded URL?

If users land on the embedded URL without a magic link, they'll see the event's registration form. They can then register for the event and use their magic link to enter the event space. 

5: Will analytics and reporting be available for embedded events?

Yes. You can view the Analytics & Reports for embedded events in Goldcast Studio, as you do for non-embedded events. 

6: Are there any browser restrictions?

We recommend that attendees use Chrome for the best experience.  

Note: Currently, embedded events will not render in incognito mode or on the Safari browser. 

7: How secure is the embed?

The embed is highly secure and uses an HTTPS connection. 

8: What happens to the embed URL after the event?

Once the event ends, users who land on the URL can view the on-demand experience. If you haven't enabled the on-demand experience, users will see a similar experience as in the event space. 

9: Will the embed setup be copied on event duplication?

No. 

10: What happens if I remove the embed in Goldcast Studio but fail to remove the embed script from the destination webpage?

In this scenario, visitors who land on the destination webpage will see the error message mentioned above. To avoid this bad experience, we highly recommend following these steps after you remove the embed: 

  • Delete the embed code from your website
  • Remove any related HTML or script tags
  • Update your webpage to prevent broken content

© 2024 Copyright Goldcast, Inc. All rights reserved.


Knowledge Base Software powered by Helpjuice