Embed Booking Widget

Add the booking widget to your website. Choose from popup, inline, or iframe options.

Where to find your widget key

Log in to your dashboard and go to Settings > Widget. Your unique widget key is displayed at the top. Each embed method uses this key to connect to your account.

Recommended

Option 1: Popup Button

Adds a floating "Book Now" button to the corner of your website. When clicked, it opens the booking form as a full-screen overlay. This is the least intrusive option and works on every page.

HTML

<!-- Booking Widget (Popup) -->
<script>
  (function(w,d,s,o,f,js,fjs){
    w['BookingWidget']=o;w[o]=w[o]||function(){
      (w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
    js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
  }(window,document,'script','bw',
    'https://booking.homora.fi/widget.js'));

  bw('init', {
    key: 'YOUR_WIDGET_KEY',
    position: 'bottom-right',
    buttonText: 'Book Now'
  });
</script>

Configuration options

keyrequiredYour widget key from Settings > Widget

positionButton position: 'bottom-right' (default), 'bottom-left'

buttonTextText on the button (default: 'Book Now')

theme'auto' (matches user's system), 'light', or 'dark'

Option 2: Inline Embed

Renders the booking form directly inside a container element on your page. Great for dedicated booking pages where you want the form to be part of the page content.

HTML

<!-- Booking Widget (Inline) -->
<div id="booking-widget"></div>
<script>
  (function(w,d,s,o,f,js,fjs){
    w['BookingWidget']=o;w[o]=w[o]||function(){
      (w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
    js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
  }(window,document,'script','bw',
    'https://booking.homora.fi/widget.js'));

  bw('init', {
    key: 'YOUR_WIDGET_KEY',
    floatingButton: false,
    inline: true,
    target: 'booking-widget'
  });
</script>

Configuration options

keyrequiredYour widget key

floatingButtonSet to false to disable the floating button

inlineSet to true to render inline

targetThe ID of the HTML element where the form will render

Option 3: iFrame

The simplest option. Just paste the iframe tag wherever you want the booking form. Works with any website builder including WordPress, Wix, Squarespace, etc.

HTML

<!-- Booking Form (iframe) -->
<iframe
  src="https://booking.homora.fi/book/YOUR-SLUG?embed=1"
  style="width:100%;height:700px;border:none;border-radius:12px;"
  allow="camera;microphone"
></iframe>

Replace YOUR-SLUG with your business slug (the part after /book/ in your booking page URL).

Website Builder Instructions

WordPress

Go to Appearance > Theme Editor (or use a page builder)
For the popup button: paste the script in your theme's footer.php before the closing </body> tag
For the iframe: add a Custom HTML block on any page and paste the iframe code
For the inline embed: add a Custom HTML block with both the div and script

Wix

Go to Settings > Custom Code
Click "Add Code" and paste the popup script
Set placement to "Body - end"
For iframe: use the "Embed HTML" element on any page

Squarespace

Go to Settings > Advanced > Code Injection
Paste the popup script in the Footer section
For iframe: add a Code Block on any page and paste the iframe code

Any HTML Website

Open your HTML file
Paste the popup script before the closing </body> tag
For inline: place the div where you want the form, and the script before </body>

Troubleshooting

The widget is not showing up

Check that your widget key is correct (Settings > Widget). Make sure the script is loaded on the page (check browser console for errors). The script must be placed inside the <body> tag.

The booking form is cut off in the iframe

Increase the height value in the iframe style. 700px works for most cases, but longer service lists may need 900px or more.

Styles look wrong or broken

The widget loads its own styles and should not conflict with your site. If you see issues, check if your site's CSS has global rules that might override iframe or widget styles.

Customers see 'Widget not found' error

The widget key may be invalid. Go to Settings > Widget and re-copy the key. Make sure there are no extra spaces.

Need help? Contact us at support@homora.fi