Layout modes: tabs, stack, single, dropdown, floating, grid

CalcWidgets has six layout modes, controlled by the view= parameter on your embed URL or by the layout picker on the Embed page in your dashboard.

tab (default)

Horizontal tabs across the top. Click a tab to switch to that calculator without scrolling.

• Best for: 2–6 calculators
• Embed: ?view=tab
• Visual: Standard tabbed UI — first calculator active by default

?widgets=loan-repayment,stamp-duty,lmi&view=tab

stack

All selected calculators stacked vertically with headers between them.

• Best for: 2–3 calculators on a long page where visitors might scroll through anyway
• Embed: ?view=stack
• Pros: Print-friendly, all visible at once
• Cons: Takes a lot of vertical space

?widgets=loan-repayment,extra-repayment&view=stack

single

Only the first calculator in your widgets= list. Auto-selected when you only specify one calculator.

• Best for: A dedicated landing page for one specific tool
• Embed: ?view=single
• Tip: Even if you list multiple calculators, only the first renders

?widgets=budget-planner&view=single

dropdown

A dropdown selector at the top, single calculator below.

• Best for: 7+ calculators where tabs would overflow, or space-constrained embeds (mobile, sidebar)
• Embed: ?view=dropdown
• Pros: Clean UX even with many calculators

?widgets=loan-repayment,refinance,offset,extra-repayment,split-loan&view=dropdown

floating

A fixed button anchored to the bottom-right of every page. Clicking it opens the calculator overlay.

• Best for: Site-wide access without redesigning any of your pages
• Embed: ?view=floating (the embed code is slightly different — see the floating widget guide)
• Pros: One paste and it's on every page

grid

A grid of clickable calculator cards. Click a card to expand it.

• Best for: A dedicated "Calculators" or "Tools" page with many calculators (10+)
• Embed: ?view=grid
• Visual: Discovery-style picker, great when visitors don't know exactly what tool they need

?widgets=loan-repayment,stamp-duty,lmi,offset,refinance,extra-repayment&view=grid

Which one should I use?

You have…	Use…
1 calculator	single
2-6 calculators on a focused page	tab
2-3 calculators on a long content page	stack
7+ calculators on a normal page	dropdown
Want it on every page of your site	floating
A dedicated "all our tools" page	grid

Setting a default layout

If you don't want to specify view= on every embed, set a default on Dashboard → Branding under "Default layout". Any embed without an explicit view= falls back to that default.