Booking Popup

Add a booking popup that appears in the center of your website when visitors click a button.
Tags:

Booking Popup Widget

The Booking Popup widget displays a booking popup in the center of your website when users click a button, providing a clean and unobtrusive way for clients to book appointments.

Booking Popup Widget

How It Works

When visitors click the designated button on your website, a popup appears in the center of the screen containing your Barberly booking interface. This keeps visitors on your current page while they make their booking.

Use Cases

  • Use across your entire website to provide a consistent booking experience
  • Add to blog posts to convert readers into clients
  • Place on service pages to encourage immediate bookings
  • Add to testimonial pages to capitalize on social proof

Setting Up Your Booking Popup

Create a New Instance

  1. Log in to your Barberly account at portal.barberly.com
  2. Navigate to Menu → Apps → All Widgets
  3. Click on the Booking Popup option
  4. Select Create New Instance
  5. Give your new popup instance a name (e.g., “Main Popup Booking”)

Configure Popup Settings

In the configuration section, you can set:

  1. Button Text: Customize the text that appears on the button that triggers the popup
  2. Booking URL: Enter the URL to your Barberly booking page that will be displayed in the popup

Customize Button and Popup Styles

Adjust styling options for both the button and the popup:

Button Styling:

  • Background Color: Choose a color that complements your website’s color scheme
  • Text Color: Select a color that provides good contrast with the background
  • Padding: Adjust the internal spacing of the button
  • Border Radius: Set the roundness of the button corners
  • Font Weight: Make the text normal, bold, etc.

Popup Styling:

  • Border Radius: Set the roundness of the popup corners
  • Box Shadow: Add a shadow effect to make the popup stand out

Preview and Test

Use the live preview to see how your popup button and popup will look on your website. Click the button to test that the popup appears correctly with your booking interface.

Get the Integration Code

Once you’re satisfied with your popup:

  1. Copy the generated code from the “Copy this code to your website” section
  2. Paste the code into the HTML of your website where you want the popup button to appear
  3. Save and publish your website changes

Website Platform Integrations

For platform-specific integration instructions, check out these guides:

Example Integration Code

<div id="popup-booking-container"></div>
<script src="https://widgets.barberly.com/barberly-widgets.js" data-business-id="house13" data-widget-id="popup_booking" data-container-id="popup-booking-container"></script>

Managing Multiple Popup Instances

You can create multiple popup instances with different designs for different sections of your website:

  1. Log in to your Barberly account at portal.barberly.com
  2. Navigate to Menu → Apps → All Widgets
  3. Select “Booking Popup”
  4. Create additional instances as needed
  5. Each instance will have its own unique integration code

Updating Your Popup

To update a popup that’s already live on your website:

  1. Log in to your Barberly account at portal.barberly.com
  2. Navigate to Menu → Apps → All Widgets
  3. Find and edit the popup instance
  4. Make your desired changes
  5. Save the changes
  6. The popup on your website will update automatically (no need to update the code on your website)

Advanced Features

You can customize how the popup behaves:

  • Close on Outside Click: Enable/disable closing the popup when clicking outside it
  • Overlay Opacity: Control the darkness of the background overlay
  • Animation Speed: Set how quickly the popup appears and disappears

Mobile Optimization

The booking popup is fully responsive and optimized for mobile devices:

  • Adapts to screen size for optimal viewing
  • Easy to close with a prominent X button
  • Touch-friendly interface for all elements