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>

Widget attributes

Each widget element supports the following HTML attributes:

• origin — Departure port code (e.g. "PIR"). Leave empty for destination-only searches.
• destination — Arrival port code (e.g. "HER"). Leave empty for origin-only searches.
• design — Visual style: "v1" (classic, default) or "v2" (modern card layout with sorting and company logos).
• lang — UI language: "en" (English, default) or "el" (Greek). Overrides the global fhiw('lang') setting per widget.

When only one port is set, the widget shows all connected routes with a dropdown filter to narrow by port.

Global configuration

The fhiw() function accepts the following global options, which apply to all widgets on the page:

// Required
fhiw('client', 'YOUR_WIDGET_API_KEY');

// Optional
fhiw('affiliate', 'YOUR_AFFILIATION_ID');
fhiw('target', '_blank');        // open booking links in a new tab
fhiw('design', 'v2');            // set the default design for all widgets
fhiw('lang', 'el');              // set the UI language (en or el)

The design and lang attributes on individual widgets take priority over the global fhiw() settings, so you can mix styles and languages on the same page.