Send visitors from your own website straight to booking. Show your available lessons in a box on your website, or add a button that opens your Hopoti page. You need to be able to add HTML code to your website.
Before you start
Find your Hopoti page link: select Client pages at the top of the admin menu and copy the address from your browser, for example https://hopoti.com/stable/HopotiHorizonStables. The last part, here HopotiHorizonStables, is your Hopoti page name.
Show your available lessons on your website
Copy the code below.
Replace BUSINESS with your Hopoti page name, for example HopotiHorizonStables.
Change the settings in the code if you want (see the list below).
Paste the code into your website where the lessons should show, in a place that accepts HTML code, and publish the page.
Your website now shows your available lessons for the number of days you chose.
<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>
You can change these settings in the code:
days=7: how many days ahead the box shows available lessons.
lang=en: the language of the box, en for English or fi for Finnish.
height=300 and height:300px: the height of the box in pixels. Use the same number in both places, at least 250.
width:100%: the width of the box in pixels or as a percentage. 100% fits the box to the space on your page.
Add a booking button
A booking button opens your Hopoti page in a new tab, where visitors can book. Choose the simple button with the Hopoti logo or the larger visual button with a photo.
Copy the code of the button you want.
Replace YOUR-HOPOTI-PAGE-LINK with your Hopoti page link, for example https://hopoti.com/stable/HopotiHorizonStables.
Paste the code into your website and publish the page.
The button now shows on your website and opens your Hopoti page.
Simple button
A button with the Hopoti logo that fits anywhere on your website.
<a href="YOUR-HOPOTI-PAGE-LINK" 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>
Visual button
A larger button, up to 600 pixels wide, with a photo and the text Book our lessons from hopoti.com.
<a href="YOUR-HOPOTI-PAGE-LINK" 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>
If the box or button doesn't work
Check these in order:
The box is empty or shows an error: check that you replaced BUSINESS with your Hopoti page name, spelt exactly as in your page link.
The box shows no lessons: there are no available lessons in the days you chose. Increase days.
The box is cut off: use the same height in both places, at least 250.
The button opens the wrong page: check that you replaced YOUR-HOPOTI-PAGE-LINK with your full Hopoti page link, starting with https://.
It worked before but has stopped: if your business name has changed, your Hopoti page link changed with it and old links stop working. Update the codes with your new page name and link, or message our team to set your old link back. See Update your business details, time zone and currency.
Still stuck? Message our team in the chat with your website address, your Hopoti page link and the code you pasted.