How to add a booking system to a Webflow service site with Elfsight

For a service business, the booking form is usually the checkout. Everything upstream of it (the pricing page, the testimonials, the answer to how much it costs) exists to get somebody to pick a time. If that step requires an email exchange, some people who were ready to book might simply won't.

Elfsight's booking widget closes that gap without a backend, which is genuinely the right trade for a plumber, a clinic or a consultancy. It also bills in a way that punishes the most obvious installation method.

In this guide, we cover the setup and the placement decision, which turns out to be a billing decision wearing a design costume.

What do you need to add Elfsight booking to Webflow?

You need an Elfsight account, a Webflow site on a plan that permits custom code, and a clear list of what you are actually selling by the slot. The last one is not a formality.

Here’s the full list for you before starting:

• An Elfsight account, on a paid tier if the widget will be seen by more than a couple of hundred people a month

• A Webflow site on a plan that allows custom code, since the widget installs through a Code Embed element

• A Google account if you want two-way calendar sync, which is what stops double bookings

• Your services written down with realistic durations, including whatever buffer you need between appointments

You need a paid Webflow plan because custom embeds aren't available on free plans.

What does Elfsight booking cost on a Webflow site?

Elfsight prices by widget views rather than by bookings taken, so the number that matters is how many people see the widget, not how many use it. That single fact should shape where you put it.

Here is what each tier includes, from Elfsight's pricing:

Two hundred views on the free plan is worth sitting with. That is not a small-business tier; it is a testing allowance: a booking widget on the homepage of a modestly busy service site can exhaust it in a couple of days, and the widget stops rendering rather than degrading politely.

The widgets column shows how many you can create, not how many allowances you get.

Now, with that understanding, let’s proceed to the setup.

5 steps to add a booking system to a Webflow service site

The build is a service list, a configured widget, a calendar connection, an embed, and a placement decision. Only one step is technical.

The order matters because the widget configuration is much easier when you already know what you are selling.

1. Write down your services and real durations

Do this before opening the editor. Elfsight supports slot lengths of 15, 30, 45 or 60 minutes, longer sessions such as 90 minutes, and fully custom durations per service, so the tool will accommodate almost anything you decide. The constraint is honesty, not software.

The number to get right includes everything that isn't the appointment: travel, setup, notes, the phone call afterward.

A sixty-minute consultation that actually takes ninety minutes produces a calendar that looks bookable and a week that does not work. The failure shows up as lateness rather than a scheduling error.

Note also that a visitor books one service per appointment, so a customer wanting two things must book twice. If your work is usually combined, model the combination as its own service with its own duration rather than expecting people to book back-to-back slots.

You finish this step with a written list you could hand to someone covering your diary.

2. Build and configure the widget

In the Elfsight editor, pick a booking layout, add the services from step 1, set your availability, and style it to match the site. This is all configuration rather than code, and the styling controls cover layout, colors, fonts and sizing.

Spend the time on availability rather than appearance. The default working week is rarely anybody's actual working week, and a widget offering slots you cannot honor is worse than one offering fewer slots, because every declined booking is a customer you already converted and then lost.

Set up the notification emails while you are here. Elfsight sends confirmations and reminders to both the customer and the business, and reminders are the cheapest way to reduce no-shows for a service business.

You finish this step with a widget you would be willing to take a real booking through.

3. Connect Google Calendar for two-way sync

Elfsight offers two-way Google Calendar sync, which blocks booked slots in real time and writes confirmed appointments into your calendar.

Be precise about what Elfsight documents here, because it is narrower than the phrase suggests. What is described is bookings taken through the widget: those slots are blocked in real time, and the confirmed appointment is written into your calendar. That closes the gap between two customers booking the same slot minutes apart.

Elfsight doesn't document the other direction: an appointment you created yourself in Google Calendar being read back and withdrawn from the widget's availability. Do not assume it.

Test it before you rely on it, because if it doesn't hold, your own commitments stay bookable and the widget will cheerfully sell a slot you are already in.

The flow is Settings, then Google Calendar under Integrations, then choosing an account, granting permissions and selecting which calendar to sync. Pick the one you actually live in rather than a clean work-only calendar.

Finish this step by making a test booking and confirming it lands in Google Calendar, then add an event yourself and check whether that slot disappears from the widget, which tells you which direction you can trust.

4. Embed the widget in Webflow

Elfsight generates a snippet after configuration. In the Designer, add a Code Embed element from the Add panel under Advanced, drop it where the booking form belongs, and paste the snippet in.

The snippet is a script tag plus a div carrying your widget's ID:

<!-- A Code Embed element on the booking page -->
<script src="https://static.elfsight.com/platform/platform.js" async></script>
<div
  class="elfsight-app-YOUR-WIDGET-ID"
  data-elfsight-app-lazy
