Website-Integrations Cheatsheet

Best Practices

This is a non-comprehensive list of best practices. Moreover, your good judgement takes precedence over anything listed here: do what’s best for the customer and their website and for booking fees.

• Every page should have a booking option. This could be a nice call-to-action in the header and a small “Book online now” link in the footer, or consider adding a floating button to all pages. This can either link straight to the LightFrame or to a page on the site which itself has FareHarbor embeds.
• Sell the most popular items first. For example: If a company has 10 items, but 1 item accounts for 80% of their bookings, then that item should have way more visual prominence on their website than the other 9. Usually this will already be done in the booking flow.
• Don’t overwhelm the user with options!
  • Don’t add 20 bright red book buttons on the same page. More buttons is not equivalent with more bookings.
  • Add item grids and embedded calendars. (Calendars with a single item are usually fine).
  • A few easy choices, each with only a few options, is far preferable to one hard choice with many options. For example: If a company offers 3 food tours and 8 sunset tours, try to set up two book buttons: “Book a food tour” and “Book a sunset tour”. Filter the item grids for each LightFrame to the appropriate tours.
• Whenever possible, put buttons on activity pages. While it may be difficult to work around the template or page design for the individual activities pages on the website, it’s important to preserve and support the pages for SEO reasons.
• Make sure integration is mobile friendly. Many of our client’s websites see over 50% of their site traffic on a mobile browser. Google is implementing a “Mobile First” policy for SEO. Be sure your integration works on mobile as well. When in doubt, add a fixed button that appears only on the mobile version of the site.
• LightFrame whenever possible. The Lightframe is the name of our pop-up booking modal that allows for on-site checkout for anyone browsing on the desktop website of our clients. On-site checkout is great for conversions.

Automatic LightFraming

The Lightframe API can now trigger a LightFrame for all FareHarbor links–even those without an onclick attribute set. To enable this functionality, append autolightframe=yes to the Lightframe API src, like this:

<!-- FareHarbor Lightframe API - do not remove - see: https://help.fareharbor.com/api/lightframe-api/ -->
<script src="https://fareharbor.com/embeds/api/v1/?autolightframe=yes"></script>

Auto Lightframing should make it easier to work with site builders. Just inject the above script source into the page right above the closing </body> tag, and then use the site builder interface to insert normal links and buttons. The embed generator can output the correct links for you. See here.

Note: Only “simple fallback” links can auto Lightframe. Make sure the “Use simplified page design when unable to Lightframe” box is checked in the embed generator. It’s checked by default.

Version 3.1 of the WordPress plugin adds support for auto Lightframing. Check “Enable auto Lightframing.” in the plugin settings.

Check out a comprehensive display of buttons here.

Installation

Installation is easy; just insert the following right above the closing </head> tag on the page:

`<!-- FareHarbor buttons stylesheet -- do not remove -->
<link rel="stylesheet" href="https://fh-kit.com/buttons/v2/" type="text/css" media="screen" />`

Stylesheet versions

We recommend using the v2 buttons stylesheet included in the code above. The v1 buttons stylesheet is still supported, but not all of the button types and modifying classes below will be available when using v1 buttons. When using the v1 stylesheet, you’ll need to declare the button type when using modifying classes (for example, fh-button-icon--check instead of fh-icon--check).

Color options

The stylesheet will give you a button that is FareHarbor blue by default. To load additional colors, just append query parameters in the form colorname=HEX to the stylesheet url. That will generate a class like fh-button-colorname. You can append as many unique colornames as you wish. Here are some examples:

Usage

Just add class="fh-button" to any element you wish to turn into a button. If you want to use one of your custom colors, e.g., “red”, use class="fh-button-red" instead.

The stylesheet also comes with modifier classes for icons, sizes, shape, fixed buttons, and “hide on mobile/desktop” options. View all classes here.

Examples

All WordPress installs should use our WordPress plugin.

Setup

1. Go to website-url/wp-admin/ to access the login page.
2. Go to Plugins > Add New in the sidebar website-url/wp-admin/plugin-install.php.
3. Search for “FareHarbor” and install. Once installed, activate the plugin.
4. After activation, go to Settings > FareHarbor.
5. In the Defaults section:
   • Confirm the box to turn on responsive calendars is checked.
   • Confirm fallback = simple.
   • Confirm “Enable auto Lightframing” is checked.
