SpringBuilder hands over the Betslip element for your users to place bets easier than ever. And what a betting website without this element, isn't it?
In SpringBuilder, Betslip is available on the ready-made Sportsbook page types by default. Anyhow, it is also accessible in the Elements list in the Left Panel.
Here are the options for you to customize the element. In order to edit the settings, head over to your Dashboard > Spring App > Betslip Settings.
* Please note that SpringBuilder has a new link structure, i.e. you can place a link on any clickable banner/block that will be redirected to a page that shows their Betslip populated with the selected event(s) and the stake.
For example:
/#/add-to-betslip?game=15844420,15844425&event=1211486552,1211486499&stake=11
(where game=15844420,15844425 refers to the Game ID, event=1211486552,1211486499 refers to the Event ID)
Let's start the editing process. First and foremost, you can activate the switcher that allows showing Odd Types. There are six types of odds: Decimal, Fractional, American, Hongkong, Malay, and Indo. Then set your Default Odd Type by clicking on the gear icon on the right side of the field.
Here you can change the ordering of the Odd Types by moving the left dots up or down. On the right side of the options, you have the setting to make the odd type default by clicking on the star icon or hide it by making it invisible by clicking on the eye icon.
In the same way, you can choose the Default Bet Type by clicking on the gear icon on the field. Here you can change the ordering of the bet types by moving the left dots up and down. The Default Bet Type is determined according to the number of bet types. From the right, you can hide the Chain type by clicking on the eye icon.
Bet Builder
This is advanced functionality that allows your users to place special bets for specific markets. To enable this tool, just turn on the Show Bet Builder switcher in Betslip settings. Make sure to add the iframe URL for the functionality to work.
While in the Public mode, players can use Bet Builder by clicking the mentioned icons for each match.
The next step is choosing the market, filling in stakes, and placing bets. The process your players all know! There are five markets that can be used with Bet Builder, including score and corners.
The placed bets will be available in Betslip, as well as in the history section of the My Bets tab.
Get to choose Default Bet Acceptance in case the selected odds change. Here you have three options: either accept higher odds, accept any odds, or don't accept odd changes. Once chosen, make sure to Show Bet Acceptance Options either on click or by default.
Want to hide user balance in Betslip? Turn on the corresponding switcher with just one click.
The next unique feature of Betslip is the Floating mode: your players can see their bets easily on any page on your SpringBuilder website, even though they navigate to Sportsbook, Casino, or other pages. Anyhow, it is possible to hide Floating Mode from Sportsbook pages by simply turning the switcher off.
Go on and choose the layout and position of the Floating Mode by clicking the arrows on the right. You can determine it to be a circle or rectangle, be positioned in the bottom right or bottom left.
Up next, you can determine to show the Floating Mode on Mobile and Tablet by turning on/off the corresponding switcher. As you can see, in the case of activating the Floating Mode for Mobile and Tablet, you are allowed to set its layout separately and position it in the same way.
You can also activate Always show Floating Mode which allows making Floating Mode to be displayed even when no bets are placed. Also, you can display Multiple Odds.
Now get to know our remarkable odd types: SuperBet and Counter Offer. In the settings, you can turn on/off SuperBet, which allows requesting a maximum bet limit increase for selected sporting events. If the setting is on, you can give your players an opportunity to Accept bets as SuperBets. This means that bets that are higher than the maximum stake can be placed and be considered as SuperBets.
And you can turn on/off Counter Offer, allowing your players to suggest their odds for each game. This will make the player experience more enticing and fun!
Besides, you can enable the Edit Bet functionality and the Booking Mode with the corresponding switchers.
!Note: The Edit Bet functionality is also available for the Advanced type of Betslip.
Gift My Bet functionality is meant to send the placed bets to other users via email address. Only unsettled bets can be gifted. This functionality appears on the Open Bets section and Edit profile > My Bets section with the Gift icon. Besides, there is another tab of Gifted Bets, where gifted bets from other users are visible.
When the user clicks on the Gift icon, a popup appears with the email address field. After entering a valid email address, another confirmation popup appears for approval. After the action is performed successfully, the Gifted Bet icon disappears from the Open Bets and My Bets sections. In the My Bets section, gifted bets are mentioned with the ‘Gifted’ tag.
You can also enable the Rebet functionality allowing your players to place the same bet more than once.
You can also enable the setting Allow Integer Stakes which will restrict your players to enter decimal amounts for stakes. For the Basic type of Betslip, the functionality works on the Single, Multiple, Chain, and System bet types. While for the Italian type, integer stakes apply to the Single and Multiple bet types only.
System Bet Calculator
Besides the System Calculator element which can be dragged and dropped, you can enable the System Bet Calculator functionality in Betslip which is opened as players click on the calculator icon and appears as a movable pop-up window.
System Bet Calculator shows the combinations, stakes per combination, and total winnings of the bets shown in Betslip.
What is the Booking Mode?
Let's elaborate on the Booking mode. As you enable this functionality, your players get a code after they place a bet, copy or print the Booking ID and send the code to their peer players. Here is the step-by-step guide on Booking mode in the Public mode:
On a Sportsbook page type select an odd from any market and click on the Booking icon in Betslip.
2. Click the Get Bet ID button to get the code and copy it to the clipboard.
3. Send or pass the code to another user.
4. The other user should log in, go to a Sportsbook page type, and paste the given code in the Get by ID tab of the Booking mode in Betslip.
5. After clicking on the Get Bets button, the user should accept the bet in Betslip and enter the stake.
That's it! With this functionality betting experience of your users will be more exciting.
Booking mode has additional settings for the desktop and mobile versions.
You can enable the Booking code with the option to generate it as a barcode or a QR code. Choose to show the Booking ID icon on desktop and mobile, printing ID, as well as show the Booking mode by default.
In the Betslip settings, you can enable Predefined stakes and input the three stakes for your players. Predefined stakes are meant to hint to your players that the three options are the most common stakes for making a bet on your website.
You can also disable editing stakes if you turn on the Hide Edit Button switcher.
!Note: Selecting a predefined stake now adds to the current stakes instead of replacing them. For example, users enter 10 in the stake field, then click 10, as a result, the amount should be 20. If you want to disable the multiplying logic, you can turn on Add Predefined Stakes option.
You can also choose the type of bet: Basic, Advanced, or Italian. Here you can make the Max bet functionality work for your gaming website with the Advanced bet type.
The Basic types include Single, Multiple, Chain, and System. The Basic bet types are described above.
The Advanced bet types include Single, Double, Treble, Trixie, Patent, Folds, Yankee, Lucky 15, Lucky 31, Lucky 63, Alphabet, Round Robin, Flag, Union Jack, Dutching, Up And Down, Each Way, and others. Find out more on each of them here. Note that this type of Betslip also offers SuperBet and Counter Offer.
The Italian type represents the Italian regulations while placing bets. For example, you can restrict players from betting with decimal numbers for single and multiple bets and allow stakes that are divided into 0.05 for system bets in the Italian type.
Other settings here are Bet Taxes, Precise Odds with Decimals, and Remove Suspended selections. When turning on the Bet Taxes, you can also enable showing the Stake Tax with a tooltip (Rate = 0.88).
You can also make the Betslip replace bets for the same-group market. As your players try to make a bet on the same group market, the bets get exchanged, but not shown that the bet is suspended. To do so, just turn on the Replace Bets for Same-group Market switcher.
As your users place successful bets, you can manage the state of Betslip: to clear it, keep the current combination, or help users to determine it.
In these settings, you can also turn on/off the Hide Max Button in Betslip.
Finally, time to set the Button settings for the Place Bet button. Choose your favorite button style and do not forget to save the settings once you are done.
You can see it in action in the Public mode:
All set with the settings, now you can edit Betslip’s style: SuperBet, FreeBet, and Counter Offer colors! Edit the colors of the text and the background of the components. To do so, head over to the Design mode of your Sportsbook, click the element, and choose Edit Styles.
In each section, you’ll have two options: Text Color and Background Color. You can customize each according to your preferences.
Note that in the Background Color section you are offered a set of various color shades on the Palette: both Flat and Gradient.
Alignment - To change the alignment settings of the element, click on the ‘Alignment’ icon. You’ll have three options available: top, center, bottom, just choose the one you prefer.
Visibility Settings - It enables making a certain Element/Block appear on Desktop, Mobile only, or everywhere by default. Simply hit Visibility Settings and choose the desired option from the dropdown menu to get full control over the Visibility of the elements on your page.
Next comes Location visibility. Include or exclude specific cities or countries or set the appropriate Custom IP.
Mind the Session visibility as well. The latter one allows making certain elements visible only to the logged-in users of your website. This can come in handy if you want to hide some content from users until they sign up on your website.
Trash Icon - If you don't need the Element anymore, Click on the ‘Trash’ icon to remove it from your page.
How to get post messages of Betslip on your environment?
In case you have integrated SpringBuilder's Sportsbook into your environment, we have an option to send post messages of Betslip for the mobile version so that you can track the actions done while adding selections. In order to get them, you need to add these codes to your environment:
<script>
function clickFunctionToPenBetslip() {
document.getElementById('iframe__sportsbook').contentWindow.postMessage(
{
openBetslip: true, 4 }, 5 "*", 6 );
}
window.addEventListener('message', (message) => {
if(message.data && message.data.betslipDataBetsLength !== false) {
document.getElementById('betslip__count').innerHTML=message.data.betslipDataBetsLength
}
});
</script>
Note that you need to have these IDs for the code to work:
your HTML element's ID should be betslip__count to show the count of bets
your iframe's ID iframe__sportsbook
your button's ID needs to have clickFunctionToPenBetslip() function
From the SpringBuilder's Design mode, you can also add these codes for styling:
<style>
.sbBetslip__floating-mode-container,
.first-add-show {
display: none!Important;
}
.sbBetslip__floating-mode-container.open.open-from-parent {
display: block!Important;
}
</style>
All done!
Check out the rest of the elements in the 'Gaming Elements' section for more insights to make your site more efficient and functional!