HyoNovaDocumentation

Website booking widget

Put the HyoNova booking form on your own website — in the page or behind a button — with the copy-and-paste code, the allowed websites list and what the widget shares.

BetaWorks today in early-access workspaces. Behaviour and limits may still change.GuideFor: Owners, Admins, Managers, IT & security, DevelopersLast updated: Introduced:
On this page

The website widget shows your booking form inside your own website, so visitors book without leaving it. It is the same form as the booking page, with the same rules: no account, one booking per time, and a private link for the visitor. The widget renders only on the websites you allow.

Turn the widget on#

  1. Open the settings. Go to Bookings › Page & widget.
  2. Turn on Website widget is on. "The booking form can be embedded in the websites listed below."
  3. Add your website. Under Websites that may show the widget, enter a domain such as example.com or *.example.com and choose Add website. See Allowed websites.
  4. Choose the layout. Widget layout is In the page or Button that opens it.
  5. Save, then copy the code from Share and embed.

Copy the code#

Under Share and embed, choose the Service (All services or one booking type), the Language, the Widget layout and, for the button, the Button text. Then copy Website code (JavaScript) and paste it into your website's HTML where the form or the button should appear.

Always copy the real code from HyoNova: it contains the correct booking address and your company's address name. The examples below show its shape.

In the page#

The form appears where you paste the code, up to 760 pixels wide and centred, and grows and shrinks with its content.

html
<script async src="https://YOUR_HYONOVA_BOOKING_ADDRESS/book/widget.js" data-company="your-company" data-type="intro-call" data-mode="inline" data-color="#2f6bff"></script>

Button that opens it#

A button appears where you paste the code. Selecting it opens the form in a dialog over your page.

html
<script async src="https://YOUR_HYONOVA_BOOKING_ADDRESS/book/widget.js" data-company="your-company" data-mode="button" data-color="#2f6bff" data-label="Book an appointment"></script>

What the attributes mean#

AttributeMeaning
srcThe widget script at HyoNova's booking address
data-companyYour company's address name, as in your booking link
data-typeOptional. The Link name of one booking type. Without it, the visitor chooses from all published services
data-modeinline for the form in the page, button for a button that opens it
data-langOptional. en or ar. Without it, the form follows the language of your page, then your booking settings
data-colorThe accent colour, as a six-digit hex colour
data-labelButton mode only. The button text; empty uses "Book an appointment"
data-targetOptional, in-page mode only. A CSS selector of the element that should hold the form, instead of the place of the script tag

The code contains no key and no secret: the company and type names are public, like your booking link. What protects the widget is the allowed websites list.

Good to know:

  • The script loads async, so it does not slow your page down.
  • The form runs in its own frame on HyoNova's booking address. Your site's styles and scripts do not reach it, and it does not read anything from your page.
  • If your website uses a Content Security Policy, allow HyoNova's booking address in script-src and frame-src.
  • Website builders usually have a place for "custom code" or an "HTML block". Paste the code there.
  • The widget cannot be previewed inside HyoNova. Open your own page to see it.

Frame code (iframe)#

Share and embed also offers Frame code (iframe): a plain frame with a fixed height, for site builders that accept a frame but no script. Prefer the JavaScript code: only it adjusts the height of the form to its content and can open the form from a button. Both codes work on your allowed websites only, and a booking made through either is checked against that list.

Allowed websites#

"The widget loads only on these websites. The booking page itself needs no entry here." You can list up to 50 entries.

EntryMatchesDoes not match
example.comhttps://example.comhttps://www.example.com, https://shop.example.com
www.example.comhttps://www.example.comhttps://example.com
*.example.comhttps://www.example.com, https://shop.example.comhttps://example.com itself
  • Add both example.com and *.example.com if the widget should run on the main domain and on its subdomains.
  • HTTPS only. Pages served over plain http:// cannot show the widget.
  • An empty list allows no website. HyoNova then reads: The widget renders only on allowed websites, and none is listed yet. Add your website above. Your booking links keep working.

HyoNova checks the website twice. The browser refuses to show the form in a frame on a website that is not on your list, and when a booking is made, HyoNova checks again that it comes from an allowed website. The form learns which website embeds it from the browser, not from anything the page says.

On a website that is not allowed, the form does not appear: an in-page widget folds away instead of leaving an empty block, and a booking attempt is refused with Booking is not available from this site.

Turning the widget off#

Turn Website widget is on off to stop the widget on every website at once. The code on your website then shows nothing, and Share and embed reads: The website widget is switched off, so the code shows nothing on a website yet. Your booking page and its links are not affected; they have their own switch, Booking page is on.

Bookings from the widget#

A booking made through the widget is a normal booking. In the Bookings list its Booked through column reads Website widget, and the visitor gets the same private link.

Privacy#

  • What the widget shares with your page: only the height of the form, so the frame fits. Nothing the visitor types is visible to your website's scripts.
  • What HyoNova receives: the booking the visitor makes, and the address of the website that embeds the widget, so it can be checked against your list.
  • No sign-in. Visitors do not sign in to book.
  • Mention online booking in your website's privacy notice. See Privacy.

Status#

FeatureStatusNotes
Website booking widgetBetaWorks today in early-access workspaces. Behaviour and limits may still change.The booking form inside your own website, in the page or behind a button, only on the websites you allow.
Public booking page and private linkBetaWorks today in early-access workspaces. Behaviour and limits may still change.A hosted page where visitors choose a service and a time, and a private link to view, move or cancel their booking.

Calendar & Bookings

Let customers and visitors book time with your team — booking types, member availability, a public booking page, a website widget and bookings in the work calendar.

The booking page and the visitor's private link

Share your company's public booking page, see what a visitor does on it, and how the private link lets them view, move or cancel a booking without an account.

Booking types and availability

Create the services visitors can book — duration, gaps, minimum notice, place, hosts and places per time — and set each member's weekly hours and dated exceptions.

Website chat widget

Add HyoNova Support chat to your website — what visitors see, the widget editor, drafts and versions, page rules, help articles, allowed domains, the install snippet and privacy.

Privacy in HyoNova

What colleagues can see and hear in HyoNova, the controls you have over presence, voice, camera and microphone, and what stays on your own device.

↑↓ to navigate · Enter to open · Esc to close