Embed the Booking Widget
Add the ExperienceLocal booking widget to your website. Guests can browse and book experiences without ever leaving your site.
What is the Widget?
The ExperienceLocal widget is an embeddable booking interface that lives directly on your hotel's website. It provides a seamless experience for guests to browse and book activities without being redirected to another site.
Embeddable
Lives on your website
White-Label
Match your brand colors
Responsive
Works on all devices
No Redirect
Guests stay on your site
Getting Your Embed Code
Each property has a unique embed code. Follow these steps to find yours:
- 1Go to Dashboard → Settings → Widget
- 2Select the property you want to embed
- 3Copy your unique embed code
<div id="experiencelocal-widget"></div>
<script
src="https://widget.experiencelocal.io/v1/embed.js"
data-property-key="YOUR_PROPERTY_KEY"
data-theme="light"
></script>Important: Property Key
Replace YOUR_PROPERTY_KEY with your actual property key from the dashboard. Each property has a unique key—using the wrong key will show the wrong experiences.
Platform-Specific Guides
Select your website platform below for step-by-step installation instructions.
WordPress
- 1Edit the page where you want the widget
- 2Add a "Custom HTML" block
- 3Paste your embed code into the block
- 4Save and publish the page
Alternatively, paste the code in Appearance → Theme File Editor → footer.php before the closing </body> tag for site-wide embedding.
Squarespace
- 1Edit the page in Squarespace
- 2Add a "Code" block
- 3Paste your embed code
- 4Save and publish
Use 'Code Block' not 'Markdown Block'. The widget requires JavaScript to load.
Wix
- 1Open your page in the Wix Editor
- 2Click Add (+) → Embed Code → Embed HTML
- 3Select "Code" and paste your embed code
- 4Position and resize the element as needed
- 5Publish your site
Webflow
- 1Open your page in the Webflow Designer
- 2Add an "Embed" element from the Add panel
- 3Paste your embed code in the code editor
- 4Position the embed element in your layout
- 5Publish to see the live widget
Custom HTML / Other Platforms
For any HTML-based website
If your platform isn't listed above, you can add the widget to any HTML page:
- 1Add the
<div id="experiencelocal-widget"></div>where you want the widget to appear - 2Add the
<script>tag just before the closing</body>tag - 3Save and upload your HTML file
Customizing Your Widget
Make the widget match your brand by customizing its appearance with data attributes.
| Attribute | Values | Description |
|---|---|---|
data-theme | light, dark | Widget color scheme |
data-color | Hex color (e.g., #2563eb) | Primary brand color |
data-layout | grid, list | Experience display layout |
data-show-categories | true, false | Show category filters |
Example: Customized Widget
<div id="experiencelocal-widget"></div>
<script
src="https://widget.experiencelocal.io/v1/embed.js"
data-property-key="YOUR_PROPERTY_KEY"
data-theme="light"
data-color="#2563eb"
data-layout="grid"
data-show-categories="true"
></script>Light Theme
Best for websites with light backgrounds. Clean, minimal appearance.
data-theme="light"Dark Theme
Perfect for dark-mode websites or dramatic visual presentations.
data-theme="dark"Testing Your Widget
Before going live, make sure everything is working correctly.
Verify the Widget Loads
- • Visit your page where you added the embed code
- • The widget should appear within 1-2 seconds
- • You should see your experiences listed
- • If nothing appears, check the browser console for errors
Test Booking Flow
- • Click on an experience to view details
- • Select a date and time slot
- • Go through the checkout process
- • Use Stripe test card:
4242 4242 4242 4242 - • Verify you receive a confirmation email
Check Responsiveness
- • Test on desktop, tablet, and mobile devices
- • Resize your browser window to check breakpoints
- • Ensure the booking flow works on touch devices
Test Mode
While testing, use Stripe's test card numbers to simulate payments without being charged. All test bookings are clearly marked in your dashboard.
Troubleshooting
Having issues? Here are solutions to common problems.
Widget not showingClick to expand
- Check that your property key is correct (Dashboard → Settings → Widget)
- Verify the script tag is properly closed and formatted
- Open browser Developer Tools (F12) and check the Console tab for errors
- Ensure your website allows external JavaScript (some CMS have security settings)
- Clear your browser cache and hard refresh (Ctrl+Shift+R / Cmd+Shift+R)
Widget shows wrong property/experiencesClick to expand
- Double-check your property key matches the correct property in Dashboard → Settings → Widget
- If you have multiple properties, ensure you copied the key for the right one
- Each property has a unique key—they cannot be interchanged
Widget styles look brokenClick to expand
- Check for CSS conflicts with your website's stylesheets
- Some themes apply global styles that can affect the widget
- Try adding the widget to a blank page to isolate the issue
- Contact support if the issue persists—we may need to adjust the widget's CSS isolation
Payment not processingClick to expand
- Ensure you've connected Stripe in Dashboard → Settings → Payments
- Check that you're in live mode (not test mode) for real payments
- Verify your Stripe account is fully activated and verified
- Check Stripe Dashboard for any payment errors or declined transactions
Remove "Powered by ExperienceLocal" Badge
The free plan displays a small "Powered by ExperienceLocal" badge on the widget. Paid plans can remove this for a completely white-label appearance.
Free Plan
Badge is displayed to help us grow. We appreciate your support!
Starter & Above
Remove the badge for a fully branded experience.
How to Remove the Badge
- 1Upgrade to Starter plan or higher
- 2Go to Dashboard → Settings → Widget
- 3Toggle off "Show Powered By Badge"
- 4The change takes effect immediately—no code changes needed
What's Next?
Your widget is embedded! Here's what to do next to start accepting bookings.
Handle Bookings
Learn how to manage reservations, confirmations, and guest communications.
Advanced Customization
Explore more widget customization options and styling techniques.
Add Providers
Invite local experience providers to expand your offerings.
Billing & Plans
Understand pricing, transaction fees, and plan features.
You're All Set!
Your booking widget is now live on your website. Guests can browse and book experiences directly from your site. Monitor bookings in your dashboard and don't forget to create compelling experiences to maximize conversions!
Still Having Trouble?
If you've tried the troubleshooting steps and still need help, our support team is ready to assist.
Contact Support