Customization
Works with any theme
The public widget ships with scoped CSS (no jQuery, no global resets leaking into your theme’s styles). It renders inside whatever container holds the shortcode, inheriting page-level width and typography.
Tested themes: Twenty Twenty-Four, Astra, GeneratePress, Blocksy, Hello Elementor, Kadence. If you hit a visual conflict in a different theme, see the FAQ.
Form theme picker
Under Booking Manager → Settings → General → Form appearance:
- Six preset palettes — Forest (default), Ocean, Sunset, Lavender, Rose, Slate. Each is shown as a clickable swatch card with the accent colour preview.
- Custom hex — a seventh card with a native colour picker. Pick any 6-digit hex (
#3b82f6etc.) and the widget repaints the next time it loads on a public page.
The picked theme only colours the public booking widget — the WordPress admin always uses the default Forest accent regardless of pick. Calendar day-status colours (green = open, yellow = busy, red = full) and the “Available” badge stay semantic regardless of theme.
What gets themed: slot-selection highlight in the public widget, selected-day border + fill in the calendar grid, primary buttons (Continue / Confirm slot) on the booker side.
Shortcode placement
[booking_manager slug="your-page-slug"]
Paste the shortcode into:
- Any page or post in the block editor (use a Shortcode block, or a Paragraph block that contains only the shortcode)
- Any page in the classic editor
- A page template override via
do_shortcode()if your theme supports it - Page builders that support shortcode blocks (Elementor, Divi, Bricks)
The widget lazy-renders: the JS bundle only loads on pages where the shortcode is present, so other pages on your site stay light.
Custom form fields as design knobs
The Form Builder (Step 1 of the page wizard) is also a customization surface — you can add institution-specific fields (project code, department, supervisor) without writing PHP or JS. Each field has a type (text, email, textarea, select, checkbox), an optional Required toggle, and (v1.4.3+) an optional Resource scope so a field can apply to just one resource.
Field labels and the page description support markdown links: [refund policy](https://example.com/file.pdf) renders as a safe target=_blank link in the public widget. URLs must start with https:// or mailto:; anything else is rendered as plain text.
See Configuration → Form builder.
Email design
booknslot ships a full email template editor (since v1.5.4). All five template kinds — OTP, booking received, approval request, approved, rejected — can be replaced wholesale.
Under Booking Manager → Settings → Notifications:
- 25 ready-made HTML presets (5 per template kind). Designs are inspired by modern transactional patterns: Stripe-style receipt tables, Linear / Notion minimal cards, boarding-pass layouts, friendly emoji callouts, formal welcome blocks. Every preset uses inline styles only and email-safe block tags so Outlook and Gmail render them correctly.
- Inline Preview / Code toggle per template — see the rendered email at the top of the editor, switch to Code to edit the raw HTML, switch back to Preview to verify your edits. No modal, no save-and-reload cycle.
- Live variable interpolation —
{booker_name},{page_name},{resource_name},{date},{slot},{booking_ref},{otp_code},{all_form_fields},{all_form_fields_html}and more are substituted in the preview using sample data, so you see exactly what the recipient gets. - CTA button shortcode —
{cta:Label|https://your-url.com}renders as a styled inline-block button. URLs must behttp(s)://ormailto:— anything else falls back to plain text on send.
Under Settings → Email delivery:
- Logo URL — when set, the email is wrapped in a branded HTML envelope with your logo at the top.
- Header colour bar — 6px coloured strip above the logo (any hex).
- Footer HTML — appears at the bottom of every email body. HTML allowed, sanitised on save.
- Email signature — under Notifications, separate from the per-template body. Appended above the footer.
Custom CSS overrides
The public widget’s root has class booknslot-public-root. If you need to push further than the form theme picker can take you, override styles on this class from your theme’s Appearance → Customize → Additional CSS:
.booknslot-public-root button.primary {
border-radius: 4px;
text-transform: uppercase;
}
Most adjustments don’t need this — the theme picker covers the common cases and the email template editor handles everything visible to bookers post-submission.
What you cannot change (by design)
- The OTP verification step. Removing it would undermine the “verified booker” guarantee that makes auto-approval trustworthy.
- The 4-step public flow. Your details → Pick a slot → Verify email → Confirmed. Well-established UX pattern, kept stable across versions.
.icsattachment format. Standards-compliant RFC 5545; the format is what calendar clients parse, not something to customise.