6. If you are using FareHarbor buttons, in the FareHarbor Buttons section:
   • Check Load the FH Buttons stylesheet on all pages.
   • Optionally enter a query string for button colors (you’ll get FareHarbor blue by default). For example, ‘red=ff0000&green=00ff00‘.

Watch a video example.

Plugin Shortcode Usage

Shortcodes can be inserted into any WordPress WYSIWYG editor. That’s the editor used for Posts (blog posts) and Pages.

See here for comprehensive documentation. You can also use the embed generator to generate WordPress shortcodes for you. The plugin automatically injects the Lightframe API into pages.

Note: For all shortcodes you will need to add shortname="companyname" fallback="simple" if you haven’t set the defaults on the plugin settings page.

Lightframe Buttons

Note: You should add type="responsive" to your calendars if you haven’t set the defaults.

Calendars

Embedded item grid

Custom code injection & Fixed buttons

Often custom code injection is required to complete the required elements for integrations. While it is possible to edit the theme files to include any code from within the WordPress dashboard, this practice can cause large issues if not performed correctly. Additionally, these changes will be reverted when the theme is updated if a child theme has not been properly configured.

The recommended solution to this is install a plugin which allows for arbitrary code execution from the header or footer on a site. The process for setting up this plugin is detailed below.

Plugin Installation

1. Hover over Plugins and then click Add New.
2. Type “simple custom css and js” in the search bar.
3. Click on the Install Now button.
4. Once Installed, click on the Activate button.
5. The Custom CSS & JSS plugin will have its own section on the left-hand side.

Steps to create a Fixed Button:

1. Hover over Custom CSS & JS and click on Add Custom HTML.
2. Name the code “FH Fixed Button” or “FH Floating Button”.
3. Enter in Fixed/Floating Button code: <a href="#" class="fh-button-flat fh-fixed--bottom fh-icon--arrow" >Book Now</a>
4. On the right-hand side, make sure under Where on Page, you select the Footer.
5. Click Update.

Watch a video example.

How to Check for WordPress Admin Access

Admin access is necessary for a host of actions within the WordPress dashboard including installing the FareHarbor plugin, accessing theme files, and editing widgets, menus, pages and posts.

Steps:

1. Go to login URL and enter username and password.
2. Check the left-hand menu in the WordPress dashboard for Appearance, Plugins, and Settings. Each one is essential for a complete Wordpress-FareHarbor integration.

Click For Full Image

Tip and Tricks

• Many times the homepage will not show up as an editable page within the WordPress dashboard. Look for a Theme Options section or the Customize section within the dashboard.
• If the LightFrame API doesn’t show up on the page after installing the plugin and clearing the cache, look in the theme files for the wp_footer(); function fired in the footer.php file. If the footer function isn’t there, the theme isn’t compatible with plugins & you’ll have to use an alternate solution.

Setup

1. Once logged in, under Website, click Pages.
2. Scroll down and click on Website Tools.
3. Click on Code Injection.

4. Put the FH stylesheet code in the Header Section:

   <link rel="stylesheet" href="https://fh-kit.com/buttons/v2/?red=cc0000&orange=F29600&green=3AB134" type="text/css" media="screen" />

5. Put the FH Lightframe API and (if applicable) the Floating button in the Footer Section:

   Lightframe API code: <script src="https://fareharbor.com/embeds/api/v1/?autolightframe=yes"></script>

   Floating Button code: <a href="#" class="fh-button fh-fixed--bottom fh-icon--arrow" >Book Now</a>

6. Click Save.

Tips and Tricks

• Don’t use the page specific code injection field within a page’s settings.
• Sometimes you can’t inject HTML or button elements in a section where you would like to have booking elements. In this case, set a hyper link with the button text you would like and add classes to anchor tags with that link using jQuery.

Setup

After Wix websites updated their third party tracking to allow for custom code injection, we can set pages to lightframe by adding the lightframe API as a custom tracking code. Wix sites must meet the follow criteria in order to lightframe:

• Website is published and linked to an external domain.
• Website is on a premium Wix plan.
• Must be on the regular Wix builder and not the ADI builder.
• Embeds still don’t lightframe due to Wix handling of custom code.

1. Once logged in, click on Settings.
2. Click on Custom Code.
3. Select + Add Custom Code

