Amira van Weegen
Marketing Manager
May 28, 2026
Embed Booking System into Your Website: How to Use anny Widgets for More Online Bookings
5 min.
Introduction
Picture this: A potential customer lands on your website, is thrilled by your offer, and wants to book right away. But instead of a direct booking form, they find a contact form, an email address, or a button redirecting them to an external site. The peak moment of purchase decision is right there—and then it's gone.
This scenario is far from an exception. Many operators of coworking spaces, fitness studios, sports centers, or event locations invest lots of time and money into a great website—only to lose potential bookings at the very last step. Not because the offer isn't right, but because the path to booking has one step too many.
The great news: You can easily change this. By embedding your online booking system directly into your own website, you bridge exactly this gap. Users book right where they already are—no redirects, no friction. In this article, we'll show you exactly how this works, which widget types are available, and what to keep in mind when embedding them.
What is an anny widget?
A widget is an embeddable element that displays an external function – in this case, your entire booking system – directly on your website. This means visitors can book without ever having to leave your site.
Widget vs. External Booking Link
An external link redirects users to a separate booking page – causing a new tab to open, a different design to appear, and a noticeable break in the user experience. An embedded widget, on the other hand, integrates the entire booking flow directly into your site: same look and feel, same context, and significantly fewer drop-offs.
Technically, the embedding works via a simple iframe or JavaScript snippet that you paste into your CMS, whether it's WordPress, Webflow, Squarespace, or a custom website. No developer needed, no complex configuration.
The anny widget family: Which widget is the perfect fit for your use case?
anny offers various widget types, which can be divided into three categories – depending on how and where you want to integrate the booking flow on your website:
Page Widgets display the entire booking area as a complete, standalone page:
Widget | Best used for |
|---|---|
Organization Page | Complete booking page with tabs, filters, and resource overview |
Organization Calendar | Calendar-oriented booking experience for the entire organization |
Resource Page | Detailed view and booking page for a single resource |
Resource Calendar | Calendar view for a single resource |
3D Map | Visual floor plan navigation with bookable areas |
Subscription Page | Sign up for memberships & subscription packages directly |
Panel Widgets are perfect if you have your own page content and only want to embed the booking flow – e.g., on a landing page right next to a descriptive text:
Widget | Best used for |
|---|---|
Resource Booking Panel | Booking flow for a single resource |
Service Booking Panel | Booking flow for a single service |
Button Widgets open the booking flow in a modal upon clicking – ideal for navigation menus, hero sections, or as a subtle Call-to-Action:
Widget | Best used for |
|---|---|
Organization Button | Open your entire service offering in a modal |
Resource / Service Button | Targeted booking of a specific resource or service |
Subscription Button | Complete memberships directly in a modal |
Global Helper Widgets round off the booking experience:
Login Button – enables user login directly on your website
Cart Button – displays the shopping cart with a live badge in the navigation
You can find a complete overview of all widget types with technical details in the anny Help Center article on widget embedding. To see how all these widgets look and function in practice, try them live on the Basecamp Demo Page.
Step-by-Step: How to Embed your Booking System into your Website with anny
Embedding an anny widget is done in just a few simple steps, even without any technical background:
1. Create your anny account: Before you can get started, you need an anny booking page. If you don't have an account yet, you can test anny for free here and set up your booking system in just a few minutes.
2. Choose your widget level and type: First, decide what you want to embed: your organization's entire booking page or a single resource. Then select the right widget type – for example, a side widget for a full booking overview or a panel widget if you want to embed the booking flow right alongside your own content.
3. Configure the widget in your anny dashboard: Navigate to the booking page of the corresponding level (org or resource) in the admin panel. There, select the desired component and configure the available options – such as which filters are displayed, which resources are visible, or which default view is loaded.
4. Customize the design: To ensure the widget blends perfectly with your website, customize it under Organization → Settings → Booking Page → Brand Design to match your corporate identity: primary and secondary colors, font and background colors, corner radius, and logo. This design applies account-wide – you don't have to set it up again for every individual resource.
5. Copy the embed code: anny automatically generates the correct embed code for you. Simply insert the global widget script once into the <head> of your website, and then place the actual widget component wherever you want it to appear.
6. Insert it into your website: Paste the code into your CMS – whether you're using WordPress, Webflow, Squarespace, or a custom website. A simple HTML block or embed element is all it takes; no developer skills required.
7. Test it on desktop and mobile: Double-check that the widget loads correctly, the booking flow runs smoothly, and the layout looks fantastic on mobile devices. Display issues that are invisible on desktops often pop up on smartphones.
8. Go live! Everything looking good? Publish your changes – your booking system is now seamlessly embedded directly into your website.
🔗 You can find the complete technical guide with all configuration options in the anny Help Center article.
These mistakes are costing you bookings—and how to easily avoid them
If you've embedded your booking system, you've already taken the most important step! To make sure your widget works exactly as you want it to, it's worth taking a quick look at the most common stumbling blocks – most of them can be fixed in just a few simple steps:
Wrong Sizing
The widget is too big or too small for its intended container, making it look unfinished.
How to fix it: Test the widget in its actual container and adjust the height directly in the anny dashboard.
Scroll in Scroll
If the widget creates its own scroll area within your page, it causes a double scrolling effect – which is especially annoying on mobile devices.
How to fix it: Use the fullscreen option or set the widget height so that the entire content is visible without internal scrolling.
No Theming / Wrong Theming
A widget without custom design fits poorly, looking like third-party software that doesn't match the rest of your website.
How to fix it: Customize the primary color, background, text color, and corner radius to perfectly match your brand's corporate design.
Low Contrast
Insufficient color contrast between the text and the background makes it hard to read.
How to fix it: Check all color combinations for sufficient contrast after customizing your design – a simple online contrast checker is all you need.
Redundant Content
Displaying the same information twice – such as the resource name in the widget header and again in the page text right above it – creates confusion.
How to fix it: Consider which information the widget already provides and remove duplicate content from the surrounding page text.
Multiple Inline
Having multiple large-format widgets on a single page slows down loading times and distracts visitors. How to fix it: Use a maximum of one primary inline widget per page – for additional offers, it is much better to use separate subpages or button widgets.
Calendar Non-Fullscreen
A calendar widget in a container that's too small is hard to use on mobile devices.
How to fix it: Always embed calendar widgets in fullscreen mode or in a sufficiently large container, and make sure to test the experience on a smartphone.
Best Practices: How to get the absolute most out of your anny widgets
Technical integration is just the first step. Whether the widget actually leads to more bookings depends heavily on how you implement and maintain it. These basic rules have proven themselves in practice:
Only the right widget for each specific use case: A booking panel for a single room doesn't need a full calendar – and vice versa. Less is almost always more here.
Test mobile first: Most of your website visitors today are using a smartphone. A widget that looks perfect on desktop, but causes scroll-in-scroll issues or gets unreadably small on mobile, misses its purpose.
Placement is key: Nobody will find a widget that is hidden deep in a subpage. Place your primary booking entry point – like a Booking Button – prominently in your navigation or directly in the hero section of your homepage.
Consistent theming: Colors, fonts, borders – the closer the widget aligns with your corporate design, the more it feels like a seamless, integrated part of your website. This builds trust and boosts conversion rates.
Keep an eye on performance: After going live, it pays off to regularly check how the widget is being used. Helpful questions to ask:
How many users start the booking flow – and how many complete it?
At which step in the process do users drop out?
Does the widget perform better on the homepage than on the landing page?
Wrap-up
Embedding your booking system directly into your website gives potential clients exactly what they need at the crucial moment: a seamless, direct path to booking – no detours, no external sites, and no media disruption.
The anny widgets make this technically easy to implement, without requiring any coding skills. However, what matters isn't just the embed itself, but how you design it: choosing the right widget for your specific use case, applying clean theming, ensuring mobile optimization, and placing it where users will actually see it.
Ready to embed your own booking system? Book your personal demo today and let our team guide you through the process.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg"><path d="M 55.501 13.158 L 59.216 13.158 L 59.216 30.294 L 55.501 30.294 L 55.501 27.83 C 54.088 29.78 52.094 30.741 49.482 30.741 C 47.113 30.741 45.112 29.883 43.427 28.138 C 41.743 26.393 40.919 24.23 40.919 21.729 C 40.919 19.192 41.743 17.073 43.427 15.321 C 45.112 13.576 47.106 12.718 49.482 12.718 C 52.094 12.718 54.088 13.678 55.501 15.599 Z M 50.071 27.207 C 51.616 27.207 52.925 26.693 53.955 25.667 C 54.986 24.604 55.501 23.306 55.501 21.729 C 55.501 20.153 54.986 18.855 53.955 17.821 C 52.925 16.758 51.616 16.245 50.071 16.245 C 48.526 16.245 47.216 16.758 46.186 17.821 C 45.156 18.848 44.641 20.153 44.641 21.729 C 44.641 23.306 45.156 24.611 46.186 25.667 C 47.216 26.693 48.526 27.207 50.071 27.207 Z M 79.191 19.771 L 79.191 30.294 L 75.475 30.294 L 75.475 20.153 C 75.475 17.586 73.997 16.179 71.628 16.179 C 69.016 16.179 67.265 17.792 67.265 21.113 L 67.265 30.294 L 63.549 30.294 L 63.549 13.158 L 67.265 13.158 L 67.265 15.357 C 68.398 13.612 70.149 12.718 72.591 12.718 C 76.542 12.718 79.191 15.387 79.191 19.771 Z M 98.82 19.771 L 98.82 30.294 L 95.104 30.294 L 95.104 20.153 C 95.104 17.586 93.626 16.179 91.257 16.179 C 88.645 16.179 86.894 17.792 86.894 21.113 L 86.894 30.294 L 83.178 30.294 L 83.178 13.158 L 86.894 13.158 L 86.894 15.357 C 88.027 13.612 89.778 12.718 92.22 12.718 C 96.171 12.718 98.82 15.387 98.82 19.771 Z M 114.049 13.158 L 118 13.158 L 111.401 30.836 C 109.753 35.258 106.964 37.384 103.013 37.142 L 103.013 33.689 C 105.353 33.828 106.655 32.691 107.59 30.33 L 107.759 29.986 L 100.468 13.158 L 104.522 13.158 L 109.642 25.593 Z M 36.232 8.186 C 36.188 5.033 35.879 2.203 35.827 1.77 C 35.798 1.066 35.371 0.458 34.694 0.164 C 33.959 -0.151 33.113 -0.004 32.539 0.531 C 19.487 12.828 19.413 12.916 19.377 12.96 C 19.229 13.128 19.156 13.224 19.082 13.334 L 19.075 13.348 C 19.053 13.385 19.031 13.414 19.009 13.451 C 18.84 13.737 18.744 14.147 18.766 14.477 C 18.788 14.807 18.862 15.152 19.001 15.511 C 19.023 15.592 19.046 15.665 19.075 15.739 C 19.2 16.091 19.568 17.161 19.641 21.003 C 19.722 25.102 19.207 26.965 18.935 27.962 C 18.884 28.138 18.847 28.292 18.81 28.438 C 18.766 28.578 18.656 28.952 18.759 29.465 C 18.81 29.707 18.906 29.912 18.965 30.022 C 18.994 30.074 19.023 30.125 19.06 30.176 C 19.119 30.264 19.215 30.404 19.369 30.536 L 26.712 37.487 C 27.065 37.824 27.536 38 28.014 38 C 28.271 38 28.536 37.949 28.779 37.839 C 29.456 37.545 29.875 36.929 29.875 36.218 L 29.875 24.42 C 29.875 23.504 29.419 22.924 29.073 22.565 L 28.978 22.462 C 29.706 21.803 31.943 19.764 34.452 17.227 C 35.717 15.944 36.298 12.989 36.232 8.186 Z M 27.624 34.605 C 27.624 34.847 27.33 34.972 27.153 34.803 L 21.363 29.326 L 21.378 29.311 L 21.407 29.282 L 21.495 29.194 L 21.532 29.157 C 21.569 29.12 21.606 29.091 21.643 29.054 C 21.65 29.047 21.665 29.04 21.672 29.025 C 21.724 28.981 21.775 28.93 21.827 28.878 L 21.841 28.864 C 21.893 28.82 21.937 28.776 21.988 28.724 C 22.003 28.71 22.018 28.702 22.033 28.688 C 22.084 28.636 22.136 28.592 22.194 28.541 C 22.261 28.482 22.319 28.424 22.386 28.365 L 22.665 28.116 L 22.754 28.035 L 27.308 23.958 L 27.44 24.098 C 27.447 24.105 27.455 24.112 27.455 24.12 C 27.631 24.303 27.631 24.34 27.631 24.428 L 27.631 34.605 Z M 32.848 15.658 C 29.875 18.657 27.278 20.967 27.256 20.989 L 27.249 20.989 L 26.623 21.546 L 25.792 22.294 C 24.586 23.372 23.173 24.633 22.187 25.52 C 21.996 25.689 21.701 25.535 21.724 25.285 C 21.841 24.171 21.915 22.756 21.885 20.945 C 21.804 16.743 21.378 15.511 21.194 14.983 C 21.186 14.969 21.179 14.954 21.179 14.939 C 21.157 14.844 21.135 14.778 21.12 14.741 C 21.106 14.705 21.091 14.668 21.083 14.639 C 21.047 14.536 21.076 14.426 21.157 14.353 C 22.239 13.326 29 6.954 33.252 2.951 C 33.422 2.789 33.694 2.899 33.716 3.127 C 33.826 4.293 33.966 6.214 33.995 8.23 C 34.062 13.971 33.135 15.365 32.848 15.658 Z M 17.302 27.955 C 17.03 26.957 16.522 25.095 16.596 20.996 C 16.669 17.146 17.044 16.076 17.162 15.731 C 17.184 15.658 17.214 15.585 17.236 15.504 C 17.368 15.152 17.449 14.8 17.471 14.47 C 17.493 14.147 17.39 13.737 17.228 13.444 C 17.206 13.407 17.184 13.378 17.162 13.341 L 17.155 13.326 C 17.081 13.224 17.008 13.121 16.86 12.952 C 16.824 12.908 16.743 12.828 3.698 0.538 C 3.125 -0.004 2.278 -0.144 1.543 0.172 C 0.866 0.465 0.439 1.074 0.41 1.778 C 0.358 2.21 0.049 5.041 0.005 8.193 C -0.061 12.996 0.52 15.951 1.793 17.234 C 4.316 19.786 6.568 21.839 7.267 22.47 L 7.171 22.572 C 6.825 22.932 6.369 23.511 6.369 24.428 L 6.369 36.211 C 6.369 36.922 6.788 37.545 7.465 37.831 C 7.715 37.941 7.973 37.993 8.23 37.993 C 8.709 37.993 9.172 37.817 9.533 37.479 L 16.912 30.499 C 17.044 30.382 17.133 30.25 17.184 30.184 C 17.221 30.132 17.25 30.081 17.272 30.044 C 17.346 29.92 17.442 29.722 17.486 29.472 C 17.581 28.974 17.478 28.6 17.434 28.446 C 17.398 28.284 17.353 28.13 17.302 27.955 Z M 3.389 15.658 C 3.102 15.365 2.168 13.979 2.249 8.237 C 2.278 6.221 2.426 4.3 2.529 3.134 C 2.551 2.907 2.823 2.797 2.992 2.958 C 7.245 6.962 14.006 13.334 15.087 14.36 C 15.161 14.433 15.19 14.543 15.161 14.646 C 15.154 14.675 15.139 14.712 15.124 14.749 C 15.109 14.785 15.087 14.851 15.065 14.947 C 15.058 14.961 15.058 14.976 15.051 14.991 C 14.867 15.519 14.44 16.75 14.359 20.952 C 14.322 22.763 14.396 24.178 14.521 25.293 C 14.55 25.542 14.249 25.696 14.057 25.527 C 13.071 24.64 11.659 23.379 10.452 22.301 L 9.621 21.553 L 8.988 20.989 C 8.871 20.893 6.325 18.62 3.389 15.658 Z M 9.077 34.81 C 8.9 34.979 8.606 34.854 8.606 34.612 L 8.606 24.42 C 8.606 24.34 8.606 24.296 8.782 24.112 C 8.79 24.105 8.797 24.098 8.797 24.09 L 8.929 23.951 L 13.476 28.028 L 13.792 28.314 L 13.851 28.365 C 13.866 28.38 13.881 28.394 13.895 28.402 C 13.932 28.438 13.976 28.475 14.013 28.512 C 14.035 28.534 14.057 28.548 14.072 28.57 C 14.109 28.607 14.153 28.644 14.19 28.68 C 14.212 28.695 14.227 28.717 14.249 28.732 C 14.293 28.776 14.337 28.812 14.381 28.856 L 14.41 28.886 C 14.462 28.937 14.513 28.981 14.558 29.025 L 14.587 29.054 C 14.624 29.091 14.661 29.12 14.69 29.157 L 14.727 29.194 C 14.756 29.223 14.793 29.26 14.815 29.289 L 14.837 29.311 L 14.852 29.326 Z" fill="rgb(0, 0, 0)" height="38px" id="bH388uk2E" transform="translate(1 1)" width="118.00000395534607px"/></svg>)