The schedule, speakers and sponsors widgets load one JavaScript file from Brella. You can copy that file to your own server and load it from there. The widget still loads the event data and the images from Brella.
Before you start
You need to edit your website's HTML and upload files to its server, or work with someone who can. Try the change on a test copy of your site first.
You need the widget code from the admin panel:
Schedule widget: Content > Schedule > Widget. See Schedule widget.
Speakers widget: Content > Speakers, then Embed Widget. See Speaker widget.
Sponsors widget: Sponsors > Widget. See Embed the sponsor widget on your website.
When self-hosting helps
Your website only allows scripts from its own domain.
Your visitors' networks block the address the widget script loads from.
Self-hosting doesn't help when visitors' networks block Brella's API or Brella's image addresses. The widget loads the sessions, speakers and sponsors from Brella's API, and the photos and logos from Brella's image servers, wherever the script comes from.
What the widget code loads
The widget code has two parts:
A
divwith the IDbrella-widgetand the settings inside it. This part stays the same when you self-host.A
script async src="..."line. The file at that address is the whole widget: one JavaScript file with its styles inside. There are no other files to copy.
All three widgets use the same file. The widgetType setting in the div decides which widget it shows.
Host the file
Copy the widget code from the admin panel with Copy.
In the copied code, find the address in
srcof the lastscriptline. It starts withhttps://widget.brella.io/.Open that address in a browser and save the file to your computer with the
.jsextension, for examplebrella-widget.js.Upload the file to your website's server.
In the widget code on your page, replace the address in
srcwith the address of your file. Use a full address (https://www.example.com/js/brella-widget.js) or a path on your site (/js/brella-widget.js).Repeat step 5 for every widget on your site.
The result looks like this:
<div id="brella-widget">
<script type="text/props">
{
"joinCode": "youreventjoincode",
"widgetType": "speakers"
}
</script>
</div>
<script async src="/js/brella-widget.js"></script>
Keep your copy up to date
Your copy doesn't receive Brella's widget updates. Replace it with a fresh copy regularly, using steps 2 to 4.
New widget options need a copy made after the option was added. For example, SPA mode for single-page websites needs a copy made on or after May 6, 2026. See Embed Brella widgets on a single-page website.
Content Security Policy
If your website uses a Content Security Policy:
script-src: your own domain, where the file now lives.style-src:'unsafe-inline'. The script adds the widget's styles to the page.connect-src:*.brella.io, for Brella's API.img-src:*.brella.io, which serves the photos and logos.frame-src(sponsors widget): the sites of the videos and web pages added to sponsor booths.
Limits
Self-hosting moves only the script. Event data and images always come from Brella.
Brella doesn't update your copy.
Troubleshooting
The widget area stays empty
The browser can't load your file. Open the browser's developer tools, check the Console and Network tabs for an error on your file, and check the address in src. Check that the file was saved as plain text with the .js extension.
The widget appears but shows no sessions, speakers or sponsors
The visitor's network or your Content Security Policy blocks Brella's API. Allow it in connect-src (see Content Security Policy).
The widget shows text without its styling
Your Content Security Policy blocks the widget's styles. Allow 'unsafe-inline' in style-src.
A setting from the admin panel has no effect
Your copy is older than that setting. Replace it with a fresh copy.