Widget comes with pre-existing styling but can be customized by applying custom CSS properties to its different HTML elements.
The widget's custom class selectors are listed below. Note that all custom classes must be nested within the .sr-bb.sr-betConcierge selector class.
This ensures that the custom styles only apply to that widget and not to other elements on the page.
Container
| Class |
|---|
| srct-bc-container |
Header
| Class |
|---|
| srct-bc-header |
| srct-bc-header-globe |
| srct-bc-header-title |
| srct-bc-header-button |
Chat
| Class |
|---|
| srct-bc-chat |
Composer
| Class |
|---|
| srct-bc-composer |
| srct-bc-input-wrapper |
| srct-bc-textarea |
| srct-bc-post-button |
| srct-bc-post-button-disabled |
| srct-bc-disclaimer |
Coverage
| Class |
|---|
| srct-bc-coverage |
| srct-bc-chart-default-background |
| srct-bc-no-coverage |
| srct-bc-partial-coverage |
| srct-bc-full-coverage |
| srct-bc-extended-coverage |
Intro
| Class |
|---|
| srct-bc-intro |
| srct-bc-intro-messages-limit |
Scoreboard
| Class |
|---|
| srct-bc-scoreboard |
| srct-bc-scoreboard-result-time |
Match Clock
| Class |
|---|
| srct-bc-match-clock |
| srct-bc-match-clock-live |
Match Date
| Class |
|---|
| srct-bc-match-date |
Conversation Starters
| Class |
|---|
| srct-bc-conversation-starters-stacked-card |
| srct-bc-conversation-starters-card-icon |
| srct-bc-conversation-starters-card-title |
Terms
| Class |
|---|
| srct-bc-terms-icon |
| srct-bc-terms-title |
| srct-bc-terms-text |
| srct-bc-terms-more |
| srct-bc-terms-decline |
| srct-bc-terms-agree |
Match Info
| Class |
|---|
| srct-bc-match-info |
| srct-bc-match-info-status |
Team
| Class |
|---|
| srct-bc-team |
| srct-bc-team-name |
Message
| Class |
|---|
| srct-bc-message-info |
| srct-bc-message-question |
| srct-bc-message-answer |
Scroll to Bottom Button
| Class |
|---|
| srct-bc-scroll-to-bottom-button |
Loader
| Class |
|---|
| srct-bc-loader |
| srct-bc-loader-icon |
Error
| Class |
|---|
| srct-bc-error |
| srct-bc-error-action |
Toast
| Class |
|---|
| srct-bc-toast |
| srct-bc-toast-button |
| srct-bc-toast-success-icon |
| srct-bc-toast-success-text |
| srct-bc-toast-error-icon |
| srct-bc-toast-error-text |
Drawer
| Class |
|---|
| srct-bc-drawer |
| srct-bc-drawer-background |
| srct-bc-drawer-icon |
| srct-bc-drawer-close-button |
Suggested Questions
| Class |
|---|
| srct-bc-suggested-questions-header |
| srct-bc-suggested-questions-item |
| srct-bc-suggested-questions-close |
Report Button
| Class |
|---|
| srct-bc-report-button |
Report
| Class |
|---|
| srct-bc-report |
| srct-bc-report-response |
| srct-bc-report-reason |
| srct-bc-report-textarea |
| srct-bc-report-submit |
| srct-bc-report-reason-icon |
| srct-bc-report-reason-icon-selected |
| srct-bc-report-label |
Suggested Bets
| Class |
|---|
| srct-bc-suggested-bets |
| srct-bc-suggested-bets-button |
| srct-bc-suggested-bets-header |
| srct-bc-suggested-bets-toggle-button |
| srct-bc-suggested-bets-markets |
| srct-bc-suggested-bets-market-name |
| srct-bc-suggested-bets-market-pin |
| srct-bc-suggested-bets-outcome |
| srct-bc-suggested-bets-selected-outcome |
| srct-bc-suggested-bets-outcome-name |
| srct-bc-suggested-bets-outcome-odds |
| srct-bc-suggested-bets-recommended |
Custom Bet
| Class |
|---|
| srct-bc-custom-bet |
| srct-bc-custom-bet-header |
| srct-bc-custom-bet-odds |
| srct-bc-custom-bet-add-to-bet-slip |
| srct-bc-custom-bet-add-to-bet-slip-button |
| srct-bc-custom-bet-market |
| srct-bc-custom-bet-market-name |
| srct-bc-custom-bet-outcome-name |
Insights
| Class |
|---|
| srct-bc-insights |
| srct-bc-insights-content |
| srct-bc-insights-icon |
| srct-bc-insights-title |
Loading
| Class |
|---|
| srct-bc-loading-globe |
Tooltip
| Class |
|---|
| srct-bc-tooltip |