Skip to main content

Installing the Appointment Booking Widget

In this article we go through installing the booking widget with a custom button.

Written by Brett Lang

Opens the booking flow in a fullscreen takeover when a customer clicks a button on your site. You decide where the button goes and what it looks like.
​
​1. Grab your HTML Snippet code
​
In your Ikeono portal navigate to Appointments>Booking Page and grab your snippet in the top right corner.
​


​2. Add the snippet to your site
​

Paste this anywhere on the page — just before </head> or at the end of <body> both work. Put it in your shared layout or template so it loads on every page that needs a booking button.


​3. Add a button to launch it

Call ikeonoAppointments('open') from any element on the page. A plain button is the simplest version:
​

HTML

<button onclick="ikeonoAppointments('open')">Book an appointment</button>


Style it however you like — the widget doesn't care what the trigger looks like, and it applies no styling of its own to your page. A text link works the same way:


​HTML

<a href="#" onclick="ikeonoAppointments('open'); return false;">   Book an appointment </a>


​Live example:

This site runs the same snippet. The button beside this text calls ikeonoAppointments('open') and nothing else.
​

Book an appointment

You can add as many triggers as you want across your site — a button in the header, a link in the footer, a CTA at the bottom of a product page. They all open the same widget.
​

Command reference

Three commands, all called the same way:

  • ikeonoAppointments('init', { widgetToken })

    Required once, before any other command. Identifies which shop the widget books for.

  • ikeonoAppointments('open')

    Opens the booking app in a fullscreen iframe takeover.

  • ikeonoAppointments('close')

    Closes the takeover programmatically. Customers can also close it with the X button or the Escape key.

Good to know

  • Commands are safe to call early. If a customer clicks your button before the widget finishes downloading, the command queues and runs as soon as it's ready. You don't need to wait for a load event or disable your button.

  • Closing hides, it doesn't reset. Reopening the widget resumes the booking where the customer left off, so an accidental close doesn't cost them their progress.

  • The widget is isolated. Booking runs inside an iframe, so its styles and scripts can't collide with your site's — and your CSS can't accidentally break the booking flow.

  • Call init once. Repeating the snippet on a single page isn't necessary; one setup per page load is enough for any number of triggers.

  • It coexists with the webchat widget. This widget uses window.ikeonoAppointments and the webchat widget uses window.ikeono, so you can install both on the same site.

Related Articles
Did this answer your question?