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
👉 Solution #2: Use Squarespace specific snippet code (Squarespace premium account is needed)
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] -->
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