Having your own website is standard for almost any business today. anny widgets let you embed your booking page or individual resources directly where your customers already are — they never have to leave your site to book.
Technically, it works through an iframe loaded in two steps: a global script once, then the component wherever you want it. You configure the widget once in anny and adjust it to your design. Your website always reflects the current state.
What you will have set up
The global widget script is loaded on your website
The widget is configured at organization or resource level
The design matches your brand
The widget is placed, tested, and working
Step 1: Choose the level and widget type
You can embed widgets at two levels. Decide first what you want to show.
Entire booking page (Organization → Settings → Booking page)
Use this when you have multiple resources that should be browsable. You also configure global components like the login button and cart button here.
Single resource (Resources → select resource → Booking page)
Use this when you want to embed one specific resource, for example an intro call on a landing page.
Within each level there are different widget types:
Type | When to use |
Page widget | Booking is the main content of the page |
Panel widget | You have your own content and only want the booking flow embedded |
Button widget | Booking should open in a modal on click |
Global utility widgets | Login and cart in the site header |
Widget reference
Page widgets
Widget | Best for |
| Full booking page with tabs, filters, optional map/calendar views |
| Map-first organization experience |
| Calendar-first organization experience |
| Full resource detail and booking page |
| Resource map or seat/floor-plan view |
| Resource calendar view |
| Full service detail and booking page |
| Subscription detail and checkout |
| Package detail and checkout |
| Logged-in user's booking overview |
Panel widgets
Widget | Best for |
| Embed only the booking flow for a resource |
| Embed only the booking flow for a service |
Button widgets
Widget | Best for |
| Open organization explore in a modal |
| Open resource booking in a modal |
| Open service booking in a modal |
| Open subscription checkout in a modal |
| Open package checkout in a modal |
| Custom modal trigger without a built-in button style |
Global utility widgets
Widget | Best for |
| Cart trigger with live item-count badge |
| Login/logout with shared auth state |
Step 2: Load the script once
Add the widget bundle once to the <head> of your website.
<script src="https://cdn.anny.co/widget/annyComponents.umd.latest.min.js"></script>
If you only use the widget on a single page, you can also place the script directly above the component on that page.
Step 3: Configure options and paste the snippet
Open the booking page for the relevant level in admin, select the component you want, and configure the options.
At organization level (page widget), available options include:
Hide organization/resource header
Hide filters and map toggle
Default tab and default view (e.g. grid)
Category prefilter
Widget height and navbar height
At resource level (page widget), available options include:
Hide resource/organization header
Preselected service
Widget height and navbar height
Copy the generated embed code and paste the component where it should appear on your page.
Full-page widget at organization level:
<a-organization-page
base-url="https://anny.co"
organization="my-org"
fullscreen="true"
nav-height="64px"
></a-organization-page>
Embedded booking panel:
<a-resource-booking-panel
base-url="https://anny.co"
resource="my-resource"
></a-resource-booking-panel>
Button widget:
<a-resource-button
base-url="https://anny.co"
resource="my-resource"
modal-layout="drawer"
></a-resource-button>
Step 4: Adjust the design
Go to Organization → Settings → Booking page and open the design panel via "Customize design". You can set:
Primary color and secondary color
Text color and background color
Input background and border color
Corner radius (rounded or sharp)
Logo for the loading animation
anny saves the design for the entire account — you do not need to set it per resource. The live preview updates instantly.
Step 5: Test
Open the page in a browser and verify:
Widget loads and shows content
The full booking flow can be completed
Design matches the rest of the page
Layout is correct on mobile viewports
Login and cart button (if used) are visible and functional
For more advanced widget embeddings, check out the following article: Widget Advanced