How do I add the booking component to my website?

The booking component makes it easy to add booking functionality to an existing website in just a few minutes. With the booking component, you get all the booking features that you need right on your own website:

• Product information
• Availability calendar
• Customer information
• Customized fields
• Payment details

The booking component can be added in one of two ways: Embedded within your site or a pop-up window from your site. Both methods will provide all the same booking features. The Pop-up window component is a little bit easier to add to a website. Embedding the booking component on your website requires slightly more work, but it can be made to blend completely with your existing website look and feel.

Both options are described in detail in the following section:

Pop-up window booking component:

The pop-up window booking component can be added to any website with just one line of HTML code. With the pop-up approach, you'll get a booking button on your website, and a booking window will open when a customer clicks the booking button.

Click here to see how it works: http://www.webreserv.com/casadeco/reservation-popup.html.

You can copy the HTML code from WebReserv.com and paste it onto your website. To get the HTML code specifically for your business, log on to WebReserv.com and select Web Components from the main menu.

Embedded booking component:

The embedded booking component can be made to blend completely with your existing website, and many customers prefer this option for that reason. In the screenshot (and example link) we made Casa Deco's booking component use the same colors as the website, and the result is impressive.

Click here to see it: http://www.webreserv.com/casadeco/reservation.html.

Adding the booking component as an embedded component requires a few more lines of HTML code and possibly a little bit of tuning to get the colors right. To get the HTML code specifically for your business, log on to WebReserv.com and select Web Components from the main menu.

Advanced options when using the booking component

Note: The following examples require some knowledge of building websites. If you need help setting up your website, please contact our support for assistance.

It is possible to change the colors and the functionality of the booking component. To do this, you need to add one or more parameters to the booking component URL on your website.

The standard URL for the Casa Deco booking component is:

http://www.webreserv.com/book?bizid=DCSA

To add a parameter to the URL, add the parameter and value to the URL, separated by an ampersand (&) character. For example, the parameter to set the background color to orange is background-color=orange. The URL for the booking component now becomes:

http://www.webreserv.com/book?bizid=DCSA&background-color=orange

You can add multiple parameters, just remember to have an ampersand (&) between each parameter. For example to change the background color to orange and change the text color to white, change the URL to the following:

http://www.webreserv.com/book?bizid=DCSA&background-color=orange&color=white

You can see all the booking component parameters in the table below.

Attribute	Description	Example
background-color	Controls the background-color. Use this attribute to change the background color. The default background color is white.	background-color=orange
color	Controls the text color. Use this attribute to change the text color. The default text color is black.	color=white
font	Controls the font type. Use this attribute to change the font type. The default is Arial, Sans-Serif.	font=Helvetica
font-size	Controls the font size. Use this attribute to change the size of the font. The default is 9pt.	font-size=9pt
showdescription	Instructs the booking component to show descriptions and pictures for each product. The default is not to show descriptions.	showdescription
stylesheet	Rather than controlling each attribute, you can specify a stylesheet with all the attributes. Using this attribute requires more extensive knowledge of Cascading Style Sheets (CSS) and website design.	stylesheet=[URL]