Brand colours & fonts
Match the widget to your brand with four top-level options — no theme object required.
The fastest way to brand the widget is with four top-level config options. No nested theme object, no token names to learn.
MedosBooking.init({
apiKey: "mk_your_publishable_key",
mode: "inline",
containerId: "medos-booking",
primaryColor: "#4f46e5",
secondaryColor: "#6366f1",
borderRadius: 12,
fontFamily: "'Inter', sans-serif",
fontUrl:
"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
});Try them live in the Playground.
The options
| Option | Accepts | Applies to |
|---|---|---|
primaryColor | Any CSS colour | Primary buttons, active states, focus rings, selected slots |
secondaryColor | Any CSS colour | Secondary accents |
borderRadius | Number (px) or CSS length | Cards, inputs, buttons |
fontFamily | CSS font stack | All widget text |
fontUrl | Stylesheet URL | Loads a webfont so fontFamily resolves |
Hover and active shades are automatic
Pass one colour and the widget derives its own hover and pressed shades by darkening it. You don't need to specify them.
MedosBooking.init({
apiKey: "mk_your_publishable_key",
// hover and pressed shades are derived from this automatically
primaryColor: "#4f46e5",
});Use hex for automatic shading
Shade derivation works on 6-digit hex values (#4f46e5). Other formats —
rgb(), hsl(), named colours — are applied as-is, but hover and active
states will fall back to the theme's own values. Use hex if you want the
full effect.
Fonts
fontFamily sets the CSS font stack. If that font isn't already loaded on
your page, pair it with fontUrl and the widget will inject the stylesheet
for you.
MedosBooking.init({
apiKey: "mk_your_publishable_key",
fontFamily: "'Poppins', sans-serif",
fontUrl:
"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap",
});Two notes:
- Skip
fontUrlif your site already loads the font. The widget will use the font already available, and you avoid a duplicate request. - The stylesheet is injected once, deduped by URL, so re-initialising
the widget won't stack duplicate
<link>tags.
Combining with a built-in theme
These options layer on top of whatever theme you pass, and they win on
conflict. That makes "start from a built-in theme, change one thing" a
one-liner:
MedosBooking.init({
apiKey: "mk_your_publishable_key",
mode: "modal",
theme: "modern", // navy + coral base
primaryColor: "#be123c", // …but make the primary rose
});Everything else — backgrounds, borders, text, spacing, shadows — stays as
the modern theme defines it.
Keep these at the top level
These four keys go next to apiKey, not inside theme. Nesting them
inside a theme object has no effect, and the widget logs a console warning
telling you which keys were ignored.
MedosBooking.init({
apiKey: "mk_your_publishable_key",
+ theme: "modern",
+ primaryColor: "#be123c",
- theme: { primaryColor: "#be123c" },
});When to use a full theme instead
The four shortcuts cover most branding. Reach for a custom theme object when you need to control backgrounds, borders, text colours, semantic states, spacing, or typography scale individually.