Schedule & Widget: Troubleshooting Schedule Widget

Learn how to troubleshoot and fix issues related to the schedule widget display in the event website.

To be covered

1. The schedule looks weird

2. The schedule doesn't show at all

3. Using Squarespace

4. Page uses asynchronous content fetching

Problem 1: the schedule looks weird 🤔

Your page's CSS styles may affect how the schedule looks.

👉 Solution #1 - Remove conflicting CSS styles:

First, compare your widget with our test page: https://test-brella-widget.now.sh
Use your browser's inspector tool to find styles that break the widget's elements.
Scope your CSS so it doesn't leak inside the widget.

 /* eg. styles like */  
 .my-page div { background: red } 
 /* should be scoped more tightly ⇒ */  
 .my-page .my-red-element > div { background: red }

👉 Solution #2 - Place the widget inside an iframe:

Method #1

Create an empty page where you place the snippet code only.
Create an iframe element where you want the schedule to be shown.

 <iframe
 	src="<https://www.mydomain.com/my-schedule-widget-page.html>"
   width="100%"
 	height="600px"
   style="display: block;">
 </iframe>

Method #2

Use the snippet code that generates the iframe for you:

<!-- Inject Brella Widget Here [Start] -->
<a id="brella-widget-blob-link">Open schedule in a new tab</a>
<iframe id="brella-widget-iframe"></iframe>

<script>
  function getBlobURL(code, type) {
    var blob = new Blob([code], { type })
    return URL.createObjectURL(blob)
  }

  var joinCode = 'MY-EVENT-JOINCODE' // Replace with your event's join code

  var source =
    '<html>' +
      '<body>' +
        '<div id="brella-widget" data-prop-join-code="'+ joinCode +'">' +
          '<p>Loading schedule...</p>' +
        '</div>' +
        '\\<script async src="<https://widget.brella.io>"\\>\\<\\/script\\>' +
      '</body>' +
    '</html>'

  var widgetBlobURL = getBlobURL(source, 'text/html')

  var brellaIframe = document.querySelector('#brella-widget-iframe')
  var brellaBlobLink = document.querySelector('#brella-widget-blob-link')

  brellaIframe.style = 'display: block; border: 1px solid #00000011; height: 600px; width: calc(100vw - 24px)'
  brellaIframe.src = widgetBlobURL

  brellaBlobLink.style = 'font: 14px/1.21 Helvetica Neue, arial, sans-serif; margin: 10px'
  brellaBlobLink.target = '_blank'
  brellaBlobLink.href = widgetBlobURL
</script>
<!-- Inject Brella Widget Here [End]  -->

❗Problem 2: the schedule is not showing at all

Double-check: First of all, check that the join code in the widget is similar to the one you have in the Admin Panel. In case you have changed it after you installed the widget on your website, you will get an ever-loading widget.

👉Solution #1: Double-check your snippet code so that every line is present

👉Solution #2: Make sure your page's Content Security Policy (CSP) allows scripts to be loaded from our domain (brella.io)

❗Problem 3: I'm using Squarespace

Some Squarespace themes load content through AJAX calls, and the schedule appears only after a page refresh.

👉Solution #1: Disable AJAX

https://support.squarespace.com/hc/en-us/articles/115000253288-Ajax-loading#toc-enable-or-disable-ajax

👉Solution #2: Use Squarespace specific snippet code (Squarespace premium account is needed)

Embed this snippet where you want the schedule to be shown:

 <div id="brella-widget" data-prop-join-code="MY-EVENT-JOINCODE"> <p>Loading schedule...</p> </div>
Inject this snippet to your site's header (premium feature of Squarespace):

(Settings → Advanced → Code Injection → Header)

<script>
  window.Squarespace.onInitialize(Y, init);
  function init() {
    if (document.getElementById('brella-widget')) {
      (function(en, ce){
        var en = document.createElement('script');
        var ce = document.getElementsByTagName('script')[0];
        en.async = 1;
        en.src = '<https://widget.brella.io>';
        ce.parentNode.insertBefore(en, ce);
      })();
    }
  }
</script>

❗Problem 4: My page uses asynchronous content fetching

If your page loads content through AJAX, TurboLinks, or similar, you need to initialize the snippet code after the async code is completed and the snippet code is available in the DOM.

*Use this script if you are using WebFlow.

<!-- Inject Brella Widget Here [Start] -->
<div id="brella-widget" data-prop-join-code="MY-EVENT-JOINCODE">
  <p>Loading schedule...</p>
</div>

<script>
  function initBrellaWidget() {
    if (document.getElementById('brella-widget')) {
      (function(en, ce){
        var en = document.createElement('script');
        var ce = document.getElementsByTagName('script')[0];
        en.async = 1;
        en.src = 'https://widget.brella.io';
        ce.parentNode.insertBefore(en, ce);
      })();
    }
  }
</script>
<!-- Inject Brella Widget Here [End]  -->

...
window.addEventListener("myAjaxContentLoaded", initBrellaWidget);
...

❗Problem 5: My page uses asynchronous content fetching

We used the two recommended pieces of CSS from the Schedule Widget CSS Customization page with the understanding that the white space in the middle will be removed and the content look bigger. Now, the white space is gone but the content is just narrow.

To make it wider use this:

#brella-widget {
    max-width: 100%;
}

For the text size use this:

tbc

Last updated - July 2023.

Written by Nisansala Wijeratne.

If you didn't find an answer to your questions, please get in touch with the Support Team here.

👇