Booking widget

The booking widget is the fastest way to take Fiko bookings on your own website. Customers pick a service, staff member, day and time, enter their details and get a confirmation code, a manage link and an "add to calendar" button. The booking lands in the Fiko calendar and inbox like any other, and runs your workflows and reminders.

It works on any site that lets you add HTML: Wix, Webflow, Squarespace, Shopify, Framer, plain HTML, React, Next.js and Vue. The script is small, has no dependencies and loads the booking form in an isolated frame, so your site's CSS cannot break it and it cannot touch your page.

Before you start

1. In Fiko, set up your services and working hours under Booking.
2. Open Settings → API & Developers → Website booking & webhooks and create a key. Add the domains of the websites that will show the widget, for example example.com and *.example.com.
3. Choose how bookings are confirmed: Request (you approve each booking) or Instant confirmation.

The tab gives you the code below with your key filled in, and a live preview.

Booking form in the page

Put an empty element where the form should appear and add the script once, anywhere on the page:

<div data-fiko-booking></div>
<script src="https://app.fiko.net/booking-widget.js" data-key="pk_live_..." async></script>

The form fills the width of its container and grows and shrinks with its content, so there is no inner scrollbar.

Button that opens a popup

Any element with data-fiko-booking-button opens booking in a popup. Style the button however you like:

<button data-fiko-booking-button>Book now</button>
<script src="https://app.fiko.net/booking-widget.js" data-key="pk_live_..." async></script>

Options set on the button (see below) apply to that button only, so one page can have a "Book a haircut" button that opens straight to that service and a general "Book" button.

Floating button

A round "Book now" button fixed to the bottom corner of every page:

<script src="https://app.fiko.net/booking-widget.js" data-key="pk_live_..."
  data-floating="true" data-label="Book now" data-position="right" async></script>

data-position can be right (default) or left. The button uses data-color when it is set.

Hosted booking link

No website? Share a link to a booking page Fiko hosts for you, for your Instagram bio, Google Business profile, emails, QR codes or ads:

https://app.fiko.net/book/pk_live_...
https://app.fiko.net/book/pk_live_...?lang=tr&service=<service id>

The link accepts the same options as query parameters (lang, service, services, color, theme, title, subtitle, prices, staff).

Options

Set options as data- attributes on the script tag (they apply to every form on the page) or on a single data-fiko-booking element or button (they apply to that one only).

Service ids are listed by the Booking API and shown in the Booking dashboard.

JavaScript API

After the script loads, window.FikoBooking is available:

// Open the popup from your own code, optionally with options
FikoBooking.open();
FikoBooking.open({ service: "3f2a...", lang: "ar" });

// Close it
FikoBooking.close();

// Mount an inline form into an element added later (single-page apps)
FikoBooking.mount("#booking", { service: "3f2a...", color: "#0F766E" });

// Listen to events
FikoBooking.on("booked", (reservation) => {
  console.log(reservation.confirmation_code, reservation.status);
});

Inline elements added to the page later are picked up automatically, so in most single-page apps you only need the markup.

Events

Each event is also sent as a browser event named fiko:<event>:

window.addEventListener("fiko:booked", (e) => {
  // e.detail is the reservation
});

The booked data never includes the customer's phone or email. Read them on your server with the secret key or receive them in a webhook.

Conversion tracking

When a booking is made, the widget reports it to the analytics tools already on your page. Nothing to set up:

In Google Tag Manager, create a Custom Event trigger for fiko_booking to fire Google Ads or other conversion tags.

React and Next.js

Load the script once, then use the markup or the JavaScript API:

"use client";
import Script from "next/script";

export function Booking() {
  return (
    <>
      <div data-fiko-booking data-service="3f2a..." />
      <Script src="https://app.fiko.net/booking-widget.js" data-key="pk_live_..." strategy="lazyOnload" />
    </>
  );
}

Without Next.js, add the script tag to index.html, or create it in a useEffect.

Wix, Webflow, Shopify, Squarespace

• Wix: Add → Embed Code → Embed HTML and paste the inline code.
• Webflow: drop an Embed element where the form should go.
• Shopify: Online Store → Themes → Customize → Add section → Custom Liquid.
• Squarespace: add a Code block.

What customers get

• An on-screen confirmation code, a .ics calendar file and an "Add to Google Calendar" link.
• An email in their language when they leave an email address (you can make email required on the key), with a link to view or cancel the booking. Customers can cancel online until the cancellation deadline you set in Booking → Settings.
• In Request mode the booking is pending until you approve it in Fiko; customers are told so and get an email when it is confirmed.

Content Security Policy

If your site sends a Content-Security-Policy header, allow:

script-src https://app.fiko.net;
frame-src https://app.fiko.net;

Troubleshooting

Questions or something missing? Write to support@fiko.net.