Was das Rechner-Widget ist
Ein Rechner-Widget ist eine kleine, in sich geschlossene Version eines vollständigen Calculate.Studio-Rechners, die innerhalb Ihrer eigenen Seite läuft. Technisch handelt es sich um ein iframe – ein HTML-Element, das eine Seite in eine andere einbettet –, das auf eine schlanke Embed-Version des Rechners verweist, plus einen einzeiligen Credit-Absatz darunter. Das iframe ist ein Standard-HTML-Element, das von jedem modernen Browser unterstützt wird, sodass nichts installiert werden muss und nichts mit dem eigenen Code Ihrer Website in Konflikt geraten kann.
Das Widget ist derselbe Rechner, der auch auf Calculate.Studio läuft: dieselben geprüften Formeln, dieselben sofortigen clientseitigen Ergebnisse und, bei Gesundheits- und Finanz-Tools, derselbe Haftungsausschluss. Ihre Besucher geben ihre Zahlen ein und sehen die Ergebnisse sofort, ohne Ihre Seite zu verlassen. Da die Berechnung im Browser des Besuchers und nicht auf einem Server erfolgt, bleibt das Widget auch bei hohem Traffic schnell, und es werden keinerlei Besucherdaten irgendwohin gesendet.
Jeder der 210 Rechner auf der Website kann eingebettet werden. Die Galerie unter calculate.studio/en/widgets zeigt die meistgefragten – darunter BMI, Hypothek, Kredit, Prozent, Zinseszins, Alter, Kalorien und Notendurchschnitt (GPA) – und jede einzelne Rechnerseite hat neben den Teilen-Schaltflächen eine Embed-Schaltfläche, die das Snippet für genau dieses Tool anzeigt.
So installieren Sie es – die allgemeine Methode
Die Installation erfolgt durch einmaliges Kopieren und Einfügen. Das Snippet besteht aus zwei Teilen: dem iframe, das den Rechner anzeigt, und einem kleinen Credit-Absatz, der auf den vollständigen Rechner und auf Calculate.Studio verweist. Diese Credit-Zeile beizubehalten ist die einzige Bedingung der kostenlosen Nutzung – sie ist es, die das Programm für alle kostenlos hält.
- Öffnen Sie calculate.studio/en/widgets, oder öffnen Sie eine beliebige Rechnerseite und klicken Sie auf die Schaltfläche </> Embed.
- Klicken Sie auf Code kopieren. Das Snippet wird in Ihre Zwischenablage kopiert.
- Wechseln Sie in Ihrem Website-Editor zur HTML-Ansicht (manchmal auch „Code”- oder „Quelltext”-Ansicht genannt) der Seite, auf der der Rechner erscheinen soll.
- Fügen Sie das Snippet an der Stelle ein, an der der Rechner erscheinen soll, und speichern und veröffentlichen Sie die Seite anschließend.
- Sehen Sie sich die Seite in der Vorschau an. Der Rechner sollte sofort laden und berechnen – testen Sie ihn einmal mit Beispielzahlen.
Plattformspezifische Anleitungen
Die meisten Website-Baukästen akzeptieren rohes HTML über einen eigenen Block oder ein eigenes Element, sodass dasselbe Snippet überall funktioniert. Die Bezeichnungen unterscheiden sich je nach Plattform:
| Plattform | Wohin Sie das Snippet einfügen |
|---|---|
| WordPress (Block-Editor) | Fügen Sie einen „Benutzerdefiniertes HTML”-Block hinzu und fügen Sie das Snippet dort ein. |
| WordPress (klassischer Editor) | Wechseln Sie im Editor-Tab von „Visuell” zu „Text” und fügen Sie ein. |
| Wix | Fügen Sie ein „HTML einbetten”-Element hinzu (Hinzufügen → Code einbetten → HTML einbetten) und fügen Sie ein. |
| Squarespace | Fügen Sie dem Seitenabschnitt einen „Code”-Block hinzu und fügen Sie ein. |
| Shopify | Klicken Sie im Seiten- oder Blogbeitrags-Editor auf die Schaltfläche <> (HTML anzeigen) und fügen Sie ein. |
| Webflow | Fügen Sie eine „Embed”-Komponente hinzu und fügen Sie ein. |
| Einfache HTML-Website | Fügen Sie das Snippet direkt in den HTML-Code der Seite ein, an der Stelle, an der der Rechner dargestellt werden soll. |
Größe, Styling und Performance
Das Snippet wird mit sinnvollen Standardwerten ausgeliefert: volle Breite (width="100%"), eine feste Höhe passend zur Anzahl der Eingabefelder dieses Rechners und ein dezenter, abgerundeter Rahmen. Sie können den Höhenwert ändern, falls Ihr Theme einen höheren oder niedrigeren Rahmen benötigt, und Sie können das Rahmen-Styling anpassen oder entfernen, um es an Ihr Design anzugleichen. Die Breite ist standardmäßig responsiv, sodass das Widget ohne zusätzlichen Aufwand auch auf Smartphones funktioniert.
Das iframe enthält loading="lazy", ein Standard-Browserattribut, das das Laden des Widgets verzögert, bis der Besucher in dessen Nähe scrollt. Das bedeutet, dass das Einbetten eines Rechners die anfängliche Ladezeit Ihrer Seite praktisch nicht erhöht – der Browser lädt das Widget erst, wenn es kurz davor ist, sichtbar zu werden.
Die Embed-Seiten selbst sind mit noindex gekennzeichnet und verweisen über einen kanonischen Link auf die vollständige Rechnerseite, was den Google-Richtlinien für eingebettete und doppelte Inhalte entspricht. Das Einbetten eines Widgets kann daher weder für Ihre noch für unsere Website Probleme mit doppeltem Inhalt (Duplicate Content) verursachen.
Die eine Regel: den Credit-Link behalten
Das Widget-Programm ist ohne Anmeldung kostenlos, weil eine einzige Bedingung gilt: Der kleine Credit-Absatz unter dem iframe – die Zeile „[Calculator name] by Calculate.Studio” – muss erhalten bleiben. Es handelt sich um 12 Pixel großen Text, der dezent unter dem Widget steht und nicht mit Ihrem Inhalt konkurriert.
Es steht Ihnen frei, das iframe in der Größe anzupassen, seinen Rahmen umzugestalten und das Widget an beliebiger Stelle auf Ihrer Website zu platzieren – auch auf kommerziellen Websites, Blogs und Kundenprojekten. Falls Sie einen Rechner benötigen, der nicht in der vorgestellten Galerie enthalten ist: Jede Rechnerseite auf der Website hat ihre eigene Embed-Schaltfläche, sodass alle 210 Tools verfügbar sind.
Welche Rechner eignen sich am besten als Widgets?
Das beste Widget für Ihre Website ist jenes, für das Ihre Leser Ihre Seite sonst verlassen müssten. Fitness- und Wellness-Blogs betten typischerweise den BMI-, Kalorien- oder TDEE-Rechner ein. Immobilien- und Privatfinanz-Websites betten den Hypotheken-, Kredit- und Zinseszinsrechner ein. Studien- und Bildungs-Websites betten den Notendurchschnitts- (GPA) und Prozentrechner ein, und allgemeine Blogs fügen evergreenen Beiträgen häufig den Altersrechner hinzu.
Da jedes Widget eine kompakte Version des Rechners mit einem Link zur vollständigen Version zeigt – die Interpretationstabellen, durchgerechnete Beispiele und Quellen enthält –, erhalten Ihre Leser auf Ihrer Seite eine sofortige Antwort und bei Bedarf einen Zugang zu weiterführendem Kontext.
Häufig gestellte Fragen
Ist das Rechner-Widget wirklich kostenlos?
Ja. Es gibt keine Anmeldung, keinen API-Schlüssel, kein Nutzungslimit und keine Kosten. Die einzige Bedingung ist, dass die kleine Credit-Zeile unter dem Widget, die zu Calculate.Studio verlinkt, erhalten bleibt.
Verlangsamt das Widget meine Website?
Nein. Das iframe nutzt das native Lazy Loading des Browsers, sodass es erst geladen wird, wenn ein Besucher in seine Nähe scrollt, und die Berechnung läuft vollständig im Browser des Besuchers ab. Es erhöht Ihre anfängliche Seitenladezeit praktisch nicht.
Kann ich einen Rechner auf einer kommerziellen Website oder einer Kundenwebsite einbetten?
Ja. Die Widgets dürfen kostenlos auf kommerziellen Websites, Blogs und Kundenprojekten verwendet werden, sofern der Credit-Link unter dem Widget erhalten bleibt.
Kann ich die Größe oder den Rahmen des Widgets ändern?
Ja. Sie können die Höhe und das Rahmen-Styling des iframes anpassen, um es an Ihre Website anzugleichen. Die Breite ist bereits responsiv (100 %), sodass sie sich automatisch an Smartphones und schmale Spalten anpasst.
Verursacht das Einbetten des Widgets Duplicate-Content-Probleme für die SEO?
Nein. Die Embed-Seiten sind mit noindex gekennzeichnet und verweisen über einen kanonischen Link auf die vollständige Rechnerseite, was den dokumentierten Google-Richtlinien entspricht, sodass Suchmaschinen das Widget nicht als doppelten Inhalt auf Ihrer Website werten.
Quellenangaben
- MDN Web Docs — <iframe>: The Inline Frame element. Mozilla Developer Network. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
- MDN Web Docs — Lazy loading (loading attribute). Mozilla Developer Network. https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
- Google Search Central — Consolidate duplicate URLs with canonicals. Google. https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls
- Google Search Central — Block search indexing with noindex. Google. https://developers.google.com/search/docs/crawling-indexing/block-indexing
- WHATWG HTML Living Standard — The iframe element. https://html.spec.whatwg.org/multipage/iframe-embed-object.html