How to build booking flows for service companies in Webflow using Elfsight widgets | Webflow blog

Elfsight widgets are loaded from Elfsight’s servers via JavaScript and displayed in your Webflow site. Configuration is done in the Elfsight dashboard, while placement and publishing take place in Webflow.

What Elfsight booking widgets can and cannot do

Before you implement it, you should understand the technical limits of this integration.

Features of Elfsight Booking Widget:

• Service configuration with configurable runtimes in fixed time intervals, prices (fixed price, starting price, free or hidden) and descriptions
• Weekly schedule and exception management for availability, with time zone configuration for multi-location support
• Synchronization with Google Calendar to avoid double bookings by matching widget availability to your connected calendar
• Email notifications to business owners and confirmation emails to customers
• Visual customization via color palette, fonts, images and industry-specific templates
• Advanced styling via custom CSS editors

Critical Limitations:

• No publicly documented API access for extracting booking data
• No officially supported webhooks for event booking (webhook support in the docs is limited to the Form Builder widget; the Booking Widget currently has no publicly documented webhook support)
• No built-in SMS notifications in the documented feature set (if you need SMS, you typically combine email output with a third-party provider like Twilio through an automation platform)
• No documented data export functionality (CSV/JSON)
• No documented native integration between event calendar and booking widgets

If your implementation requires programmatic access to booking data, event booking webhooks, or automation triggers, Elfsight Booking Widget may not be suitable. Consider alternatives such as Calendly, Focus planningor Square appointments which provide extensive APIs and webhook functionality for booking automation.

For detailed job specifications, see the Elfsight Appointment Booking Widget documentation.

Overview of system architecture

The integration relies on client-side JavaScript execution. Elfsight loads a script from its CDN that detects widget containers in the DOM and displays the widgets within specified elements. Webflow acts as the delivery platform and hosts the HTML, CSS and embedded Elfsight script code.

Data flow order:

1. User visits published Webflow site
2. Script tag in head section loads Elfsight’s script from their CDN
3. Script identifies widget containers in DOM and retrieves configuration from Elfsight servers
4. Widget appears in the user’s browser
5. Booking submissions trigger email notifications through Elfsight’s service
6. The Google Calendar integration synchronizes availability to prevent double bookings

Custom webflow code embedding methods

Webflow offers three primary methods for this embed third-party widgets such as Elfsight, each with specific use cases for widget integration.

Adjusted Site Settings code for loading global widgets

Use this method to load the Elfsight script across your entire site.

At a high level you will:

Technical limitations:

Elfsight specifically recommends this placement of the main body for Webflow.

Code embed element for widget positioning

Use the Custom code embed element to place widget containers in specific DOM locations.

At a high level you will:

• Add an Embed element from the Add panel
• Place it where you want the widget to appear
• Add the HTML widget container (usually a
  with a data attribute) or paste the generated Elfsight embed code

  The Embed element shows as a placeholder in the Designer. Widgets only render on published sites or in preview mode with custom code enabled.

  Page settings custom code for page-specific widgets

  For widgets that should only load on specific pages, use Page Settings > Custom code (where you can add code to the head or before the body closing tag). This prevents unnecessary script loading on pages without booking functionality.

  Configure the Elfsight booking widget

  Widget configuration happens entirely in the Elfsight dashboard before generating embed code.

  Create and configure your widget

  At a high level, you'll:

  • Create an Elfsight account and access the dashboard
  • Select the Appointment Booking widget from the catalog
  • Configure services, availability, and notifications
  • Publish to generate installation code

  See the widget editor documentation for detailed configuration steps.

  Service configuration parameters

  The widget supports these service settings:

  • Duration: Configurable service durations in fixed time increments
  • Pricing modes: Fixed price, "Starting from" price, Free, or Hidden
  • Multi-currency support for international service businesses

  Time slot and availability settings

  Configure availability through:

  • Weekly schedule: Define standard working hours per day with time intervals for recurring availability
  • Exception dates: Special dates for date-specific hours
  • Days off: Mark holidays and closures
  • Time zone configuration: Essential for multi-location support

  Connect Google Calendar for availability sync

  Google Calendar synchronization helps prevent double bookings by aligning widget availability with your connected calendar.

  Follow the Google Calendar integration guide to connect your calendar. This is the primary mechanism for preventing scheduling conflicts.

  Set up email notifications

  Email is the primary notification channel for Elfsight Booking Widget bookings. Configure both administrator alerts and customer confirmations in the widget settings.

  Configure administrator notifications

  Set up the "Notify Me" feature to receive booking alerts at specified email addresses. Configure administrator email notifications in the widget settings to ensure you receive alerts directly in the widget dashboard as documented in Appointment Booking Submissions.

  Customer confirmation emails

  Configure autoresponder confirmations for immediate customer acknowledgment. Options include:

  • Personalization options for dynamic content insertion with submission data
  • Custom SMTP configuration for sending from your domain

  On-screen confirmation messages

  Customize the message displayed immediately after booking submission through display settings.

Embed the widget in Webflow

Embedding widgets requires two steps: adding the script globally Site settings and place the widget container element where you want it to appear.

Get the installation code

Get your widget’s embed code from the Elfsight dashboard. The code follows this general structure:

To see where you can find your installation code for dashboard navigation details.

Add the script to the Webflow site settings

At a high level you will:

• Open Site settings > Custom code
• Add the script tag to the Head section
• Save and publish your site

The script tag loads the Elfsight script globally. To see Webflow custom code documentation for details.

Place the widget container

