Adding the ReservationKey Search Widget to a WordPress Website
This guide explains how to embed the ReservationKey search widget into a WordPress website using the built-in HTML widget (or Elementor HTML block).
Once added, visitors can search for availability directly from your website and be redirected to your ReservationKey booking page with pre-filled dates.
Step 1: Copy the Search Box Code from ReservationKey
- Go to the Website tab in your ReservationKey account.
- Click Reservation Pages.
- Select the reservation page you want to link to.
- Scroll to the very bottom and click Linking to this page.
- Locate the section labeled Search Box Code.
- Click inside the box and press Ctrl + C (Windows) or Cmd + C (Mac) to copy the code.
Step 2: Open the Page in WordPress
- Log in to your WordPress Dashboard.
- Click Pages ? All Pages.
- Find the page where you want to add the search widget (for example, your homepage).
- Click Edit (or Edit with Elementor, depending on your setup).
If you’re unsure which page to edit, open your live website and use the browser’s address bar to confirm the correct page name before editing it in WordPress.
Step 3: Add the HTML Widget
The exact steps will depend on your WordPress editor:
- If using the standard WordPress block editor (Gutenberg):
- Click the + icon to add a new block.
- Search for Custom HTML and select it.
- Paste the code you copied from ReservationKey into the HTML block.
- If using Elementor:
- Click Edit with Elementor.
- Find the HTML widget from the left panel.
- Drag and drop it into the desired section of your page.
- Click the Edit icon and paste your ReservationKey search box code into the HTML code field.
Step 4: Adjust the Layout (Optional)
Depending on your theme, you may need to adjust the layout or styling of the search box.
- Add
style="float:left;"
to each element if you want the fields (check-in, check-out, guests, etc.) to align horizontally.
- On smaller screens, the fields will automatically wrap into a vertical layout.
- You can customize colors, spacing, and font size using your website’s CSS or Elementor’s Style tab.
Step 5: Save and Test the Widget
- Click Update or Publish to save your changes.
- Exit to the WordPress Dashboard.
- Open your live website and navigate to the page where the widget was added.
- Test the widget by entering check-in and check-out dates, then clicking Search.
If set up correctly, you should be redirected to your ReservationKey booking page with the selected dates pre-filled.
Step 6: Remove Old or Conflicting Widgets
If your WordPress theme came with a built-in booking or search form from another system, remove it to avoid confusion.
Only the ReservationKey widget should remain active on the page.
Summary
By embedding the ReservationKey search widget via an HTML block, you can seamlessly integrate your booking system with your WordPress site.
Your guests can search for available dates and proceed directly to your ReservationKey reservation page without leaving your website.