Public Booking Widget
The public booking widget allows you to embed a booking interface directly into your website, providing a seamless booking experience for your customers. This guide explains how to set up and use the booking widget.
What is a Booking Widget?
A booking widget is an embeddable component that displays your booking interface directly on your website. Instead of redirecting customers to a separate booking page, the widget allows them to make reservations without leaving your website.
Benefits of Using a Widget
Advantages of embedding a booking widget:
- Seamless Experience: Customers stay on your website
- Better Integration: Matches your website design
- Reduced Bounce Rate: Keeps visitors on your site
- Easy Access: Booking available on every page
- Professional Appearance: Integrated booking looks professional
Accessing Widget Code
To get your booking widget code:
- Navigate to Settings → Restaurant Settings
- Find Public Booking section
- Look for Booking Widget or Embed Code
- Copy the widget code or iframe URL
Widget Implementation Methods
Different ways to embed the widget:
1. Iframe Embed
Embed using iframe (most common):
- Iframe Code: Copy the provided iframe code
- Paste in HTML: Insert code where you want widget to appear
- Responsive: Widget adapts to container size
- Simple: Easiest method to implement
2. JavaScript Widget
If JavaScript widget is available:
- Script Tag: Add script tag to your website
- Container Div: Create container div for widget
- Initialize: Widget initializes automatically
- Customizable: More customization options
3. Direct Link Button
Alternative to full widget:
- Booking Button: Add "Book a Table" button
- Link to Portal: Button links to booking portal
- Popup Option: Open booking in popup window
- Simple Integration: Easiest to add
Widget Placement
Where to place the booking widget:
- Homepage: Prominent placement on homepage
- Dedicated Page: Create dedicated booking page
- Sidebar: Add to website sidebar
- Footer: Include in website footer
- Navigation Menu: Add to main navigation
- Floating Button: Floating button on all pages
Widget Customization
Customize widget appearance:
- Size: Adjust widget dimensions
- Colors: Match widget colors to your website
- Styling: Apply custom CSS if supported
- Responsive Design: Ensure widget is mobile-friendly
Responsive Design
Ensure widget works on all devices:
- Mobile Optimization: Widget adapts to mobile screens
- Tablet Support: Works on tablet devices
- Desktop View: Optimized for desktop
- Testing: Test on various devices and screen sizes
Widget Configuration
Configure widget settings:
- Branch Selection: Set which branch the widget is for
- Default Settings: Configure default booking options
- Display Options: Choose what to display in widget
- Behavior Settings: Configure widget behavior
Testing the Widget
Before going live, test the widget:
- Embed widget on a test page
- Test booking process end-to-end
- Check on different devices
- Verify all features work correctly
- Test on different browsers
- Check loading speed
- Verify mobile responsiveness
Widget Maintenance
Keep widget updated:
- Regular Updates: Update widget code if provided
- Settings Sync: Widget reflects booking settings changes
- Monitoring: Monitor widget performance
- Bug Fixes: Address any issues promptly
Alternative: Popup Widget
If popup widget is available:
- Trigger Button: Add button to trigger popup
- Popup Window: Booking opens in popup
- Lightbox Style: Modern popup design
- Easy Integration: Simple to implement
Best Practices
- Place widget prominently on your website
- Ensure widget is mobile-responsive
- Test thoroughly before going live
- Match widget styling to your website
- Keep widget code updated
- Monitor widget performance
- Provide clear instructions for customers
- Make widget easily accessible
Troubleshooting
Common issues and solutions:
- Widget Not Loading: Check iframe/script code is correct
- Styling Issues: Adjust CSS or container settings
- Mobile Problems: Ensure responsive design is enabled
- Booking Not Working: Verify booking portal is active
Next Steps
After setting up the widget:
- Test the widget thoroughly
- Monitor customer usage
- Gather feedback from customers
- Optimize widget placement and design
- Update widget as needed