4. Put the FH API code & the Google Analytics Fix in the Paste the code snippet here: field.

   Lightframe API code: <script src="https://fareharbor.com/embeds/api/v1/?autolightframe=yes"></script>

   Google Analytics Fix: <script> var GoogleAnalyticsObject = 'ga'; </script>

5. Name the code FareHarbor API or something similar.

6. In the Add Code to Pages: sections, select All Pages & Load code on each new page.
7. Select Body – end for the Place Code in: section.
8. Select Apply.

Watch a video example.

Tips and Tricks

• While the Lightframe API can be added to Wix sites, embeds will still not LightFrame. This is due to the fact that the embed is itself served from an iframe. Subsequently, Always integrate using links whenever you can on Wix sites!
• The custom HTML field in Wix will serve content in an iframe, so don’t use that field for FareHarbor buttons. Instead use the button elements within the Wix builder.

Setup

1. Once logged in, navigate to the Extensions menu item and then select Templates and Templates again.
2. Select the Joomla theme the website is using. See note for determining which Joomla theme should be selected
3. Find the index.php file listed on the left-hand side.

4. Put the FH stylesheet code before the </head> tag.

   <link rel="stylesheet" href="https://fh-kit.com/buttons/v2/?red=cc0000&orange=F29600&green=3AB134" type="text/css" media="screen" />

5. Put the FH Lightframe API and (if applicable) the Floating button before the closing </body> tag

   Lightframe API code: <script src="https://fareharbor.com/embeds/api/v1/?autolightframe=yes"></script>

   Floating Button code: <a href="#" class="fh-button fh-fixed--bottom fh-icon--arrow" >Book Now</a>

6. Click Save.

Watch a video example.

Tips and Tricks

• Pages are usually referred to as Articles within Joomla. When looking for a specific page/article, use the Joomla filter options to your advantage. If you cannot find the page in the list of articles, navigate to the menu section and see what the appropriate menu item is linked to.
• Often homepage blocks and sidebars can found within the Modules section of the dashboard. Again, use Joomla’s filtering options to help you find exactly what you’re looking for. For example, set the filter to only display published items in order to find an element currently live on the website.

Setup

In order to log into a Shopify dashboard, go to the Shopify login page and enter in your login information. You usually don’t need to fill out the Store address field.

Once logged in to the Shopify dashboard, select Online Store from the lefthand menu. If you don’t see the online store option, you’ll need to request additional access.

From there the theme will be shown in a box on the right hand side of the page. Click the dropdown menu Actions -> Edit Code, this is where you will add global code.

To edit specific pages, select Customize

From there, click on the file theme.liquid and paste the button stylesheet above the closing </head> tag at the top of the document, and the LightFrame API above the closing </body> tag at the bottom of the document and click save (This is also where you can place the code for a fixed button).

Tips & Tricks

• Edit Shopify product pages on each individual page. Add a book button in the desciption editor, and write CSS within a <style> tag to hide the default booking software. This should replace the Shopify booking software with a FareHarbor book button.

Setup

1. Once logged in, click on Edit Site.
2. On the top grey bar, click on Settings.
3. Click on SEO.

4. Put the FH stylesheet code in the Header Section:

   <link rel="stylesheet" href="https://fh-kit.com/buttons/v2/?red=cc0000&orange=F29600&green=3AB134" type="text/css" media="screen" />

5. Put the FH Lightframe API and (if applicable) the Floating button in the Footer Section:

   Lightframe API code: <script src="https://fareharbor.com/embeds/api/v1/?autolightframe=yes"></script>

   Floating Button code: <a href="#" class="fh-button-flat fh-fixed--bottom fh-icon--arrow" >Book Now</a>

6. Click Save.

Watch a video example.

Tips & Tricks

• Sometimes Weebly just doesn’t work for no reason at all. Especially apparent when working with custom HTML fields.
• The built in button elements within Weebly are trash. Use FareHarbor buttons when possible.

Setup

GoDaddy GoCentral websites can lightframe using a special code injection hack. Embeds will not lightframe, but links and floating buttons will. There are a few integration options available anyway.

• Option 1: Add a button.

Select a section of the site you would like to add a button, such as the header section to ensure a call-to-action above the fold. On the right hand options, check the option to “Show Action Button” and the FareHarbor booking link as the URL.

• Option 2: Add an embed.

