Mock Integrations
Last updated: October 9, 2025
For some demos, the integration team can create mock integrations, which allow prospective clients to see what the front end booking process would look like on their own website. With a demo dashboard an AE has created, the integration team will integrate FareHarbor onto a mock version of the company’s own website.
When to request a mock integration
A mock integration should never be used as a sales crutch. Some of our biggest accounts were closed without a mock integration! Before submitting, ask yourself: -Do I need this to close this company? -Can I use an example company, live on FH, to show our front-end? -Is this account worth our integration team’s time?
This is best reserved for Tier 3 and 4’s with large revenue opportunity.
What’s required
In order to request a mock integration, you must have a completed demo dashboard.
A sloppy demo dashboard makes FareHarbor look sloppy, so make sure to be thorough before putting in your request.
You should also provide detailed integration notes in the Sales Demo Website Request Form (listed below) so the integration team knows what you would like to show the client.
Submission Form
To submit a mock integration request, complete the Mock Integration Request Form below.
Please allow two days lead time for mock integrations to be completed. The Integrations Team will often complete the request same day, but there may delays or other priorities.
If you have a priority request, please use the ‘Submit an Escalation’ workflow in the #website-integrations room.
Mock Integration Tutorial
This tutorial is for creating demo websites for use by the Sales Team to demo prospective clients on what the front end booking process could look like for their company. This walkthrough assume the demo dashboard has already been built out as well as a mild proficiency with HTML and file management.
- Log into FH Demos server & create a new folder under
public_htmldirectory with the shortname of the demo dashboard as the folder title. Create anindex.htmlfile within the folder. Click Here to instructions on how to access and FTP server and edit HTML files.
Example: If you’re demoing a client who’s website is americantourco.com, you would create a folder named
americantourcowhich should also correspond to the company’s short name. In this folder, create a file namedindex.html.
There’s no restriction for permissions on the fhdemos.com server so anyone can make any edits. Do NOT delete anything unless you are absolutely certain.
- Visit the web page you would like to copy and right click. Select View Page Source. Press CMD+A to copy all of the code. Once you have the code copied, paste it into the
index.htmlfile previously created. - Create a
<base>element at the top of the page, right after the opening<html>tag with thehrefproperty which links to the base domain of the site you ripped off.
Example:
<base href="http://websiteyoucopied.com">
- Add the button stylesheet and API to the page. Be sure to use the demo API link for dashboards on the demo server:
<script src="https://demo.fareharbor.com/embeds/api/v1/?autolightframe=yes"></script> - Generate booking links from the demo dashboard. The only additional step required is for dashboards in demo mode. In order for your links & embeds to work, you must include the preview query within your link which can be found in the settings section of the dashboard.
Keep in mind that the preview query only needs to be added to dashboards in Demo mode. Dashboards on the demo server, but not in demo mode, do not need the preview query.
Example: If your normal booking link looks like
https://demo.fareharbor.com/embeds/book/demodashboard/?full-items=yesand the dashboard is in demo mode, you need to add the preview query. Copy the demo link which should be something likehttps://demo.fareharbor.com/aspenwhitewater/?preview=d44a2c. Take thepreview=portion of at the end of the link and append it to your booking link. You may need to change the?to an&which would give you a link that looks like this:https://demo.fareharbor.com/embeds/book/demodashboard/?full-items=yes&preview=d44a2c
- Add your links & embeds to the demo web page. Don’t be afraid to remove irrelevant content from the website.
- Add this script to the bottom of the page to prevent accidental navigation away from the demo website.
<script> jQuery(document).ready(function($){ $('a[href*="fareharbor"]').addClass('canClick'); $('a:not(.canClick)').click(function(event){ event.stopPropagation(); event.preventDefault(); }); }); </script>
- Remove any tracking scripts that you see on the site. This will prevent us from accidentally populating their analytics with invalid data. (Google Analytics, Facebook, Google Tag Manager, etc)
When complete, post in #website-ntegrations, tagging the submitter and including a links to the demo using http://fhdemos.com/yourdirectory.
Troubleshooting
Problem: There a lots of white boxes where there were icons present on the website.
Solution: This is due to the icon library not loading on an unauthorized domain. There isn’t a way to get the icons to show, but you can hide them. If the icons are in an i element, you can just target all i elements and hide them with CSS. If the icons are pseudo elements you can also hide those.
Example:
i, li:after {display: none !important;}
Problem: The site is generated via javascript and the content isn’t visible when you copy the page source.
Solution: Instead of copying the page source to generate the content for your file, open the inspector tool and select the main html element. Right click this element and select “Copy Element” and paste the code into the file. This will copy all of the generated HTML which should hopefully render into a working web page. If this doesn’t work, we likely cannot copy the site.
Mock Integration Process
Here is the process for requesting and completing Mock Integrations:
- AE/SM fills out mock integration form – https://fareharbor.com/submit/mock-integration-request-form/
- Form links to slack channel and displays request (also on the airtable base)
- Member of integration team claims the mock integration in airtable and replies on slack post with a check emoji or something like that. (Setting a Slack reminder for the day before the demo is great idea.)
- After completing the mock integration by the designated date/time, post to the request that it’s been completed in the #website-integrations room and mark complete in airtable.
- Create a note on the lead in Close and paste the demo URL’s in the note.