Website Cheatsheet

  • Updated

Different Content Management Systems (CMS) have different limitations when it comes to FareHarbor integrations. Use the following document to know the capabilities of your website and FareHarbor and for instruction on how to add the LightFrame and Stylesheet to your site.

Website Builder / CMS Can buttons Lightframe? Are Embeds Supported? Can embeds Lightframe? Compatible with FareHarbor stylesheet? Necessary Plan?
HTML/CSS/JS Yes Yes Yes Yes N/A
WordPress.org Yes Yes Yes Yes N/A
WordPress.com Yes Yes Yes Yes Business plan or higher
Wix Yes No No Yes Site must be published and domain connected
Squarespace Yes Yes Yes Yes Business plan or higher
GoDaddy GoCentral Yes No No No Any
Shopify Yes Yes Yes Yes Any
Joomla Yes Yes Yes Yes Any
SiteBuilder Yes Yes Yes Yes Any premium
Webflow Yes Yes Yes Yes Basic or higher
Weebly Yes Yes Yes Yes Any
Jimdo Yes Yes Yes Yes Any premium
Google Sites No No No No N/A
Canva No No No No N/A

How to find your Content Management System

The easiest way to find what your site is built with is to use the 3rd party site analyzer BuiltWith. Here you can enter your site URL and scroll down to Content Management System. If it does not display here, try these other methods or ask your web developer to find your CMS.

Limitations of different Content Management Systems

While we would like for all clients using FareHarbor to be able to utilize the LightFrame and FH Stylesheet, there are certain cases in which these features are not compatible. The most common reasons are as follows:

CMS does not allow custom code: In order to add the the LightFrame and stylesheet to your site, we need the ability to add to the global HTML of your site. Most sites allow you to add custom code to all pages of your site, but others (such as google sites and some proprietary systems) do not.

Website subscription plan does not allow custom code: Some CMSs lock the ability to add custom code behind certain subscription plans. For example, if you have a Squarespace or wordpress.com free site, you will need to upgrade to a business plan before we can add the LightFrame. See the above chart for what plan your website will need.

Firewall strips out scripts: If your website has heavy security settings enabled. your website may strip out any custom javascript. Consult with your web developer or check your firewall settings to see if you can whitelist scripts from fareharbor.com.

Embed Rendering Preventing LightFraming: Due to the rendering method that certain CMSs use for embedded scripts, embedded grids and calendars may not be able to LightFrame. This is the case for all Wix and Godaddy Gocentral sites. We suggest replacing the embed with a button that opens to either the calendar or grid view to maintain LightFrame functionality.

Adding the LightFrame and Stylesheet to your site

In order for your site to LightFrame and use the FareHarbor Stylesheet, you need to add the following HTML elements to the code of every page of your site. See the following list for CMS specific instructions. If you are using a CMS not listed below, look in your CMS for somewhere to add to the Global Footer of your site. It may be under templates, settings, or something similar. Look in your CMS’ documentation or ask your web developer for further direction.

LightFrame API

The LightFrame is an online booking tool developed by FareHarbor, designed to provide your customers with an intuitive, secure booking process. By loading this piece of javascript code from the footer of your website, customers can book their activity without ever leaving your website.

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

Learn more about the LightFrame API.

FareHarbor Stylesheet

The FareHarbor stylesheet is a CSS file that gives you access to a variety of attractive, customizable, and conversion-optimized button options for your website. Add the following code to the global header or footer of your website.

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

Learn more about the Stylesheet.

WordPress

  1. Go to Plugins Add New in the sidebar.
  2. Search for “FareHarbor” and install. Once installed, activate the plugin.
  3. After activation, go to Settings FareHarbor.
  4. In the Defaults section:
    • Confirm the box to turn on responsive calendars is checked.
    • Confirm fallback = simple.
    • Confirm Enable auto LightFraming is checked.
  5. 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.

Squarespace

  1. Once logged in, under Website, click Pages.
  2. Scroll down and click on Website Tools.
  3. Click on Code Injection.
  4. Put the FareHarbor stylesheet code in the Header section.
  5. Put the FareHarbor LightFrame API in the Footer section.

Watch a video example.

Wix

  1. Once logged in, click on Settings.
  2. Scroll down and click on Custom Code.
  3. Select Add Custom Code.
  4. Put the FH LightFrame API and the FH Stylesheet in the Paste the code snippet here section.
  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.

Joomla

  1. Once logged in, navigate to the Extensions menu item and then select Templates and Templates again.
  2. Select the Joomla theme your website is using.
  3. Find the index.php file listed on the left-hand side.
  4. Put the FH stylesheet code before the tag.
  5. Put the FH LightFrame API before the closing tag.
  6. Click Save.

Watch a video example.

GoDaddy GoCentral

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 script to the main document and enable LightFraming for book buttons.

  1. From the site editor, add a new section to the page.
  2. Search for and add an HTML block.
  3. In the Custom Code field, add the following code: <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>
  4. Click Done.
  5. Repeat these steps for all pages of your site that need the LightFrame.
  6. Publish your site.

Shopify

  1. Once logged in to the Shopify dashboard, select Online Store from the left menu.
  2. When looking at your theme, select the three dots Edit Code, this is where you will add global code.

  3. Select the theme.liquid file and paste the stylesheet above the closing tag at the top of the document, and the LightFrame API above the closing tag at the bottom of the document.

    shopify

    shopify2

Weebly

  1. Once logged in, click Edit Site.
  2. On the top gray bar, click Settings.
  3. Click on SEO.
  4. Put the FH stylesheet code in the Header section.
  5. Put the FH Lightframe API in the Footer section:
  6. Click Save.