You can add an embedded HTML section to any web page in the site builder. While this will not lightframe, you can include an embedded flow to provide a visual booking call to action. Select the blue “+” Icon underneath a section and choose “HTML” for your section type. This will allow you to paste in the embed code for a flow or calendar embed.

• Adding the Lightframe API

GoDaddy has all of their custom code injections sandboxed within an iframe. However, we can use the iframe to inject code into the parent document. This allows us to add the Lightframe API to the main document which will allow the site to lightframe.

Just add the code below to an HTML embed to get the site to lightframe.

<script> var p = parent.window.document; fhScript = p.createElement('script'); fhScript.src = "https://fareharbor.com/embeds/api/v1/?autolightframe=yes"; p.body.appendChild(fhScript); if (!p.getElementById('editor')){ p.querySelector('.widget-html-html-1').style.display = "none"; } </script>

• Adding a Floating Button

Adding a floating button to a GoCentral site is slightly more complicated. You can leverage the same principles from before to add the stylesheet and fixed button to the main site document using the following script.

<script> var p = parent.window.document; fhScript = p.createElement('script'); fhScript.src = "https://fareharbor.com/embeds/api/v1/?autolightframe=yes"; p.body.appendChild(fhScript); fhStyleSheet = p.createElement('link'); fhStyleSheet.href = 'https://fh-kit.com/buttons/v2/?blue=3396D6'; fhStyleSheet.rel = 'stylesheet'; fhStyleSheet.type = 'text/css'; p.body.appendChild(fhStyleSheet); fhFixedButton = p.createElement('a'); fhFixedButton.href = 'BOOKINGLINK'; fhFixedButton.className = 'fh-button-true-flat-blue fh-shape--square fh-icon--check-square fh-fixed--bottom'; fhFixedButton.innerHTML = 'BOOK NOW'; fhFixedButton.id = 'fhFixedButton'; if (!p.getElementById('editor') && !p.getElementById('fhFixedButton')){ p.querySelector('.widget-html-html-1').style = 'height:0px !important;'; p.body.appendChild(fhFixedButton); } </script>

Tips & Tricks

• There is a menu section that is frequently used for pricing. You cannot add buttons to these sections, but you can add an embed section underneath, or can hyperlink text in the description.

Setup

Log into the VistaPrint account and select Edit Your Website.

Buttons

From inside the editor, you will be able to add FareHarbor links to any existing book buttons or create new ones if necessary. Link them using the External option.

Lightframing

To add the Lightframe API most efficiently, locate the global footer on a page. Then hover your mouse over the area until you find the green +. Click this to add a new element.

From the pop up menu, select Extras and then add an HTML element.

Then place the Lightframe API script inside the element and close it. Be aware that the height will automatically be set to 0 pixels. So, don’t worry about it showing up as a large empty block on the page.

For integrating on website writing in raw code, check out this tutorial for adding the Lightframe API and Stylesheet to an HMTL document using Sublime Text.

If you find yourself doing a lot of FTP integrations, contact Integration Team Lead for a license to Coda.

Tips and Tricks

• If you’re doing a random FTP integration, look for something like <?php include 'footer.php'; ?> near the bottom of the file that corresponds with the page you wish to edit. Some CMS’s have this option, usually under Advanced Settings, etc.

Here’s a little cheatsheet to remember what type of login you need to get depending on the type of website a client has. This the list below is the usual procedure, but there will be exception no matter what.

Note: Google Sites allows us to integrate through the editors built in buttons, Google My Business sites does not allow buttons to be added and cannot be integrated at all.

*Wix, Site Builder and GoDaddy GoCentral: Buttons will lightframe, but embeds will not. Only FH button we can add is a floater.

Please Enter Valid Script Fix

If you are trying to add the JS API to a website builder page and it’s giving you a “please enter a valid script” error when you save, add a type: <script src="https://fareharbor.com/embeds/api/v1/" type="text/javascript"></script>

Similarly, you can load the button styles on a site that only allows JS with the worst hack in the world:

<script type="text/javascript">
document.write('<link rel="stylesheet" href="https://fh-kit.com/buttons/v2/?blue=32579e" type="text/css" media="screen" />');
</script>

Web.com

web.com replaces window.JSON with a broken implementation that does not include stringify which subsequently breaks LightFraming. Furthermore, while we can include <script /> tags, we cannot include <link /> tags, nor do @import rules work in the custom CSS section. Just use basic links and image buttons for web.com.