Businesses using Hopoti can easily market their available lessons by adding a ready-made IFRAME embed or custom buttons to their website.
With the IFRAME element, you can define the date range and language of the lessons shown, as well as change the size of the element easily. Alternatively, you can use custom buttons to seamlessly direct visitors to your Hopoti page: choose between a simple button featuring the Hopoti logo, or a more visual button designed to catch your customers' attention.
You can find the codes and specifications for the embed and the buttons below.
Embed Your Booking Calendar Directly Into Your Website
Code
<iframe src="https://hopoti.com/en/stable/BUSINESS/embed/opencourses?days=7&lang=en&height=300" allowtransparency="true" frameborder="0" scrolling="no" style="height:300px;width:100%;border: 0px none transparent;"></iframe>
Definitions
BUSINESS
Enter your stable's Hopoti page name from your URL here. For example, if your URL is https://hopoti.com/stable/HopotiStable replace the text BUSINESS in the code with HopotiStable
days=7
Select the number of days with available lessons in the future to be displayed
lang=en
The element currently supports language versions english and finnish.
height=300
The height of the element in pixels. The same value must be entered below (recommended minimum 250px)
height:300px
The height of the element in pixels. The same value must be entered above (recommended minimum 250px)
width:100%
The width of the element in pixels or percentage depending on the location of the element on the website (a width of 100% should scale the element with the reserved space successfully)
Add a “Book Lesson” Button to Your Website
This is a clean and simple button featuring the Hopoti logo, perfect for placing anywhere on your site.
Code
<a href="<ADD YOUR HOPOTI URL HERE>" target="_blank" rel="noopener"> <img src="https://hopoti.com/ui-images/snippets/hopoti-book-lessons.png" alt="Visit Hopoti" style="display:block;max-width:100%;height:auto;border:0;" /> </a>
(Remember to replace <ADD HERE HOPOTI URL YOUR> with the direct link to your Hopoti page.)
Visual Button
This button has a more visual and prominent design, including an image and a clear call to action, to easily grab the attention of your website visitors.
Code
<a href="<ADD YOUR HOPOTI URL HERE>" target="_blank" rel="noopener" style="display:inline-block;width: auto;height:auto;max-width:600px;border:0;"> <img src="https://hopoti.com/ui-images/email/huso-1-600.jpg" alt="Visit Hopoti" style="display:block;max-width:100%;height:auto;border:0;border-top-left-radius:15px;border-top-right-radius:15px;" /> <span style="display:inline-flex;width:100%;align-items:center;gap:15px;background:#066b93;border-bottom-left-radius:15px;border-bottom-right-radius:15px;"> <img src="https://hopoti.com/ui-images/email/hopoti-logo-email.png" alt="Hopoti logo" style="display:block;max-width:150px;height:auto;margin:10px;" /> <span style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;line-height:1;">Book our lessons from <u>hopoti.com</u> </span> </span> </a>
(Remember to replace <ADD HERE HOPOTI URL YOUR> with the direct link to your Hopoti page.)