Branding your embedded widgets

Every Marketli widget you embed on your own website (booking, contact and enquiry forms, the chat bubble, the referral form and the testimonial carousel) can render in your website's brand instead of the default Marketli styling. Visitors see one consistent site; the leads and bookings still land in Marketli exactly as before.

There are two ways to set it up. If you do nothing, the widgets keep their current look.

Option 1: set it once in Marketli

1. Open Company from the left navigation and choose Edit company details.
2. Find Embedded widget branding.
3. Set any of the four fields:
   • Widget primary colour: buttons and highlights inside the widgets.
   • Widget secondary colour: soft accent surfaces.
   • Widget font: a Google Fonts family name, exactly as it appears on fonts.google.com (for example, Figtree).

One note on fonts: they are served by Google Fonts, so when a font is set, visitors' browsers connect to Google to fetch it.

• Widget corners: how rounded buttons and fields are.

4. Save. Every widget embedded with your company slug picks the tokens up on its next load, on every site it's embedded on.

You don't need to fill in all four. Anything you leave blank keeps its default styling.

Option 2: pass the brand from the page itself

Each embed snippet also accepts optional attributes, which win over the company-level settings. This suits a web developer wiring the widgets into a site's own design system:

• data-primary: a hex colour like #0a2540
• data-secondary: a hex colour
• data-font: a Google Fonts family name
• data-radius: a number of pixels (0 to 32), or none, sm, md, lg, xl

Add them to the same script tag you already use, for example:

<script src="https://marketli.app/embed-form-widget.js" async
        data-company-slug="your-company"
        data-form-id="..."
        data-primary="#0a2540"
        data-font="Figtree"
        data-radius="8"></script>

Sites built by Marketli do this automatically: their embed components read the site's own palette and font and pass them along, so the widgets match the site by construction.

Good to know

• Text stays readable by measurement. For any colour you choose, the widget measures whether white or near-black text contrasts better on it and uses that. A pale brand colour will never produce white text on a white button.
• Values are strictly validated. Colours must be 3 or 6 digit hex values, fonts must be plain Google Fonts family names, and the corner radius is capped. Anything else is ignored and the default styling is used instead.
• Fonts load from Google Fonts with a standard fallback, so if a font name is misspelled or fails to load, the widget just uses its default typeface.
• The chat bubble colour is separate. The bubble itself still follows the colour in the chat widget setup; the widget branding themes the conversation panel and text inside.