If you've ever tried to add FareHarbor booking to a WordPress site, you've probably noticed something: FareHarbor's own documentation is sparse, and most WordPress tutorials don't cover it at all.
I ran into this while building a booking site for an Aruba tourism company managing three separate partner brands under one WordPress site. After figuring out the hard parts — multi-partner widget setup, Elementor integration, mobile performance — I'm writing down everything I wish I'd found in one place.
This is a complete walkthrough. By the end your visitors will browse tours, check live availability, and complete bookings without ever leaving your WordPress site.
What You Need Before Starting
Active FareHarbor account with at least one bookable item
Your FareHarbor shortname — find it at Dashboard → Settings → Company Info
WordPress admin access
Items set to Active status in FareHarbor (draft items won't show in widgets)
Active SSL (HTTPS) on your WordPress site — FareHarbor widgets require it
Your shortname is a short lowercase word like islandtours or toptie. You'll use it in every embed URL. It's case sensitive — copy it exactly.
Method 1 — Embed a FareHarbor Widget with Custom HTML
The fastest way to get FareHarbor live on WordPress.
Step 1: Generate Your Embed Code
Log in to FareHarbor Dashboard
Go to Widgets in the left sidebar
Click Create New Widget
Choose widget type: Book Button, Calendar, or Flow
Select which tours to include
Customize button color to match your brand
Click Generate Code → copy the snippet
It looks like this:
html
href="https://fareharbor.com/embeds/book/yourshortname/items/12345/?full-items=yes&u=yes"
class="fh-button">
Book Now
Step 2: Paste Into WordPress
Open your page in the WordPress editor (Gutenberg)
Click + → search for Custom HTML → add it
Paste your FareHarbor embed code inside
Preview to confirm the widget loads
Publish
Pro tip: Load the FareHarbor script tag once in your site header using WPCode rather than once per widget. This stops it loading multiple times across pages and keeps your site fast.
Method 2 — Elementor Integration (No Code)
If your site runs Elementor, you don't need to touch raw code at all.
Using the HTML Widget
Open your page in Elementor
Search HTML widget in the left panel
Drag it into your section
Paste your FareHarbor embed code in the HTML field
Click Update — live preview renders immediately
Using Elementor's Button Widget
Point any Elementor button directly at a FareHarbor booking URL:
https://fareharbor.com/embeds/book/yourshortname/items/all/?full-items=yes
Once the FareHarbor script loads on the page, clicking this URL opens the booking flow in a modal overlay — customers complete the full booking without leaving your site. This matters a lot for conversion rates.
Method 3 — Full Booking Page with All Tours (Flow Widget)
This is the most powerful setup. Instead of a single button, you get a full page showing every tour with photos, descriptions, live availability, and individual booking buttons.
FareHarbor calls this the Flow widget.
html<!-- Load FareHarbor script once in header, then: -->
FareHarbor Dashboard → Widgets → Create New Widget
Select Flow as widget type
Choose All Items or specific tours
Set grid or list display, number of columns
Copy embed code
Create a new WordPress page: "Book a Tour" or "Experiences"
Add Custom HTML block (Gutenberg) or HTML widget (Elementor)
Paste Flow embed code
Publish
The page pulls live availability directly from FareHarbor's servers. No manual updates needed when tour schedules change.
Adding a Book Now Button to Your Nav Menu
One of the highest-converting changes you can make — a colored button in your navigation menu.
In WordPress:
Dashboard → Appearance → Menus
Under Links → add URL (your booking page) + text "Book Now"
Add to menu → drag to far right
Expand item → add CSS class: fh-nav-button
Save Menu
Style it in Customizer → Additional CSS:
css.fh-nav-button > a {
background-color: #0D9488;
color: #ffffff !important;
padding: 10px 20px;
border-radius: 6px;
font-weight: bold;
transition: background 0.3s ease;
}
.fh-nav-button > a:hover {
background-color: #0F766E;
}
Multi-Partner Setup (Advanced)
This is the scenario I built for my Aruba client — one WordPress site, three separate FareHarbor partner accounts, all booking through one operator shortname.
FareHarbor handles this through its Partner Network. Here's how it works:
Your account = the operator account
Each partner has their own FareHarbor account
Partners grant your account booking permissions from their dashboard
You use your operator shortname in all embeds — FareHarbor pulls partner inventory automatically
Embed all items including partner inventory:
html
Book Now
Embed specific partner items only (use their item IDs):
html
Book Partner Tours
Page structure for multi-partner sites:
├── Hero section (main CTA)
├── Partner 1 section → Flow widget (filtered to Partner 1 items)
├── Partner 2 section → Flow widget (filtered to Partner 2 items)
└── Partner 3 section → Flow widget (filtered to Partner 3 items)
Watch out: Every partner must approve your account inside their own FareHarbor dashboard before their items appear. This is outside your control — build this dependency into your project timeline. It's the most common bottleneck in multi-partner setups.
Customizing Widget Appearance
Button color: Set a custom hex in the FareHarbor Widget builder to match your brand.
Custom CSS for Flow widget cards:
css/* Rounded corners on tour cards */
.fh-widget-item-card {
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
/* Override button font */
.fh-book-now-button {
font-family: inherit !important;
letter-spacing: 0.5px;
}
Lightbox vs redirect: FareHarbor opens in a lightbox by default. To force a full redirect instead, add ?flow=no to booking URLs. The lightbox almost always converts better — keep it unless you have a specific reason to change it.
Pre-Launch Testing Checklist
Before going live run through every one of these:
Widget loads — no blank sections or console errors
All tours appear with correct photos and prices
Book Now opens the modal correctly
Available dates show accurately
Full test booking completes (use a real card, then cancel)
Confirmation email arrives
Tested on real iPhone in Safari (not just desktop Chrome)
Widget loads under 3 seconds on mobile connection
iOS Safari warning: Payment flows inside embedded widgets have strict requirements on iOS Safari. Always test on a real iPhone before going live. If payments fail on iOS but work on desktop, check your SSL certificate is valid and no security plugin is blocking the FareHarbor domain.
Common Errors and Fixes
Widget loads but shows no items
Cause: Items set to Draft or Hidden in FareHarbor
Fix: FareHarbor Dashboard → Items → set status to Active
Also check: shortname in embed URL is correct and lowercase
Booking modal doesn't open on click
Cause: FareHarbor script tag missing or loading after the button
Fix: Add to site via WPCode as a Header snippet:
Widget visible on desktop, invisible on mobile
Cause: Theme or Elementor hiding HTML blocks at mobile breakpoint
Fix: Check widget visibility settings in Elementor → Responsive panel
HTTPS mixed content error
Cause: WordPress site still on HTTP
Fix: Install free SSL via hosting panel
Update both URLs in Settings → General to https://
Partner items not appearing
Cause: Partner hasn't approved your account yet
Fix: Ask partner to log in → FareHarbor Dashboard → Partners → approve your account
SEO for FareHarbor Booking Pages
FareHarbor widgets are JavaScript-rendered. Google may not fully index tour content inside them. Protect your rankings by:
Writing a real H1 with your target keyword above the widget
Adding 150–200 words of descriptive text before the Flow widget loads
Writing individual tour descriptions as regular WordPress text below each widget
Adding an FAQ block below the booking section
FAQ Schema example (add via Yoast FAQ block):
Q: How do I book a tour?
A: Click Book Now on any tour, select your date and group size, and complete payment securely through FareHarbor.
Q: Does booking online cost extra?
A: No — online booking costs the same as any other channel and is usually the fastest way to secure your spot.
Q: What payment methods are accepted?
A: FareHarbor accepts all major credit and debit cards through its secure checkout.
Q: Can I book tours from multiple partners at once?
A: Each tour books individually through its own FareHarbor flow, even when multiple partner tours appear on the same page.
Summary
Here's the full picture in one place:
MethodBest ForDifficultyCustom HTML blockQuick single button⭐ EasyElementor HTML widgetVisual control, no code⭐ EasyFlow widget pageFull tour catalog⭐⭐ MediumMulti-partner setupUmbrella operators⭐⭐⭐ Advanced
Start with Method 1 to get something live fast. Move to the Flow widget page as your primary booking destination. Add the nav menu button for maximum conversion.
If you're managing multiple partner brands — the multi-partner setup above is exactly what I built for a real Aruba tourism company. It works cleanly once partner approvals are in place.
Built something with this guide? Drop a comment below — I'd love to see what you made.
I'm Syed Aoun Raza — freelance WordPress, WooCommerce, and Flutter developer. Portfolio: syedaounraza.online
Top comments (0)