Skip to main content

Quick-Start badge

Open Finance Offer Summary Settings from App → Features → Finance offer summary cog. Expand Quick-Start (badge) overrides. That accordion is the live merchant chrome for the floating storefront badge.

Subtitle: Per-merchant overrides for the floating Quick-Start badge. ⓘ What does the Quick-Start tile do?

The Badge column on the Finance offer summary feature tile turns the overlay on. It does not need a mount div. It can run alongside or instead of the standard Embed mount.

Click the merchant chrome​

  1. Tick lender(s) in the Badge column on the Finance offer summary feature tile, then Save features. If none are ticked (or the badge is off): Badge currently disabled. Tick lender(s) in the Badge column of the Finance offer summary feature tile to enable the floating Quick-Start badge for this merchant. Empty preview: Enable at least one lender in the Badge column to preview the Quick-Start badge. Missing builder: Quick-Start preview unavailable (builder script not loaded).
  2. Open Finance Offer Summary Settings → Quick-Start (badge) overrides.
  3. Set Style and Shape under Badge. Hint: Colourway and shape — inherits lender design tokens unless overridden here. Options: Style 1 / Style 2 / Style 3, and Badge (2 rounded top corners) vs Pill (4 rounded corners).
  4. Set Orientation: Horizontal badge or Vertical badge. Hint: Default badge orientation on the storefront unless a breakpoint overrides it.
  5. Set Default position (Y/X anchors and offsets per orientation). Hint: Anchor and offset per orientation. Highlighted card matches orientation above.
  6. Set Stacking → Z-index.
  7. Under Responsive breakpoints, click + Add position breakpoint for a viewport override. Hint: Override style, shape, orientation or position at specific viewport widths.
  8. Watch Default preview (Uses your style, orientation and position defaults.).
  9. Save settings at the bottom (label does not change). Footer starts as Edit settings to update finance offer summary behavior. Busy: Saving.... Success: Saved to runtime config + merchant profile.

This accordion does not control badge text, colours, font, or small-logo — those stay on Lender settings → Quick-Start. FOS settings.

Responsive row​

Each + Add position breakpoint row:

  • Lead: When viewport width is
  • Mode: equal to or less than, equal to or more than, strictly less than, strictly greater than
  • Width: Breakpoint width in CSS pixels
  • Remove: Remove breakpoint (title Remove this breakpoint)
  • Caption: Override on this breakpoint (blank fields inherit)
  • Fields: Badge style, Badge shape, Orientation, Y anchor, X anchor, Y offset (px), X offset (px)
  • Options include Horizontal, Vertical, Inherit, Style 1 / Style 2 / Style 3, Badge, Pill, Top / Middle / Bottom, Left / Centre / Right
  • Offset placeholders: inherit

Click behaviour​

Clicking the badge on the storefront opens the same lender chooser as the Finance offer summary Learn more link. When only one lender is enabled in the Badge column, that lender’s feature (calculator, modal, or Finance Assistant) launches directly, with no chooser.

Single-lender vs multi-lender​

Badge columnDesign
One lender tickedThat lender’s Quick-Start design from Lender settings → Quick-Start (colours, font, optional small logo).
Two or more lenders tickedFinMatch-branded base badge, so no single lender’s brand is favoured.

The merchant Quick-Start tile’s style / shape / orientation / position / z-index fields apply in both cases.

Lender accordion​

On Lender settings → Quick-Start, this accordion authors the per-lender design used when this lender (and only this lender) is enabled on a merchant’s Badge column. Configure badge text, logo source, shape override, text colour scheme, and colour overrides per orientation for Style 1 / 2 / 3 colourways.

Default badge colours (badge1Bg, badge1TextColor, badge2Bg, badge2TextColor, badgeFontFamily, badgeCornerRadius1, badgePillRadius2, …) come from the lender Styling accordion. The per-orientation overrides on Quick-Start tweak them for one orientation or slot without forking global styling.

Merchant overrides​

On the merchant Quick-Start chrome you can override:

  • position
  • orientation (horizontal / vertical)
  • badge type (1 or 2)
  • responsive position breakpoints

Defaults come from the lender’s own Quick-Start accordion.

Styles vs shapes​

Style 1 / 2 / 3 are colourways (badge1Bg, badge2Bg, badge3Bg). Each style tab can override text, logo source, shape, and colours independently per orientation.

Shape is independent of colourway:

  • badge — two rounded top corners (badgeCornerRadius1)
  • pill — four rounded corners (badgePillRadius2)

Lender Styling → Quick-Start badge styling sets Small / Medium / Large (labels show approximate W × H for typical copy). Merchants inherit that size; they cannot add custom sizes.

Two shared text colour schemes (badge1TextColor, badge2TextColor) — each style tab picks scheme 1 or 2 unless overridden.

Lender defaults​

Lender Quick-Start accordion sets the default orientation and per-orientation position (Y anchor + offset, X anchor + offset). Horizontal usually wants bottom-right (chat-bubble); vertical usually wants middle-right. Merchants override on the Quick-Start tile, including responsive position breakpoints (same pattern as Pay Monthly responsive styles).

Badge template text​

Short text only. The badge is small storefront furniture, not a marketing line.

Allowed token: the FLEXIBLE FINANCE placeholder (renders as FLEXIBLE FINANCE). Use the same token as the non-regulated FOS template. Learn-more is not a badge token — the badge itself is the click target. APR / monthly / max-limit tokens are forbidden (a badge is a discovery surface, not a compliant finance offer line).

Counted against the same 80-character ceiling as the other templates. In practice keep it to a few words so it fits the badge across viewports.