Appointments & Scheduling · How-to guide

Change the embedded booking form width and layout

Pixie CRM guidance. Follow the route for your workspace, check your role and enabled modules, and verify the result before moving on.

Adjust the iframe-friendly public form container so it fits the website column without altering appointment logic.

Audience: Staff who manage appointmentsFeature: Embed layoutModule v1.3.6

Jump to steps

Where to goAppointments > Booking Form > Embed code

Before you startThis guide follows the supplied Pixie CRM Appointments & Scheduling module version 1.3.6. The relevant access is Appointments: View. A menu, button, provider, time slot or client action can remain hidden when the signed-in user lacks the required permission, the module setting is disabled, the related record is in an ineligible state, or availability validation rejects the request.

What you’ll accomplish

Adjust the iframe-friendly public form container so it fits the website column without altering appointment logic. It uses Pixie CRM's permission-aware appointment, availability, status and integration flow rather than an unconnected diary entry.

How it works

The public view accepts a supported width parameter and maps it to its Bootstrap-style container presentation.

The parameter changes layout only; service, provider, availability and submission rules remain server-controlled.

The parent website must still allocate enough iframe width and height.

Follow these steps

Identify the available width in the parent website.
Go to the booking form embed URL with the supported width parameter.
Adjust the iframe's responsive CSS.
Test common desktop, tablet and mobile sizes.
Verify all fields, date controls and validation remain usable.

Settings to check

Form widthContainer behaviour inside the booking page.

iframe widthParent-page CSS controlling the embedded frame.

iframe heightSpace required to avoid clipped content.

Responsive testVerification across device widths.

Check it worked

After this workflow completes, Pixie CRM keeps the appointment and its supported relationships connected. Reopen the appointment and verify the saved status, date, timezone, customer or lead, service, provider, attendees, reminder state, calendar or meeting reference, invoice reference and history that apply to this feature. External email, SMS, Google, Microsoft or payment outcomes must be checked separately from the Pixie CRM database save.

Open the saved appointment and confirm the final status and source.
Check the participant, provider, timing and timezone from the full detail page.
Review the relevant table filter, calendar, history, report or linked invoice instead of relying only on a success message.

Common mistakes to avoid

Do not use a narrow fixed width on mobile.
Ensure the submit button and reCAPTCHA remain visible.
Layout changes must not hide terms or validation messages.
Use the least destructive correction and retain the appointment history when the booking existed operationally.
Never bypass a permission, availability, approval, client-access or verification control by changing an unrelated route or setting.

Scheduling and data safetyAppointment changes can notify customers, reserve provider time, update remote calendars, create meeting links or invoices and alter reports. Confirm the exact record, timezone, status and recipients before saving.

Browse connected topics:booking form customers scheduling invoice payment check report approval appointment service provider availability reminders feedback

Was this guide useful?Your response is stored only in this browser.

Change the embedded booking form width and layout

What you’ll accomplish

How it works

Follow these steps

Settings to check

Check it worked

Common mistakes to avoid

Related guides