How to Embed Your Booking Widget

Enable public booking in your portal

Sign in with an administrator account and open Public Booking in your portal. Check that your account has public-booking access, switch it on and select Save. Enabling and saving makes your hosted booking address available. If the option is unavailable, confirm your plan access before changing your website.

Get your booking page address

Copy the booking URL shown in Public Booking after saving. Open it in a signed-out browser to check the page visitors will see. You can use this address as the destination of an ordinary booking link, without embedding a form. Keep that direct link available alongside an embed.

Customize your branding

Add your Logo URL and choose background, button and text colors that remain easy to read. Write a Welcome message explaining what visitors can book. Make the Confirmation message consistent with your process, including any staff approval that is still required. Save your changes and check them on the hosted page.

Mark which appointment types are public

Make sure each service you want to offer is active and bookable, then enable its public-booking option. Check availability, provider choices and any approval or service-area rules that apply to that service. Review the Name and Email guest-field settings; Phone is required. Keep services that need a staff conversation out of the public selection.

Choose your embed method

Public Booking provides inline, popup and iframe snippets for your account. Use an inline form for a dedicated booking page or an iframe when your builder supports it. A hosted booking link is also useful when an embed does not suit the site. The examples below explain the formats; copy your actual account snippet from the portal.

Paste the code into your website

Check that your website plan and editing permissions allow the selected script or iframe. Add the snippet to a supported HTML or code block. Your site administrator may need to help with permissions, layout or security settings. Use the official builder instructions below, then inspect the published page while signed out.

Test your booking page

Use a test appointment to check the complete guest journey on desktop and mobile, including keyboard navigation. Confirm the service, time and visitor details in the portal. If approval is required, verify that both the guest message and portal record show a request awaiting approval. Check every form step for clipping and remove the test appointment when finished.

Embed options

Inline widget

Place the form within a booking page. The script uses a fixed height, which you can set with data-height. Check the full journey at each screen size and allow enough room for the longest step.

<script src="https://ariavoice.ai/public-booking/embed.js"
        data-tenant="your-booking-id"
        data-mode="inline"
        data-height="800"
        async></script>

Popup "Book Now" button

This adds a button that opens the form in an overlay. Keep a direct booking link beside it, and check opening, closing and keyboard access before offering the popup to visitors. Choose the hosted page or inline form if the overlay does not meet your needs.

<script src="https://ariavoice.ai/public-booking/embed.js"
        data-tenant="your-booking-id"
        data-mode="popup"
        data-button-text="Book Now"
        async></script>

Raw iframe

Use an iframe if your website supports embedded pages. Give it a descriptive title and enough height for the form. The surrounding website layout can still restrict its size, so check the published page on mobile.

<iframe src="https://ariavoice.ai/public-booking/your-booking-id"
        width="100%"
        height="800"
        frameborder="0"
        style="border:0;max-width:480px;"
        title="Book an appointment"></iframe>

Website builder instructions

WordPress.com

1. Check that your plan and active hosting features permit script or iframe code.
2. Edit the page and add a Custom HTML block.
3. Paste the account snippet, save and check the published page. Self-hosted WordPress permissions may differ.

Squarespace

1. Confirm that your plan supports the iframe or JavaScript used by your snippet.
2. Add a Code block, choose HTML mode and paste the snippet.
3. Save and view the published page while signed out; editor previews can behave differently.

Wix

1. In Wix Editor, open Add Elements → Embed Code and select the HTML embed option.
2. Paste your account snippet, or use the website embed option with your hosted booking URL.
3. Resize the embed container and check the published desktop and mobile layouts for clipping.

Plain HTML

1. Open the HTML file or template where booking should appear.
2. Place the account snippet where the form should appear, or add a link to the hosted booking page.
3. Have your site administrator publish through your usual process and check any script or frame restrictions.

Troubleshooting

Booking page says public booking is disabled

Public booking has not been turned on for your account, or it was switched off.

Open Public Booking, confirm your account access, enable booking and select Save. Refresh the hosted page before changing the embed.

No appointment types are showing up

A service may be inactive, not bookable or not enabled for public booking.

Check those settings for the services you intend to offer. If a service appears but has no times, review its availability and provider configuration separately.

A visitor's ZIP code is not covered

For mobile or service-area businesses, the appointment type checks whether the visitor's ZIP is inside your service area.

Confirm the visitor's ZIP falls within the service areas configured on that appointment type. Add or adjust your covered ZIP codes in the portal if you serve that location.

The widget is cut off or too short (embed height)

A fixed iframe height can be too small for longer booking forms, so content gets clipped.

Increase data-height in the inline script or height in the iframe, then check every form step again. Both use a fixed height. Also check the surrounding builder container, especially in the mobile layout.

The widget will not load on my website

Some site builders or security settings block third-party scripts and iframes by default.

First open your hosted booking URL directly. If it works there, check your builder plan and embed permissions. Ask your site administrator to inspect any blocked script or frame before changing the site security policy.

Common setup questions

Do I need a developer to embed the Aria Voice booking widget?

The portal provides ready-made snippets. Whether you can paste one yourself depends on your website builder, account permissions and layout. A site administrator can help if scripts or iframes are restricted. You can also add an ordinary link to your hosted booking page.

Which embed method should I choose?

Start with the hosted link if you only need a booking destination. Use an inline form for a dedicated page, or an iframe if your builder supports embedded pages. A popup needs a separate check of its opening, closing and keyboard behavior. Keep a direct link available.

Why are no appointment types showing on my booking page?

Check that the service is active, bookable and enabled for public booking. Availability and provider settings determine which times can be offered. Check the hosted page first to separate service configuration from an embed issue.

Do visitors need to log in to book?

Visitors can use guest booking without creating an Aria account. They still provide the required contact details. A request that requires approval must be reviewed by your team before it is treated as confirmed.