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.