Britixo CRMBritixo CRMEnterprise Help Centre
Ctrl K
Appointments & Scheduling · How-to guide

Change the embedded booking form width and layout

Adjust the iframe-friendly public form container so it fits the website column without altering appointment logic. The guide then takes you through the correct route, the checks to complete before making changes, the workflow in order, and the evidence to review afterwards.

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 Britixo 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 Britixo's permission-aware appointment, availability, status and integration flow rather than an unconnected diary entry.

How the module flow 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

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

Fields and decisions to review

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.

How to confirm it worked

After this workflow completes, Britixo 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 Britixo 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.

Controls, checks and common mistakes

  • 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 formcustomersschedulinginvoicepaymentcheckreportapprovalappointmentserviceprovideravailabilityremindersfeedback
Embed the appointment booking form on a websiteCustomise the booking form heading and descriptionEnable booking terms and conditionsPublic booking form overviewChoose services shown on the public booking formAllow guest appointment bookingEnable the client-area booking linkShow provider email or phone on the public form