Web snippets — embed a calculator in your website
Updated 2026-11-13
How to place a calculator from your service inside your own web page: the 15 layouts, the embed code, the view modes, the caption switch, and how to preset input values.
What a snippet is
A web snippet is a compact view of your service that runs inside an <iframe> on any HTML page: a website, a blog post, a shop page, a wiki or documentation. It shows the inputs, the results, or both, in one of 15 layouts. You copy one line of code; there is nothing to program. The frame takes the height of the snippet by itself.
Embed a snippet
- Open your service and make sure it is published.
- Open Apps → Web Snippets (Web-Snippets) and click a layout, for example Card or Pricing Calculator.
- Use Live Preview (Live-Vorschau) to check how it looks. Next to the title you choose the view mode (All, Results, Inputs) and Caption or No Caption.
- Copy the code under iFrame Code: (iFrame-Code:) with the copy icon next to it.
- Paste the code into the HTML of your page, at the place where the calculator should appear.
The code looks like this:
<iframe src="https://spreadapi.io/app/v1/services/YOUR_SERVICE_ID/view/card?amount=1000&interactive=true&viewMode=results&nocaption=true" width="100%" height="320" frameborder="0"></iframe><script>window.addEventListener("message",function(e){var d=e.data,f=document.getElementsByTagName("iframe"),i;if(d&&d.type==="spreadapi:height"&&d.height>0)for(i=0;i<f.length;i++)if(f[i].contentWindow===e.source)f[i].style.height=d.height+"px"})</script>It has two parts: the <iframe> with the snippet, and a short <script> that keeps the frame as high as the snippet. Keep both; the section Size below explains why.
Embed URL: (Einbettungs-URL:) is the same address without the iframe around it. Use it when your website builder asks for an address instead of HTML, or open it in a browser tab to test. Show Barcode (Barcode anzeigen) gives you a QR code for this address.
The embed code reflects what you chose in the preview and under Theme. When you change the view mode, the caption switch, the theme or the default values of your inputs, copy the code again and replace it on your page.
The layouts
| Layout | What it shows | Has input fields |
|---|---|---|
| Card (Karte) | Classic card with a header; inputs above a list of results | Yes |
| Table (Tabelle) | Results as a two-column table, inputs above | Yes |
| Live Widget (Live-Widget) | Compact dashboard widget: inputs in a row with an Update button, results as large figures | Yes |
| Compact (Kompakt) | Space-saving horizontal strip that fits into running text | Yes |
| Two Column (Zwei Spalten) | Inputs on the left, results as a grid on the right | Yes |
| Stats Row (Kennzahlenzeile) | A horizontal row of figures, good for page headers | No |
| Comparison View (Vergleichsansicht) | Results side by side in columns | No |
| Status Badges (Status-Badges) | Results as badges | No |
| Calculator Panel (Rechner-Panel) | Classic calculator: an Input panel on the left, Results on the right | Yes |
| Split View (Geteilte Ansicht) | Inputs and results side by side, half and half | Yes |
| Form + Results (Formular + Ergebnisse) | A vertical form with the results below | Yes |
| Quick Converter (Schnellumrechner) | Minimal converter: fields in a row and an arrow button | Yes |
| Pricing Calculator (Preisrechner) | Price display with a Calculate Price button and a breakdown | Yes |
| Cost Estimator (Kostenschätzer) | Configuration on one side, Estimate Breakdown on the other | Yes |
| Config Builder (Konfigurator) | A configuration form with a preview of the result | Yes |
Layouts without input fields show the results for the values in the embed address. They suit fixed figures, for example a current rate or a KPI.
Every layout shows a result in the number format of its cell. An output that is a cell range is shown as a table inside the layout: each column in the number format of its cells, numbers right-aligned, and the header row as the table's header. A table on a formula that fills several cells has as many rows as the formula fills for the values of the calculation; see Add outputs. Tables suit the wider layouts, such as Card, Table or Form + Results.
View modes
| Mode | What the visitor sees |
|---|---|
| All (Alle) | Inputs and results together |
| Results (Ergebnisse) | Only the results, calculated from the values in the embed address |
| Inputs (Eingaben) | Only the input fields; after the visitor submits them, the snippet shows the results |
In Results mode with a caption, a small Edit link (Ändern) next to the title lets the visitor switch to the inputs, change values and calculate again. Without a caption, Results shows fixed figures and no link.
In Inputs mode the results replace the form after the visitor submits it. They always carry the Edit link, with or without a caption, so the visitor can go back to the form.
Layouts without input fields (Stats Row, Comparison View, Status Badges) show the results in every mode and never have an Edit link.
Caption
- Caption (Beschriftung) shows the title of the snippet, which is the name of your service.
- No Caption (Ohne Beschriftung) hides titles and headings, so the snippet blends into a page that already has its own heading. The Edit link of the Results mode is part of the title and is hidden with it.
Preset values
The embed address carries the default values of your inputs as parameters, for example ?amount=1000&rate=0.05. The snippet calculates with these values as soon as it loads.
- To start with other values, change them in the address. Use the input's name, not its title.
- Write percentages as decimals in the address:
rate=0.05for 5%. In the input field itself the visitor sees and types percent. - Give every required input a default value, or put a value into the address. If a required value is missing, the snippet shows the message of the service instead of results.
Language
Buttons and headings of a snippet follow the browser language of the visitor, like the web app: German for a German browser, English for everyone else. Titles of inputs and outputs and the caption come from your service and are shown as you wrote them.
Size
The snippet is as wide as the place you paste it into (width="100%") and adapts its layout to that width.
The height adjusts itself. The snippet tells your page how high its content is, and the <script> in the copied code sets the height of the frame to match: when the page loads, when the visitor calculates, and when the width changes. Nothing is cut off and no scrollbar appears inside the frame.
The number in height="..." is the fallback. It is used until the snippet has loaded, and it stays in force on a page that removes scripts (some website builders and mail programs do). The app fills in the height it measured in the Live Preview for the layout, view mode and caption you chose. If your page removes the script and the snippet is cut off or scrolls, raise this number; on a narrow column a snippet is taller than in the preview.
To set a fixed height on purpose, delete the <script> part and set height yourself.
Code copied before November 2026 has height="500" and no script. It keeps working as before, with a fixed height of 500 pixels; a snippet that is taller starts at its top and can be scrolled inside the frame. Copy the code again to get the automatic height.
Look and feel
The snippet uses the theme you chose under Apps → Theme, including your brand colour, button corners, background and custom theme parameters. The theme travels in the embed address, so copy the code again after you change it. An embed address without a theme shows the Default theme, the same look as in the web app and in Theme Preview. See Themes.
Limits
- The service must be published. Snippets calculate with the published version.
- Each time a snippet loads or a visitor calculates, that is one call of your service. A snippet on a busy page can use many calls; see Call limits.
- The layouts are fixed. For a layout of your own, build a page on the API: see Calling from a web page.
- App rules and custom CSS belong to the standard web app and are not applied to snippets.
- If your service requires a token, snippets are available after you created a web app token. See Who can open the app.
For developers and agents
Address:
https://spreadapi.io/app/v1/services/{serviceId}/view/{templateId}?{inputName}={value}&interactive=true| Parameter | Values | Meaning |
|---|---|---|
{templateId} (path) | card, table, liveWidget, compact, twoColumn, statsRow, comparison, statusBadges, calculator, splitView, formCard, quickTool, pricing, estimator, builder | The layout |
{inputName} | The value | One parameter per input, by input name; percentages as decimals |
interactive | true | Enables the input form; keep it as generated |
viewMode | results, inputs; omit for all | What is shown |
nocaption | true | Hides titles and headings |
theme | default, minimal, modern, purple, ocean, forest, sunset, slate, rose, sky | The theme; without it, default |
| Theme parameters | For example primaryColor=%23502D80&buttonBorderRadius=20px | Override single theme properties; a value that is not valid for its property is ignored; see Themes |
token | The web app token | Only for a service that requires a token |
Embed code:
<iframe src="YOUR_EMBED_ADDRESS" width="100%" height="500" frameborder="0"></iframe>
<script>window.addEventListener("message",function(e){var d=e.data,f=document.getElementsByTagName("iframe"),i;if(d&&d.type==="spreadapi:height"&&d.height>0)for(i=0;i<f.length;i++)if(f[i].contentWindow===e.source)f[i].style.height=d.height+"px"})</script>Height: the snippet posts { "type": "spreadapi:height", "height": <CSS pixels> } to its parent window with postMessage whenever the height of its content changes. The listener above sets the height of the iframe the message came from; one listener serves any number of snippets on a page. Without a listener the height attribute applies.
The language of buttons and headings follows the Accept-Language header of the visitor (German if it contains de, otherwise English). A submitted Inputs snippet adds back=inputs to its own address; do not set it yourself.
An unknown layout id answers with "page not found". An agent preparing embed code for a user should take the Embed URL from the app, because it already contains the default values and the theme.
FAQ
How do I put my calculator on my website?
Open Apps → Web Snippets, pick a layout, copy the code under iFrame Code: and paste it into the HTML of your page. The calculator appears where you pasted the code.
Which snippet layouts are there?
There are 15: Card, Table, Live Widget, Compact, Two Column, Stats Row, Comparison View, Status Badges, Calculator Panel, Split View, Form + Results, Quick Converter, Pricing Calculator, Cost Estimator and Config Builder. Stats Row, Comparison View and Status Badges show results only; the others also have input fields.
What do All, Results and Inputs mean?
All shows inputs and results together, Results shows only the results for the values in the address, and Inputs shows only the form and switches to the results after the visitor submits. The choice is stored in the embed code as viewMode.
How do I hide the title of the snippet?
Choose No Caption above the preview and copy the code again. The code then contains nocaption=true, which hides titles and headings.
How do I change the size of the embedded calculator?
You do not need to: the frame takes the height of the snippet by itself, and the snippet adapts to the width of the place you paste it into. To set a fixed height, delete the <script> part of the code and change height, for example height="320".
The embedded calculator is cut off or has a scrollbar. What do I do?
Copy the code from Apps → Web Snippets again and paste all of it, including the <script> part: it keeps the frame as high as the snippet. If your page removes scripts, raise the number in height="..." until the snippet fits.
In which language does a snippet appear?
Buttons and headings follow the browser language of the visitor: German for a German browser, English otherwise. Titles of inputs and outputs are shown as you wrote them in your service.
How do I preset values in a snippet?
Add or change the input parameters in the embed address, for example ?amount=2500. Use the input's name, and write percentages as decimals such as 0.05.
I changed the theme, but the snippet on my website looks the same. Why?
The theme is part of the embed address. Copy the code from Apps → Web Snippets again and replace the old code on your page.
Does a snippet work in WordPress or another website builder?
A snippet works in any page that accepts HTML with an <iframe>. Paste the iframe code into an HTML block; if the builder asks for an address only, use the Embed URL.
The snippet shows a message instead of results. What do I do?
The service refused the values, most often because a required input has no value. Give the input a default value or add it to the embed address, then copy the code again.
As an agent, how do I build the embed address for a layout?
Use https://spreadapi.io/app/v1/services/{serviceId}/view/{templateId} and add one query parameter per input plus interactive=true, and optionally viewMode, nocaption=true and theme. Wrap it in <iframe src="..." width="100%" height="500" frameborder="0"></iframe> and add the resize script from the section for developers, so the frame follows the height of the snippet.