Developer Portal
Developer DocumentationWhiteLabel Instant Book WidgetCustom Theming and Branding

Cvent Instant Book has the ability to add branding to the booking application for a seamless user experience.

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>

default filled InstantBook button

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>

default outlined instant book button

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>

customized instant book button

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.

Note

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>

externally built instant book button

Last updated on
Errors and TroubleshootingOverview