The sponsor widget function shows all of the sponsors who are available in any event. This can be customized according to the event organizer's requirements by applying a CSS style function and then used to embed the sponsors of your event on the event website.
Get started with the sponsor widget
Click "Sponsors"
Click "Activate"
Create sponsor "Categories"
Create "Sponsors" for each category
Click "Widget" to view the CSS code
Click "Copy" to extract the widget CSS code and add to your website
Once the "Sponsors" feature is active, click on the "Widget" button. Click on 'copy' to extract the code and paste it to the website
👉The copied code will look like this (the only difference will be the "join code", which will be your event's URL slug). You can preview the widget's look by clicking on the 'preview' option.
<div id="brella-widget">
<script type="text/props">
{
"joinCode": "YOUREVENTJOINCODE",
"widgetType": "sponsors",
}
</script>
</div>
<script async src="https://widget.brella.io">
</script>
<!-- Inject Brella Widget Here End -->
You can add this code to a page on your website and the sponsor widget will be visible to visitors. Any updates to your sponsors' list in Brella will automatically be reflected in the sponsors' widget.
Customizations available
You can customize the way the Brella sponsor widget looks on your webpage by choosing your preferences on the admin panel.
Sponsors (categories) displayed per widget
This customization option gives you the ability to decide whether you want to display the booths attached to all the categories you have added on the admin panel or select only specific categories to be highlighted on the website.
Sponsors displayed per category
This customization option gives you the ability to select whether you want to show all the sponsor booths in a category or a limited number of sponsors for a category. The widget will limit the number of sponsors displayed per category if you select the 'show limited number'. There will be a 'show all' button added if you decide to opt for the 'show limited number' customization where the viewers can click to see all the sponsors in the category.
Cover images on the widget
This customization allows you to select whether you want to display the cover images of any sponsors who are in a large category or show only the logo without the cover image.
The CSS code on the right-hand side box of the sponsor widget tab will get automatically edited based on your selections made on the left-hand side customizations. You are not required to edit the CSS code manually. You can always click on the 'preview' option to get an idea of how the customizations you select will show once the widget is embedded on your website.
Props to allow to show the full sponsor names
Sometimes too long names of sponsors may get cut on the website. With this prop, you will be able to force all the sponsor cards to show the sponsor's name in full.
<style>
.brella-widget-sponsor-category-sponsor-name {
-webkit-line-clamp: initial !important;
}
</style>
Customize the colors of the category heading, sponsor heading, and the "Learn more" button
The widget normally takes the default CSS colors available on your website for the category and sponsor heading. For the "Lean more" button it normally uses the color provided by Brella. You can however customize all of those with the following props.
- Category heading change:
.brella-widget-root h2 {
color: yellow !important;
}
- Sponsor heading change:
.brella-widget-root h3 {
color: blue !important;
}
"Learn more" button change:
.brella-widget-sponsor-category-sponsor-learn-more-link {
color: red !important;
}
You can also combine these into 1 override:
.brella-widget-root h2, .brella-widget-root h3, .brella-widget-sponsor-category-sponsor-learn-more-link {
color: yellow !important;
}
Customize the size of the logos for the categories (in pixels)
<!-- Inject Brella Widget Here -->
<div id="brella-widget" >
<script type="text/props">
{
"joinCode": "BrellaInfinite20",
"widgetType": "sponsors",
"sponsorLogoSize": {
"large": 195,
"medium": 100,
"small": 75
}
}
</script>
</div>
<script async src="https://widget.brella.io"></script>
<!-- Inject Brella Widget Here End -->
If you want to style or remove the count element next to the category name
<style>
.brella-widget-sponsor-category-header-count {
color: tomato;
}
</style>