Video Library

How can I add my logo to the booking engine header?

Adding a Logo to the Booking Engine Header

You can customize your ReservationKey booking engine by adding your business logo to the header section. This makes your online booking page look more professional and consistent with your website branding.

Step 1: Open the Website Header Message

  1. Go to the Website tab.
  2. Select Website Messages.
  3. Click into the message you’re using as your Website Header.

This message controls what appears at the top of your booking pages.

Step 2: Upload Your Logo

  1. In the Website Message editor, click Add next to Images / Files.
  2. Click Browse to locate your logo file on your computer.
  3. Once selected, click Upload.

Supported file types include .jpg, .png, and .gif. For best results, use a high-quality image with a transparent background (PNG format recommended).

Step 3: Insert the Logo into Your Header

  1. After uploading, click Add HTML to generate the code for your image.
  2. Copy the HTML code that appears. It will look similar to this:
<img src="/uploads/yourlogo.png" alt="Company Logo" style="max-width:200px;">
  1. Paste this code where you want the logo to appear in the header message — typically at the very top.
  2. Click Save Changes.

When you expand or preview your header message, you should now see your logo displayed.

Step 4: Adjust the Logo Size

If your logo appears too large or small, you can resize it directly in the HTML code:

<img src="/uploads/yourlogo.png" alt="Company Logo" style="max-width:200px;height:auto;">

Alternatively, resize the image before uploading using photo editing software (such as Photoshop, GIMP, or Preview on Mac). A width of 150–250 pixels is generally a good size for most booking engine headers.

Example

Here’s an example of how your header code might look with a centered logo that links back to your website:

<div style="text-align:center;">
  <a href="https://www.yourwebsite.com" target="_blank">
    <img src="/uploads/yourlogo.png" alt="Your Business Name" style="max-width:220px;height:auto;">
  </a>
</div>

Summary

Adding your logo to the booking engine header helps strengthen your brand identity and gives guests a more cohesive experience between your main website and ReservationKey booking page.

Once saved, revisit your public booking page to confirm that the logo displays correctly across different devices.