Ferryhopper Trips Widget

Trips Widget is designed for partners who want to display real-time ferry routes, schedules, and prices directly on their website — without the burden of manually maintaining ferry information.

If you run a travel blog, destination guide, or content-driven website focused on islands, coastal routes, or multi-stop journeys, ferry information is often a crucial part of trip planning.

Keeping that information accurate isn't easy. Ferry schedules change frequently, routes vary by season and operator, prices fluctuate, and port connections are updated throughout the year. Maintaining this data manually is time-consuming and quickly becomes outdated.

Trips Widget removes that complexity by pulling live ferry data directly from Ferryhopper, our booking platform.

This means:

• No manual updates
• No static tables
• No outdated schedules or prices

Your users can search ferry routes, view real-time availability, and book seamlessly via Ferryhopper.

---

How does Trips Widget work?

Trips Widget is a lightweight, embeddable search component displaying real-time ferry routes, schedules, and prices between ports. It works as a dynamic search tool that pulls live data from Ferryhopper.

You can use it to:

• Display ferry connections between specific ports
• Support island hopping and multi-destination travel content
• Guide users directly to live availability and booking

Below is an example of how the widget appears on a page.

---

Installation & Setup

Installing Trips Widget is simple and requires no advanced technical knowledge. The script and configuration options are available in your Affiliate Dashboard.

Step 1: Get your API key

To activate the widget, you'll receive an API key from us. This enables the widget to fetch live ferry data and ensures all interactions are correctly attributed to your affiliate account.

Step 2: Add the widget script

Once you have your API key, add the script to your website — ideally before the closing </body> tag, similar to other third-party scripts, such as analytics or commenting tools.

<script>
  window.fhiw = window.fhiw || function() {
    (fhiw.init = fhiw.init || []).push(arguments)
  };
  
  // Required: Replace with your API key from the Affiliate Dashboard
  fhiw('client', 'YOUR_WIDGET_API_KEY');
  
  // Optional: Track bookings to your affiliate account
  // fhiw('affiliate', 'YOUR_AFFILIATION_ID');
  
  // Optional: Open booking links in a new tab
  // fhiw('target', '_blank');
  
</script>
<script async src="https://widgets.ferryhopper.com/widget.js"></script>

Step 3: Place the widget on your pages

After the script is added, you can insert the widget anywhere on your site using simple HTML elements.

<ferryhopper-widget origin="PIR" destination="HER"></ferryhopper-widget>

You can configure the widget to set:

• Departure port(s)
• Arrival port(s)
• Predefined routes or flexible searches

This allows you to tailor the widget to each page, showing only the ports and routes that align with your content and are most relevant to your audience.