All integration requests are processed through the Airtable Integrations queue. The requester will submit a form and fill out the necessary information to populate a record in Airtable.

There are two primary queues for Integrations: OB Integrations Requests and Live Integration Requests.

The form for Onboarding requests can be found here.

This form is used by Onboarders to submit clients who are ready to go live with FareHarbor to the integrations team, so the integrators can install the FareHarbor booking software onto the website.

The “OB Integrations Request” table is the top priority for Integrators. Whenever possible, the queue should be empty by the end of the same work day they are requested. If a request cannot be completed the same day, be sure to communicate that to the submitter.

The form for live requests can be found here.

This form is used by Account Management, Onboarders, and Channel Development to request updates to live client websites. Typically, we only work on updates to the FareHarbor booking portion of the client’s website. Integrators do not do general content updates. If they need us to make more changes than that regularly, they should get on a FareHarbor website.

Learn more about what integrators do and don’t do

This is the second priority for integrators. These should be completed as quickly as possible and prioritized by account tier.

Live requests from support now come through Zendesk Learn how to complete Zendesk requests here

Claiming Integrations

When selecting a new item to work on in the queue, add your name to the “claimed by” field in Airtable.

Try not to cherry pick integrations in the queue. Integrations should be completed top to bottom in the order they came in. Integrators are expected to complete any request that comes in there queue. If you are not familiar with how to complete a request, please ask a senior integrator.

Additionally, integrations should not be left partially complete whenever possible. Try and plan out how you’re going to do the integration before you change any code. This way, if you don’t have access to an element or need additional information, you will know before you complete most of the integration.

Marking Integrations as Complete

In order to remove a company from the integration queue, navigate to the completion date field and select “Today”. This will move the request status to complete.

For Onboarding Requests

