Skip to main content
All CollectionsBooking PageiFrame integration
Embed the anny booking page on your own website in your design
Embed the anny booking page on your own website in your design

With the anny widget, you embed your booking page or resource on your own website. How do you do it? You can find out here.

Alex avatar
Written by Alex
Updated over 7 months ago

Having your own internet presence is nowadays essential for almost every company. It is just as important to offer your customers a quick way to your services. With anny widget, you can embed your booking page or individual resources directly on your website and provide a seamless booking experience. Display your widget in your design as well.

Where can I find the widget?

At the account level, you will find the widget here (Edit account > booking page). Here you will find the component to embed your entire booking page. This is especially useful if you have multiple resources that you want to be searchable.

At the resource level, you can also find the widget in the Booking page tab (Resources > Select resources > Booking page). With this widget, you embed only this particular resource. This is, e.g., useful to offer a non-binding initial consultation on your website.

The technical guide

The widget (iframe) is technically embedded in 2 steps.

  1. Load script globally

Firstly, add the script to your website (not on every page). We recommend using it as a global script. If you are using only one widget on a single page, you can paste this code directly above it.
Place the global script in the header. The component in the place where you want it to appear.

<script src="https://unpkg.com/vue@3"></script>
<script src="https://cdn.anny.co/widget/annyComponents.umd.latest.min.js"></script>
  1. Use components

Once the above script is loaded, you can use various components anywhere on your website. You can also fully customize the design to match your corporate identity.

Pro tip: The script (the first part of the code) can also be loaded multiple times, if there are problems with embedding the widget, it usually helps to use both parts of the code each time.

How can I customize the design for my widget?

Here you can let off steam and customize the appearance according to your wishes – or according to your corporate design. anny remembers your design for your entire account.

Open the design panel via the "Customize design" button. You can change:

  • Primary color

  • Secondary color

  • Text color

  • Background color

  • Input background

  • Border color

  • Corners (rounded or square)

  • Drop shadow (yes or no)

You can also decide whether to show or hide the image gallery or (on the booking page) the header.

In the live preview on the left side, you can see your changes immediately, which makes the design even easier! 🎨


How can I include the widget in my editor?

Did this answer your question?