Building a luxury holiday rental website in WordPress is a rewarding challenge—until you get to the booking integration. If you use SuperControl, you know it’s a powerhouse for property management. However, their standard “out-of-the-box” search widgets often leave a lot to be desired in the design department.
If you want a seamless, high-end user experience, you don’t want an iframe that looks like a relic from 2010. You want a bespoke HTML search bar that matches your brand and talks directly to the SuperControl API.
In this guide, we’ll walk through the process of linking your custom front-end search to SuperControl, specifically for WordPress users.
“Working with an API is like being handed the keys to a high-performance engine without being forced to use the original manufacturer’s bodywork. It’s the moment you stop being limited by what a software provider thinks your website should look like and start building the exact experience your client deserves.”
The standard SuperControl search widget is easy to install, but it’s restrictive. By building your own HTML form and connecting it via the API, you gain:
Complete Design Control: Match your site’s typography, colors, and button styles.
Improved SEO: Keep users on your domain longer rather than redirecting them immediately to a third-party booking page.
Mobile Optimization: Custom forms allow for better “thumb-friendly” inputs on mobile devices.
First, you need the front-end. In WordPress, you can add this via a Custom HTML Block in Gutenberg or within a custom page template. The key is ensuring your input “names” are ready to be processed.
<form id=“sc-search-form” action=“/search-results/” method=“GET”> <div class=“form-group”> <label>Arrival Date</label> <input type=“date” name=“arrival_date” required> </div> <div class=“form-group”> <label>Nights</label> <select name=“duration”> <option value=“3”>3 Nights</option> <option value=“7”>7 Nights</option> </select> </div> <button type=“submit”>Check Availability</button> </form>
The “magic” happens when the user clicks search. You have two main routes: the URL Redirect or the JSON API.
If you simply want your custom form to “hand off” the data to SuperControl’s results page, you just need to point your form action to their search URL. However, SuperControl requires specific parameters. You will likely need a small PHP script in your functions.php to intercept your WordPress form and “translate” the data into a URL string like: https://secure.supercontrol.co.uk/availability/search.asp?siteID=12345&startdate=2024-06-01
To keep the results inside your WordPress site, you’ll use the SuperControl JSON API.
Get your API Key: Log into SuperControl, go to Integrations > Developers, and generate your API credentials.
Fetch Data with PHP: Use the WordPress HTTP API (wp_remote_get) to fetch data based on the user’s search.
PHP:The most common reason developers fail with the SuperControl API is date formatting.
Users usually type dates as DD/MM/YYYY.
The SuperControl API strictly requires YYYY-MM-DD.
In your WordPress backend, you must sanitize and convert the date before sending the request:
$user_date = $_GET['arrival_date'];
$formatted_date = date('Y-m-d', strtotime($user_date));
Once you receive the JSON response from the Supercontrol API, you need to loop through the properties and display them. By using a WordPress Shortcode, you can place these results on any page.
You’ll take the JSON array (which includes property names, images, and prices) and wrap it in your own CSS classes. This ensures the search results look like an organic part of your website, not an external plug-in.
Use Transients: API calls take time. Use the WordPress Transients API to cache search results for 10–15 minutes so your site stays lightning-fast.
Mobile First: Ensure your date picker is easy to use on a smartphone. Native HTML5 date inputs (type="date") are often best for mobile compatibility.
Clear CTAs: Ensure every property returned by the API has a clear “View Details” or “Book Now” button that links directly to the final checkout step.
Linking a custom HTML interface to the SuperControl API can be technical, but the result is a professional, high-converting booking experience that sets your holiday rental business apart.
The shift to AI-powered search is a huge opportunity for businesses that are willing to adapt. By focusing on creating high-quality content, embracing ASO, and providing a great user experience, you can position your website for success in the new era of search.
If you’re looking for a partner to help you navigate this journey, the team at TWDA Creative Services is here to help. We’d love to chat about your business and how we can help you achieve your online ambitions.
This post is purely an introduction please consult with professionals before attempting.
Visit us at twda.co.uk or give us a call – let’s start the conversation!
Thinking about direct bookings for your own property? This integration is part of what we offer under web design for holiday lets, pubs and hotels.
Quality and service are very important to us, but don’t just take our word for it. See what our customers say about our service, quality and value of our work.