Before you notify the Onboarder their request has been complete, put a note on the integration notes section with the integrator checklist filled out. This checklist can be inserted using the `checklist;’ shortcut if you have Text Expander installed.

INTEGRATOR CHECKLIST/NOTES

• Call to action button above the fold, bold color, draws attention:
• No previous software or legacy buttons on site:
• All items on website integrated:
• Specific buttons on specific pages when applicable:
• Gift card button (if applicable):
• Integrated on all languages (if applicable):
• SEO Audit complete (if applicable):
• Integrator Notes (if you put ‘no’ above explain why & note floater placement in website):

Answer all these questions with a yes/no/’n/a’ or other applicable answer. Be sure to detail anything strange or unusual about the integration in the Integrator Notes section.

After the checklist has been entered, open up Slack and navigate to the #checks_dash channel. Open the workflow menu to the bottom right of the message field and select the appropriate workflow.

T0/T1 Integration – Used for all tier 0 and 1 integrations from EMEA / AMER. OB will be tagged to check the dash and integration.

T2+ Integration – Used for all integrations tier 2 and up from EMEA / AMER. OB will be tagged to check the dash and integration.

APAC Integration – Used for all APAC integrations regardless of tier.

Fill out all fields in the workflow and submit. Relevant team members will be tagged to be notified the integration is complete. The website will be checked by an Onboarder. Any comments or opportunities for better integration will be mentioned in the comments of the thread before being called live.

Live Integration Requests

Open up Slack and navigate to the #website-integrations channel. Within the channel, click into the message bar and tag whoever submitted the request along with the company name in bold and the status of the integration. Acceptable Statuses may include Complete, Incomplete, and Mostly or Partially Complete. Additionally, include a brief note about the task you completed.

Whenever you are not able to fully complete an integration request, be sure to put a note detailing what happened with the request in Airtable.

Please refer to this help page on how to integrate on the most common types of Content Management Systems. For information on how to integrate via pure HTML/CSS/JS, check out this section on Sublime Text.

Please refer to this document on the day-to-day expectations of an Integration Specialist.

Sublime Text Installation Instructions:

Sublime Text is a code editor used to view files that contain code such as HTML, CSS, and JavaScript. Often websites will be built without the use of a Content Management System such as WordPress, meaning we will have to edit the actual HTML files for us to integrate the website. Sublime Text will allow us to add the FareHarbor API, stylesheet, and book buttons.

1. Click Here to visit the Sublime Text website. Find and click on the button “DOWNLOAD FOR MAC”.
2. Click on the .dmg builder at the bottom of the screen to begin installation.
3. Drag Sublime Text to your Applications folder.
4. Your computer will most likely ask if you sure you want to open the software since it is downloaded from the internet. Simply click ‘Open’.

You now have Sublime Text installed and can now start editing websites with HTML!

---

Using Sublime Text

A key component of using Sublime is understanding how to view and save HTML files. Start by opening up the Sublime Text Application. Open your HTML file using File -> New File to see a blank document.

The picture above shows the barebones tags needed to create a website. You can type this out or grab a template from this website.

If you are unfamiliar with what tags are and their symantec meaning, consider viewing this tutorial. The websites you will integrate will most certainly be more complicated than the one shown but if you can understand the basic HTML above, you will be able to integrate any website!

Next, save your file by going to File -> Save and saving the file at the destination of your choosing. Open the file from wherever you saved it. Congratulations, you created an HTML file!

If you would like to change the text displayed, go into the editor and change the <h1> tag.

Setting Sublime Text as the default HTML file editor

First, create an HTML file:

1. Open up Textedit on your computer
2. Click File > Save

3. Save As: “FareHarbor”

   Where: Desktop File Format: Web Page (.html)

Setting it as Default:

1. Right Click the HTML file on your desktop and click on Get Info.
2. Under the “Open With” section, click the dropdown selector and choose Sublime Text.
3. Click on Change All… and click continue.

Click here to watch a video.

Adding the API, Stylesheet, and Buttons

Adding the API

An API is an Application Programming Interface that allows for communication between different systems and databases. By placing the API within the HTML file, the website and FareHarbor’s software will be able to communicate. This will allow the website to access the software and for the button to trigger the FH lightframe booking overlay.

To start, go into the FH dashboard you wish to integrate and copy the text from the section show above. As the directions suggest, place what you copied right in front of the closing body tag </body>.

The <script> tag we copied tells the browser that JavaScript is being performed. The reason we place it at the closing <body> tag is because we want the page to render all of the static elements before running the JavaScript. This allows for optimal performance and is best practice when writing front-end code.

Adding the Stylesheet

Next you will need to add the stylesheet to the HTML file. Refer to the FH-Kit-Buttons stylesheet help doc to copy the provided <link> tag. Place the <link> tag right above the <head> tag.

This allows for the website to link to the FH style kit and gives us access to all of the various colors, shapes, sizes, and icons we can use with our buttons! Please refer to the Color Options section of the help page to understand how to add colors.

Adding a Button to Your Website

Our final step to integrate is to add a booking button. Go back into the FH dashboard, choose the specific flow or item you would like to use, go to the section shown above, click on Simple HTML, and copy the entire code snippet. Paste the snippet in an appropriate location within the <body> tags.

Lastly, add a class to the link element, so it displays as a button. Add the class="fh-button" attribute to your <a> tag. Make sure you hit save, refresh the website, the button should be present, and the website is now completely integrated!

Installing Cyberduck:

1. Go to https://cyberduck.io/ and scroll down and download it for your respective operating system.
2. Click Download and the application will automatically download a zip folder.
3. Open the zip folder and it should bring you to your downloads folder. Double-click on Cyberduck.
4. Click Open when asked if you are sure you want to open this application.

Opening the FTP Connection / Seeing if FTP login works

1. While in Cyberduck, click the Open Connection button on the top left and fill out the following: Server (which is the website URL), Username, and Password.
2. Click Connect.
3. It may give you a warning that it’s an “Unsecured FTP Connection”, but just click Continue.
4. If the login works, you should see files for that site.

Watch a video example.

Installing Text Expander

1. Go to https://textexpander.com/
2. Click on Download and the application will automatically download a zip folder
3. Open the zip folder and it should bring you to your downloads folder. Double click on TextExpander.
4. Click Open when it asks if you are sure you want to open this application.
5. Sign In using the login in the Shared-Support LastPass folder.

Close the window and as long as the symbol is on the top right of your screen, it will work.

Click Here to watch a video.

Using Text Expander

Text Expander is an application that allows users to save longer pieces of code into short snippets. This is a crucial time saving feature when completing integrations.

Common Examples:

Shortcut	Use	Output
fixy;	Creates a fixed book button that is placed on most websites	<a href="#" class="fh-button-flat fh-fixed--bottom fh-icon--arrow">Book Now</a>
api;	Creates the api needed for buttons to load and lightframe	<script src="https://fareharbor.com/embeds/api/v1/?autolightframe=yes"></script>
bss;	Creates the stylesheet necessary to load the fh button styles	<link rel="stylesheet" href="https://fh-kit.com/buttons/v2/?red=cc0000&orange=F29600&green=3AB134" type="text/css" media="screen" />
bn;	Creates ‘book now’ text	Book Now
fhb;	Creates the fareharbor button class with a calendar icon	class="fh-button fh-icon--cal"

Open the Text Expander program for the full list of shortcuts which have been added. Addtionally, you may create your own shortcut for code snippets which you find valuable.

Using the “Built With” Chrome extension, the “Content Management System” section will tell you what the website was built with. From here, you can follow this quick list of the top 20 websites that do/do not lightframe: Lightframe Cheatsheet.

Most content management systems will have the ability to lightframe, but it can take much more time and resources depending on what kind of coding is available, and the access we are allowed. The website must allow the custom code for the lightframe API, or it cannot lightframe.

The “Content Management System” section on the Built With extension does not always appear, and the list of websites above is not exhaustive. Please ask the integrator POC if you are unsure if a website should/should not lightframe.

Usually, mobile integrations will use the same integration as the desktop site, displayed for mobile formatting. In some cases, the mobile and desktop sites are separate integrations. Clients today will not generally set up a desktop site that isn’t mobile-friendly, but older websites that do not have mobile-friendly versions will need a separate, new mobile integration.

The best way to check a mobile site is to physically check on a mobile device. There is an option on the desktop site to right-click, choose “inspect,” and view the mobile version while still on the desktop; however, this is not always an accurate representation. If something looks incorrect in this view, you should always check on a mobile device.

This is dependent on the cache. Cache is a saved version of the website, used to make it load faster. In any case, always clear your browser cache and “hard refresh” (CMD + Shift + R) before trouble-shooting further. Unless the integrators can explicitly clear the cache of a website, they will generally need to wait to send to Onboarding for a check until it’s ready. Cache can live in lots of different places, so there are many reasons it can take hours or days for our new integration to show on the main website, explained below:

“Depending on where the cache is, and where it is caching, it can take time to upload our integration on all versions of the website. If the software is caching on the website itself, then the integrator can clear it immediately for the new upload. However, sometimes the server will cache on a content delivery network (CDN). CDNs are also used to speed up website loading, and only the most local network will update on your computer. Therefore, caching on multiple CDNs requires the wait.”

This most likely occurs on any GoDaddy host, Cloudfare sites, and some rare others. See How the Internet Works above.

Integrators hardly see two of the exact same language setups, so it all depends. Usually, websites require integrating one language at a time, but both happen. What language(s) are integrated all depends on the client or AE integration request. However, if there is previous software across the entire website, the team will need to remove all of it, across all languages, before starting integrations on specific languages. This can be tricky and time-consuming if it is not mentioned in the initial integration request. See Submitting an Integration Request.

The most reliable way to find previous software on a website is to click through every button on the front-end. When an integration request is submitted, integrators will either work from the front-end (what we see at face value) or use a “link crawler” for more complicated websites. How integrators check for previous software is dependent on the website setup.

Sometimes previous software will still be found within strips of the coding, even after a front-end search. This is usually due to styling elements. For example, the name of a button we switch to a FareHarbor link could physically be labeled “Xola Button.” This is not something integrators will focus on because it also requires additional coding access.

See Crawling the Website above for more information.

Click Here for a direct link to the PDF.