At a high level you will:

• Add one Code Embed element at your desired location
• Paste the widget container code from the Elfsight dashboard

Example container:

For floating widgets, container placement is less critical because the widget positions itself via CSS.

Check your integration

Widgets are not displayed in the Webflow Designer. You must test on published sites.

Enable custom code in preview mode

Third-party widgets and custom code require explicit activation preview mode before testing.

Workflow testing recommendation:

1. Add Elfsight embed code to Site Settings > Custom Code > Main Section (per Webflow Elfsight guide)
2. Enable custom code in the preview settings to test widget functionality before publishing
3. Verify that all interactions work correctly in preview mode
4. Publish to staging (Enterprise plans) or production for final validation

This implementation gap between Designer and Published environments is a common source of confusion. Widgets that don’t appear in Designer usually function correctly once published, provided the code placement and syntax are correct.

Test on published site

At a high level you will:

• Publish to staging or production
• Check that the widget is showing and accepting test bookings
• Confirm email notifications and calendar sync (if configured)

See the verification checklist below for full testing criteria.

Verification checklist

Test environment note: Widgets are not displayed in Webflow Designer. Test all of the items below on your published site or staging environment (if available), as custom code is disabled by default in Designer.

• Widget is displayed on the published site
• Services and prices are displayed correctly in the configured widget
• Available time slots correspond to the configured schedule
• Booking form sent successfully
• A confirmation message will be displayed after the form has been submitted
• The business owner will receive an email notification for each booking
• Customer receives confirmation email after booking
• Google Calendar shows booked appointment (via configured calendar integration)
• Booked slot will no longer be available for subsequent bookings (via Google Calendar sync)
• Widget displays correctly on mobile devices

Troubleshoot common problems

These solutions address the most common issues with embedding Elfsight widgets in Webflow projects.

Widget is not displayed

Verify that the script tag is present Site settings > Custom code > Main body and that the widget container element exactly matches your widget ID. Make sure the site is published after adding the code. Judgement Elfsight’s display troubleshooting guide for additional diagnostics.

Script conflicts

Avoid duplicate jQuery imports and conflicting library versions. Per Webflow’s Code Embed documentationdon’t include jQuery manually if your site already loads it, and place jQuery-dependent scripts in the ‘Before tag” section.

AJAX and dynamic content loading

Sites using AJAX or client-side routing may experience widget loading issues when the widget initializes before the target container exists in the DOM. See Elfsight’s AJAX troubleshooting for timing solutions.

Email notifications not arriving

Verify email addresses in widget notification settings and check spam/junk folders. For custom SMTP issues, verify domain authentication. Refer to Elfsight’s troubleshooting resources for systematic troubleshooting.

Combine Event Calendar with Booking Widget

Elfsight does not document any built-in connection between Event Calendar and Appointment Booking; they are configured as separate widgets. However, you can use them together through manual linking.

Implementation pattern

At a high level, you’ll:

• Create both widgets in the Elfsight dashboard
• Place Event Calendar to display availability or scheduled events
• Place Booking Widget for transaction functionality
• Link between widgets manually via event description call-to-action buttons or strategic page layout positioning

Event Calendar configuration

Configure Event Calendar display options in the Elfsight dashboard:

• View layouts: Grid, slider, list, or masonry display options
• Filtering: Category and date-range filters for event navigation
• Visual customization: Color palette and typography matching your brand

See the Event Calendar Widget documentation for full configuration options.

Manual linking strategy

Since no documented automatic integration exists, connect the widgets through:

• “Book Now” buttons or call-to-action links in event descriptions linking to booking sections
• Strategic page layout placing the Event Calendar above or beside the Booking Widget
• Anchor links from calendar events to the booking form

See community discussion on calendar-booking integration for additional context.

Advanced customization options

Elfsight provides a built-in CSS editor for styling customization beyond default options.

CSS customization

The Elfsight Booking Widget includes a built-in CSS editor for styling beyond the default options. When using custom CSS with Webflow, scope your selectors carefully to avoid conflicts with Webflow’s default styles.

/* Example: Target only the Elfsight booking widget */
.elfsight-app-abc123def456 .booking-button {
 background-color: #your-brand-color;
}


JavaScript customization

Some Elfsight widgets offer limited configuration via JavaScript, but Elfsight does not provide a public, fully documented JavaScript API for booking appointments, similar to full developer SDKs. Check the Elfsight dashboard for any available customization options specific to your widget.

Performance optimization

For faster widget loading:

• Use the async attribute on the script tag (included by default)
• Implement lazy loading for widgets below the fold
• Judgement Elfsight’s loading speed guide for additional optimization techniques

When should you consider alternative solutions?

The Elfsight Booking Widget works well for standalone appointment scheduling with email notifications. However, consider alternatives if you need:

API access and automation: Calendly, Acuity Scheduling, and Square Appointments offer extensive APIs and webhook support for integrating booking data with CRMs, automation platforms, and custom applications.

SMS notifications: Use alternative booking platforms with built-in SMS or webhook functionality, as Elfsight does not offer built-in SMS for the Booking Widget.

Data export and reporting: Calendly, Acuity Scheduling, SimplyBook.me, and Square Appointments offer data exports and APIs for custom reporting pipelines.

Deep calendar integration: Elfsight’s events calendar widget has no documented native integration with the booking widget. These are configured as separate widgets that must be linked manually.

Official documentation reference

These official resources provide detailed implementation guidelines and troubleshooting support.

Webflow Resources:

Elfsight Resources: