Advanced Lightframe API Usage

The behavior of Auto-Lightframe can be customized via the API’s FH.autoLightframe method. The method takes one argument, an options object that accepts the following properties:

• container: (DOM element) Only FareHarbor links that are descendants of the given container element will trigger a Lightframe. The element can be a single link itself. Defaults to the whole document.
• className: (string) Only FareHarbor links with given class will trigger a Lightframe.
• callback: (Function) Called when a Lightframe link is clicked, just before the Lightframe opens or redirection occurs. The function will be passed the anchor element as the first argument.
• overrideOnclick: (boolean|'all') By default, Auto-Lightframe will not execute on any links that have an onclick attribute. Set to true to disable this behavior and run on all anchor tags whose onclick attribute does not contain an FH.open() call. NOTE: the code in the onclick attribute will not be executed. Set to 'all' to run on all anchor tags regardless of onclick attribute.

For convenience, passing a string to FH.autoLightframe is the same as passing { className: 'your-string' }, and passing a DOM Element is the same as passing { container: theDomElement }.

Note: To use these options, you must only include the Lightframe API script tag without ?autolightframe=yes in the src. Here’s an example:

<script type="text/javascript" src="https://fareharbor.com/embeds/api/v1/"></script>
<script type="text/javascript">
  FH.autoLightframe({
    className: 'link-type-A',
    callback: function(linkElement){
      console.log('Link of type A was clicked');
    }
  });

  FH.autoLightframe({
    className: 'link-type-B',
    callback: function(linkElement){
      console.log('Link of type B was clicked');
    }
  });
</script>

In the above example, only links with the classes link-type-A or link-type-B will Auto-Lightframe. If you need every link to Auto-Lightframe, but need a certain callback for some links, follow this example:

<script type="text/javascript" src="https://fareharbor.com/embeds/api/v1/"></script>
<script type="text/javascript">
  FH.autoLightframe({
    callback: function(linkElement){
      // Callback will be fired after any FareHarbor link is clicked
      // (Assuming jQuery is on the page for convenience)
      if(jQuery(linkElement).hasClass('link-type-A')){
        console.log('Link of type A was clicked');
      }
      else if(jQuery(linkElement).hasClass('link-type-B')){
        console.log('Link of type B was clicked');
      }
    }
  });
</script>

The API includes two other methods: FH.open, which opens the Lightframe, and FH.close, which closes it.

Using FH.open

For basic usage, add a JavaScript onclick attribute to your element with the appropriate options for your company. Example for an anchor would be:

<a href="https://fareharbor.com/embeds/book/companyname/" onclick="return !(window.FH && FH.open({ shortname: 'companyname' }));">Book now!</a>

This is an alternative to Auto-Lightframe, but does not provide any more functionality. However, FH.open can be used in any event handler code:

<div id="my-button">Book now!</div>
<script type="text/javascript">
document.getElementById('my-button')
  .addEventListener('click', function(){
    FH.open({
      shortname: 'companyname'
    });
  });
</script>

Note: FH.open returns true if the Lightframe was opened, and false otherwise.

Available options for FH.open

Options should be passed as a JSON dictionary — they should be wrapped in braces, they should be comma separated, and the last option should not have a trailing comma.

• shortname: 'companyname': Your company’s FareHarbor shortname. Required.
• flow: 1234: The booking flow to use in the Lightframe. Booking flows dictate which items are visible, and control how they are presented and categorized. Optional: if unset, the company’s default booking flow will be used.
• asn: 'partnername': The shortname of an affiliate to tag ASN bookings to. Optional.
• asnRef: 'Custom ASN Ref': The voucher number that should be set for ASN bookings. Optional: if none is set, “Online” will be used.
• ref: 'Custom Ref': The online booking reference that should be set for bookings. Optional.
• language: 'es': The language in which the booking process will be shown, usually represented with a two- or four-letter code. If none is set, FareHarbor will use the company’s supported languages and user’s browser settings to determine language (this is recommended).

Deprecated options

• items: [5,22]: Limit the Lightframe to certain items. If used, only these items will be visible. Optional. Deprecated in flavor of flow.

View options

Only one view option may be used at a time.

• view: 'items': Open to the grid of items. Default if no view is specified.
• view: 'all-availability': Open to the all-availability calendar (if the specified booking flow includes the calendar view).
• view: { item: 5 }: Open to the calendar for item 5.
• view: { item: 5, availability: 867901 }: Open to booking availability 867901 on item 5.

Note: If view is set to a single item, the user can navigate back in the Lightframe to see an all-item grid or calendar. To filter the items included in the grid or calendar, use the items option in conjunction with the view option.

Using FH.close

Calling FH.close closes the Lightframe if it is open, and returns true. When it is not open it returns false. It has no other options.

• When the API script has loaded successfully, the class fh-ready is added to the page’s html element.
• The iframe for the Lightframe is automatically written into the top of the page’s body.
• The Lightframe will not be opened on certain mobile and touch devices. In these instances, the user will be redirected a secure page within fareharbor.com to complete their booking.