Widget: My widget isn't shown correctly, what can I do?

One of the main reasons for the widget to be shown incorrectly is because it was put in an iframe.

Problem: the schedule looks weird

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

Solution #1 (remove conflicting css styles):

  1. First, compare your widget with our test page: https://test-brella-widget.now.sh

  2. Use your browser's inspector tool to find styles that break the widget's elements.

  3. Scope your CSS so it doesn't leak inside 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 widget inside iframe):

Method #1

  1. Create empty page where you place the snippet code only.

Create 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 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: the schedule is not shown at all

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: I'm using Squarespace

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

Solution #1: Disable AJAX

  1. 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)

  1. Embed this snippet where you want the schedule be shown:

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

  2. 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: 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.

<!-- 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);
...

If you still experience problems with the widget, please contact your Customer Success Manager, or contact our support at support@brella.io