FareHarbor Custom Embed Generator

The custom embed generator is an application used to create HTML code blocks for presenting tour listings on your website. It serves a similar purpose as item embed grids generated from flows in the Dashboard, although allows for custom links that open in a Lightframe. This means we can present listings from more than one Dashboard. This is especially useful for affiliate companies, who resell items from multiple companies.

Click here to access the embed generator.

Input forms

Each panel is generated from a unique form. Each form has the following fields to change the functionality and presentation of the produced embed.

• Tour Title
• Tour Subtitle
• Image URL
• Booking URL
• Panel Width
• Button Text

Begin by using the Add button to generate the desired number of panels the embed will have. The first form will correspond to the first panel, the second form to the second panel and so on. Copy and paste the desired values into each field.

Booking URL

This is the booking link produced in the Book Buttons and Embeds section of the Dashboard. For affiliate companies, ensure you add the correct affiliate tags.

Image URL

Instead of uploading an image directly into the embed generator, the application uses links to set the backgrounds of each panel. In order to obtain the link, the image will have to already exist in your Dashboard.

To obtain an image URL, go to the Listing section for an item, click Photos, right click on the desired photo and click Copy Image Address. Paste this link into the Image URL field in the form.

Changing Panel Size

To customize panel width, select the desired values in the form under panel width. To avoid white space in the embed, it is important that the panel widths in each row fill the full row. Check the Embed Preview to make sure there is no white space.

Changing Panel Order

The order of panels can be changed after they have been generated by using the Shift Left and Shift Right buttons on each form. Click these buttons to swap the panel to the left or right of its current position.

Additional Customization

The generator allows you to further customize the look and feel of your embed. To view additional customization options click the Customize button. Here you can change the button color, button roundness, panel roundness, and size of the title and subtitle independently. Be aware that on smaller screen sizes, larger buttons or text may overlap.

Output Code

The embed is output as an HTML code block that can be pasted into a code editor to produce the embed. Be aware that copying and pasting the code into an email or incompatible text editor can break the code. For this reason, it is advisable to download the output as a .txt file. This file can then be sent directly to your web developer for implementation, or to your account manager if you’ve already provided FareHarbor with the login credentials for your website.

Editing the output code

If you are making several changes to the embeds, it’s best practice to start from scratch in the embed generator. If you need to make quick changes like swapping out one item for another, changing button color, etc., please refer to this document for more information. You can also reach out to your Account Manager with any questions.

Internal-only content. Don't copy and paste to anyone.

This was originally an internal page that was moved to this client-facing page. The only difference being that “the client” or “the client’s” were replaced with “you” or “your”.

For example:

The embed is output in an HTML code block. This entire block can be pasted into a code editor to produce the embed. Be aware that copy and pasting the code into an email or incompatible text editor can break the code. For this reason, it is advisable to download the output as an .txt file. This file can then be sent directly to the client.

was replaced with:

The embed is output in an HTML code block. This entire block can be pasted into a code editor to produce the embed. Be aware that copying and pasting the code into an email or incompatible text editor can break the code. For this reason, it is advisable to download the output as a .txt file. This file can then be sent directly to your web developer for implementation, or to your account manager if you’ve already provided FareHarbor with the login credentials for your website.