The sponsor widget lists your event's sponsors on your own website, grouped by category. It loads the sponsor list from Brella each time the page opens, so changes in the admin panel show on your site without new code.
Before you start
You need to be an organization admin or an event admin.
The sponsors feature must be on. If it is off, the widget shows "Please turn on the “Sponsors” feature in your Admin Panel to use this widget".
You need access to edit the HTML of the web page where the widget goes.
Where to find it
Sponsors > Widget in the admin panel.
Embed the widget
Open Sponsors > Widget.
Choose the options on the left. The code on the right updates as you change them.
Select Preview to see the widget with your sponsors. Select outside the preview window to close it.
Select Copy. The message "Copied to clipboard!" confirms it.
Paste the code into the HTML of your web page where the sponsors go.
The code has this shape. joinCode is your event's join code (the URL slug for invite-only events) and is filled in for you. The last script line loads the widget from Brella; copy it from the admin panel instead of typing it.
<!-- Inject Brella Widget Here -->
<div id="brella-widget" >
<script type="text/props">
{
"joinCode": "youreventjoincode",
"widgetType": "sponsors",
"showAllSponsors": true
}
</script>
</div>
<script async src="..."></script>
<!-- Inject Brella Widget Here End -->
Options left at their default are left out of the code. The admin panel doesn't save your choices, so keep a copy of the code you use.
Settings
Setting | What it does | Default |
Categories to show | All categories, or Specific categories and then the categories in Select categories. Code: | All categories |
Sponsors displayed per category | Show limited number shows 9 sponsors in Large categories, 12 in Medium and 15 in Small, then Show all. Show all sponsors shows every sponsor. Code: | Show limited number |
Cover images on the sponsor list view | Show cover image adds the cover image to the cards of sponsors in Large categories. Code: | Hide cover image |
Sidebar integrations | Show adds the booth's Side bar integrations (slido, etc) links to the sponsor window as embedded pages. Code: | Hide |
Deck carousel | Show adds the booth's Sponsor deck (carousel) slides to the sponsor window, under the social media links. Code: | Hide |
Share button | Show adds a Share button to the sponsor window. It copies a link to your page that opens this sponsor. Code: | Hide |
What visitors see
One section per category that has sponsors, in your category order, with the number of sponsors next to the category name.
Sponsors in each category follow Sponsor display order in Sponsors > Settings.
Each card shows the logo, name, subtitle on one line and Learn More.
A Filters button when sponsor custom fields have Make filterable on and have values. Visitors choose values, then Apply or Clear filters.
Selecting a card opens the sponsor window with:
The cover image, for sponsors in Large categories.
The logo, name and subtitle.
Share (if on), Website, Facebook, LinkedIn, Twitter and Instagram links that the sponsor has.
The carousel (if on).
The booth description.
The sessions the sponsor is linked to, under the name of the booth's Sessions tab, or "Related events". Times are in the event's time zone. The list includes sessions limited to specific lists.
Side bar integrations (slido, etc) links (if on): as a side panel on wide screens, and as tabs next to Information on narrow screens.
A link copied with Share adds ?showCompany= and the sponsor ID to your page address. Opening it scrolls to the widget and opens that sponsor.
Change logo sizes
Add sponsorLogoSize to the code, inside the text/props block. Sizes are in pixels for each category size.
"sponsorLogoSize": {
"large": 195,
"medium": 100,
"small": 75
}
Without it, logos are 135 px (Large), 100 px (Medium) and 75 px (Small).
Style the widget with CSS
Add rules to your website's stylesheet. These class names target parts of the widget:
Part | Class |
Category heading |
|
Number next to the category name |
|
Sponsor name |
|
Sponsor subtitle |
|
Learn More link |
|
Show all button |
|
Examples:
<style>
.brella-widget-sponsor-category-header-count { display: none !important; }
.brella-widget-sponsor-category-sponsor-subtitle { -webkit-line-clamp: initial !important; }
.brella-widget-sponsor-category-sponsor-name { color: #1d2939 !important; }
</style>
The first rule hides the count, the second shows full subtitles, the third changes the name color.
Change card widths, borders and the accent color by setting these variables on :root. The values shown are the defaults.
:root {
--brella-widget-min-large-sponsor-card-width: 320px;
--brella-widget-min-medium-sponsor-card-width: 220px;
--brella-widget-min-small-sponsor-card-width: 160px;
--brella-widget-sponsor-border: 1px solid #F0F0F0;
--brella-color-primary-600: #00af66;
}
--brella-color-primary-600 colors Learn More and Show all.
For websites that load pages with JavaScript, see Embed Brella widgets on a single-page website.
Limits
Visits to the widget are not counted in a sponsor's Traffic Analytics.
Your option choices are not saved in Brella. Paste new code each time you change them.
Troubleshooting
Please turn on the “Sponsors” feature in your Admin Panel to use this widget
The sponsors feature is off. Open Sponsors and select Activate.
Join code is invalid.
The joinCode in the code doesn't match an event. Copy the code again from Sponsors > Widget.