In this video, we will explain you how to edit the look and feel of the booking engine.
Transcript
Hello, in this video, we're going to explain how to customize your booking engine design according to your website columns. For that, you need to go to Configuration, Channels, select the channel, and then click on Design Look and Feel. There are a variety of ways to get the booking engine to match your website design. By far, the simplest way to do it is using the colors and the banner uploads. Here you have different colors: one for the product name background color, which is this one; another field for the product name text color, it is this one; another for the heading text, which is this one; another for general text, which is this one for instance; another for button color, the buttons colors; and another for their text in the buttons. Those are the colors by default, but you can change it according to your brand. If you already know the color codes, then you can directly enter here. If you don't know them, you can use the color picker tool here to select a different color. Once you have selected colors, if you scroll down, here you find a CSS code that you can also enter here, and also a top text in HTML that you can enter to be displayed on the top of your work, on the top of the booking engine page. In this case, we have added this text here. The next step will be to upload the top banner image. This image goes along the top of every page of your booking engine. And there are two possible locations for the banner image: it could be standard, it is the most popular and place the banner neatly inside the main box, or it could be panoramic. Let's say both options. To upload the banner image, we need to click on select, then select the image. We can select them from our hard drive and upload the file and then select the file from the left side of the screen. Click on next. Here we have our banner image. We can change dimensions, we can change positioning, and then click on OK. Again, upload the image, and we have the top banner image here. Let's say we select standard and click on save changes. Now we should be able to see the banner here on the top, and also the new color I've selected for the background here. Now, if we go back to the booking engine design, we also find fields to upload the banner from specific URL. Below, we found a field for a base text, it's also permitted HTML links. This text is the text displayed here at the bottom of the page. It could be an HTML. Here you find a field for an error URL. This is useful in case there are any technical issues during the booking, then you can redirect the user to this error page, some of your pages. Then we have the iframe same window settings: it could be full screen, where dates, prices, and availability in a frame, in remainder of booking process in full screen, or same window, it means that to stay in iframe all the way through the booking process. Click save changes. And now we have our booking engine with our colors and our top banner image. And that's all.