Introduction
For most use-cases, serving our widgets from Brella's servers works well — and is simple to set-up. However, in a few specific use-cases, it might make sense to self-host and serve the widgets from your own servers. For example:
If your users can load your own web page, but are unable to see the widgets (even after disabling any ad-blockers, such as UBlock Origin)
If your users are accessing the web pages which include one of our widgets from a compliance heavy industry
These instructions apply to all of our widget offerings, including the:
Instructions
Warning!: Self-hosting our widgets is straightforward — but still requires a measure of technical knowledge. If this doesn't describe you, we highly recommend putting in a request to your IT/ tech support teams or network/ website admin in order to avoid issues with the widgets or your website!
We also recommend you try this in a sandbox environment / test version of your website first.
Brella does not assume any responsibility for issues arising from editing files on your website.
Visit https://widget.brella.io
This will display a lot of code (as in the screenshot) — select it all and copy the code:
Then, create a new file using a plain-text editor or code editor — SublimeText, VS Code, Notepad are all good options (DO NOT USE Rich-Text editors or word processing software, such as Microsoft Word, Google Docs etc.).
Paste in the code you copied and save the file as "my-self-hosted-widget.js" (or any name you want, but the file extension MUST BE .js)
Upload it to your website (please ask someone with technical knowledge to do this in order to avoid issues).
Note: Self-hosting the widgets means that any updates to the underlying widget code done by our team will not be automatically delivered to your self-hosted widget code. We recommend periodically re-visiting widget.brella.io and replacing the code in your self-hosted .js file.
When you are using any of our widgets, just replace the widget.brella.io reference in the embed code with an absolute or relative reference to your own self-hosted widget code file (the [filename].js file you created) — if you aren't sure what this means, please seek assistance from a technical member of your team: