Cvent Instant Book has the ability to add branding to the booking application for a seamless user experience.
Custom Logo
You can have your website’s logo attached to the integration form. This would display your website logo on Instant Book pages while booking the venue/hotel.
The following are the specifications of a Custom Logo. Supply the logo to your Cvent representative if you’d like to add one to your Instant Book pages.
- Supported file type: GIF, JPEG, PNG, SVG
- Maximum size: 10 KB
- Recommended dimensions: 178 pixels by 30 pixels.
Button Styling
White Label Instant Book supports button styling to keep the button consistent with rest of the theming on your website. You can customize the button to fit your theming or build your own button from scratch.
This section describes the styles available.
Cvent’s Default Filled Button Style
This is the default button style supported by the InstantBook Widget API.
<!--Instant Book Embed Code-->
<div id="instant-book-cnt"></div>
<script type="text/javascript" src="https://www.cvent.com/wlibk/js/widget/"></script>
<script>
const cventInstantBook = new CventInstantBook({
id: 'cvent-instant-book-default-filled-button',
containerId: 'instant-book-cnt',
venueId: 'PLACE_YOUR_VENUE_CSN_UUID',
accessKey: 'PLACE_ACCESS_KEY_OF_THE_INTEGRATION_WEBFORM'
});
</script>
Cvent’s Default Outlined Button Style
This is the default button style supported by the InstantBook Widget API.
<!--Instant Book Embed Code-->
<div id="instant-book-cnt"></div>
<script type="text/javascript" src="https://www.cvent.com/wlibk/js/widget/"></script>
<script>
const cventInstantBook = new CventInstantBook({
id: 'cvent-instant-book-default-outlined-button',
containerId: 'instant-book-cnt',
venueId: 'PLACE_YOUR_VENUE_CSN_UUID',
accessKey: 'PLACE_ACCESS_KEY_OF_THE_INTEGRATION_WEBFORM',
buttonTheme: {
type:'secondary'
}
});
</script>
Custom Button
This is the custom type button supported by the White Label InstantBook. You can customise the following properties of the button.
- Font-family. If font-family is not provided, it will default to Cvent’s default font-family “
Rubik
,Helvetica
,Arial
” - Font color of the button. If no font-color is provided, it will default to default color #FFFFFF.
- Background color of the button. If no border color is provided, it will default to #006DE9.
- Border color of the button. If no background color is provided, it will default to none.
<!--Instant Book Embed Code with Font Family and Font URL-->
<div id="instant-book-cnt"></div>
<script type="text/javascript" src="https://www.cvent.com/wlibk/js/widget/"></script>
<script>
const cventInstantBook = new CventInstantBook({
id: 'cvent-instant-book-default-filled-button',
containerId: 'instant-book-cnt',
venueId: 'PLACE_YOUR_VENUE_CSN_UUID',
accessKey: 'PLACE_ACCESS_KEY_OF_THE_INTEGRATION_WEBFORM',
buttonTheme: {
type:'custom',
font: {
fontFamily: 'sassyfrass',
src: 'url(https://fonts.gstatic.com/s/sassyfrass/v5/LhWhMVrGOe0FLb97BjhsE-9aEtSygOan.woff2) format(woff2)',
color:'#845D79'
},
background: {
color: '#FFFFFF',
border: '#845D79'
}
}
});
</script>
None Button
Cvent also allows you to create your own button from scratch. In this case, Cvent’s Instant Book widget script does not create the button on your website.
Suppliers can have their own button and can configure it to call cventInstantBook.launchInstantBook()
when that button is clicked. This launches the Instant Book Application in a new tab.
ContainerId is not required when button type is none. You can place button
anywhere on your website. The only note is that you should call
cventInstantBook.launchInstantBook()
when the button is clicked.
<!--Sample button code -->
<div id="instant-book-cnt">
<button onclick="cventInstantBook.launchInstantBook()">This is External IBK Button</button>
</div>
<!--Sample Embed Code-->
<script type="text/javascript" src="https://www.cvent.com/wlibk/js/widget/"></script>
<script>
const cventInstantBook = new CventInstantBook({
venueId: '8e41f9db-0e88-48d1-9d3f-289cdb2208aa',
accessKey: '98eff637-944e-40e4-9424-da20695d03ce',
buttonTheme: {
type: 'none'
}
});
</script>