></div>

You can also embed Elfsight widgets inside CMS collection templates, which is how a booking form appears on every service page without rebuilding it for each one. Be aware of what that does to your view count: a widget in a collection template renders on every item page, so a large collection multiplies views the same way a floating button does.

Publish the site before checking, since custom code takes effect on publish rather than in the Designer.

You finish this step with a working booking form on a live page.

5. Choose placement deliberately

Now decide where the widget lives, knowing that placement drives both conversion and cost.

A dedicated booking page is the cheapest and usually converts fine, because people who arrive there have already decided. A widget on the pricing or services page catches the moment of intent and costs more views.

A floating button on every page is the most visible and the most expensive by a wide margin, since it counts a view for every page of every session.

The reasonable middle for most service businesses is a booking page plus a prominent link from the pages where people decide, which gets most of the conversion benefit at a fraction of the view cost.

If you do want the floating button, price the tier against your actual monthly page views first rather than assuming the widget's view count resembles your booking count. Elfsight sells Enterprise tiers above Premium for exactly this case, so high traffic is not a wall, just a bigger number than most service businesses expect.

You finish this step with a placement you could justify on both grounds.

What causes Elfsight booking widgets to fail on Webflow?

Booking widgets fail quietly on the visitor side, which is expensive: a form that doesn't render loses customers who never contact you to complain. Nothing errors, and the page looks intact.

Four cover nearly all of it, and the first two are the ones worth checking on a schedule rather than reactively.

The widget does not appear on the published site

Cause: Usually custom code being unavailable on the site's plan, or the site not having been published since the embed was added. Webflow applies custom code on publish rather than in the Designer, so a widget can look absent even when it's perfectly configured.

Fix: Publish, then check the live URL. Preview mode renders custom code effects, so a widget missing in both is a different problem from one that previews and then vanishes on the live domain.

If it is still missing, confirm the site plan permits custom code, then open the browser console: a blocked or failed script request tells you the problem is delivery rather than markup. Check with content blockers disabled too, since third-party widget scripts are a common target and a blocked booking form is invisible to you and to a subset of your visitors.

The widget stops rendering partway through the month

Cause: The view allowance is exhausted. This failure mode follows directly from placement: a sitewide widget burns views at the rate of your total traffic rather than your booking-page traffic.

Fix: Check the view count in your Elfsight account against the tier limits, then either move the widget off pages where it is merely present rather than useful, or move up a tier.

Treat a mid-month disappearance as a signal about placement, not just a billing problem, because the tier you need depends on where the widget sits, not how busy your business is.

You should not be surprised by this one. Elfsight sends email warnings before deactivation, shows a Views Forecast that flags when you are on track to run out early, and displays a message in place of the widget that only you, as the owner, can see.

Visitors just see nothing, which is why the forecast is worth checking rather than waiting for the gap to be reported to you.

One setup detail saves a surprising amount of the allowance: stay signed in to Elfsight in the browser you build the site in, since that stops your own page loads from being counted while you work.

Two customers book the same slot

Cause: Calendar sync is one-way or was never connected, so the widget knows about bookings it took and nothing else. Anything added directly to your calendar remains bookable by a customer.

Fix: Enable two-way sync, then confirm it reads and writes by creating an event in Google Calendar and checking that the slot disappears from the widget. Do that test rather than trusting the connection status, since a connected calendar and a calendar that is being read are not the same thing.

Then make sure the connected calendar carries your real commitments, not a tidy work-only calendar that omits half of what actually occupies your week. Most double bookings traced back this far turn out to be a sync that works perfectly against an incomplete picture of your time.

Customers book times you cannot work

Cause: Availability configured optimistically or durations that exclude travel, setup and write-up. The widget honors what you told it, and what most people tell it is their best week rather than their normal one.

Fix: Rebuild the durations to include everything the appointment actually consumes, and add buffers between slots rather than trusting yourself to run to time.

If bookings arrive at the edges of your day, tighten the availability window rather than declining them individually, since each decline costs a customer you had already won and is more damaging than the slot was worth.

Worth revisiting after the first busy month, because the durations that felt right on paper are rarely the ones the work turns out to need.

What you can build next with Elfsight and Webflow

Once bookings arrive reliably, the next additions usually focus on what happens around the appointment: prepayment or deposits to reduce no-shows, an intake form so you arrive prepared, or booking widgets on individual service pages driven from a CMS collection.

If you want the confirmation to do more than land in an inbox, our lead notification guide covers routing a submission into a channel your team actually watches. For the connection details and what the widgets cover, see the Webflow and Elfsight integration.