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 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

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

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

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

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

⚑Note: If you still experience problems with the widget, please contact us.

 


Last updated in February 2021. 

Written by Wendy RendΓ³n

 me-rounded

If you didn’t find an answer to your questions, please contact the Support Team here.

πŸ‘‡