3D-Druck-Angebots-Widget einbetten

Integrieren Sie die leistungsstarke 3D-Angebotsberechnungs-Engine von Quote3D direkt in Ihre eigene Website oder eCommerce-Plattform.

Überblick

Das Quote3D Embed Widget ist eine No-Code/Low-Code-Lösung, mit der Sie Ihren Kunden sofortige 3D-Druckangebote auf jeder Website anbieten können. Egal, ob Sie eine benutzerdefinierte Website, WordPress oder Shopify verwenden, Sie können die Lücke zwischen der Anzeige von 3D-Modellen und der Auftragserteilung nahtlos schließen.

Hauptmerkmale

3D-Modell-Viewer: Interaktive Vorschau hochgeladener STL-, OBJ-, 3MF- und STEP-Dateien.
Sofortige Preisberechnung: Automatisierte Kostenkalkulation basierend auf Ihren eigenen Material- und Druckerprofilen.
Multi-Technologie: unterstützt FDM, SLA, SLS, SLM und MJF, jeweils mit eigener Berechnungslogik.
Benutzerdefinierte Designs: Passen Sie das Erscheinungsbild an Ihre Markenästhetik mit Glassmorphismus und benutzerdefinierten Farbpaletten an.
Konfiguration nicht erforderlich für Kunden: Ihre Kunden müssen keine technischen Slicing-Details kennen; alles wird von Quote3D übernommen.
Plattform-Plugins: installierbare Pakete für WooCommerce, PrestaShop, OpenCart, Magento und Wix sowie fertiger Code für Shopify, Webflow und Framer.
Formulare Einfach und Erweitert: Fragen Sie statt Slicer-Einstellungen nur Druckqualität und Festigkeit ab, zeigen Sie alle Druckeinstellungen oder lassen Sie jeden Kunden zwischen beiden wechseln. Festgelegt im Widget-Editor oder mit der SDK-Option mode.

Was Sie tun können

Echtzeit-eCommerce-Synchronisierung: Verwenden Sie 'In den Warenkorb'-Ereignisse, um Angebote direkt mit dem Warenkorb Ihres Shops zu verknüpfen.
Automatisierte Lead-Generierung: Erfassen Sie Kundenanforderungen und Modelldaten automatisch.
Thumbnail-Generierung: Erfassen und speichern Sie automatisch Modell-Screenshots für die Fertigungsnachverfolgung.
Flexible Weiterleitungen: Leiten Sie Kunden nach einer erfolgreichen Berechnung auf eine bestimmte Landingpage weiter. Das Weiterleitungsziel muss eine http- oder https-URL sein.

Erste Schritte

Bereit zur Integration? Sie können Ihr Widget-Theme, die Sprache, die Farbe, das Weiterleitungsverhalten und die Sitzungsdauer direkt über Ihr Dashboard anpassen und dann den Einbettungscode oder die Plattform-Snippets generieren, die Sie benötigen.

Zu den Widget-Einstellungen

Hinweis zur Preisgestaltung

WooCommerce, PrestaShop, OpenCart, Magento und Wix: Das Paket liest jedes Angebot auf Ihrem Server erneut von der Quote3D-API und legt es zu diesem Preis in den Warenkorb, sodass Kunden ihn nicht ändern können. Shopify ohne Plus bepreist nur über das Produkt, daher wird das Angebot zur Menge eines Produkts mit Stückpreis; prüfen Sie bei jeder Bestellung die Angebots-ID. Webflow, Framer und Squarespace haben keinen Warenkorb, den das Widget erreichen kann. In jedem Fall muss die Währung Ihrer Quote3D-Preiseinstellungen der Shopwährung entsprechen. Quote3D rechnet in TRY, USD, EUR, GBP, JPY, CNY, RUB, CAD, AUD, CHF, SEK, NOK, DKK, SGD, HKD, NZD, MXN, BRL, INR.

Plattform-Integrationen: WooCommerce, Shopify, PrestaShop, OpenCart, Magento und mehr

Das Widget läuft auf jeder Website. Für diese Plattformen bieten wir installierbare Pakete oder fertigen Code; was mit dem Warenkorb passiert, unterscheidet sich je nach Plattform:

WooCommerce 3D-Druck-Angebot-Plugin

Installieren Sie das PHP-Plugin, fügen Sie Ihren Widget-Token ein und wählen Sie das WooCommerce-Produkt, als das Angebote in den Warenkorb gelegt werden (ein einfaches Produkt mit regulärem Preis, 0 ist möglich). Klickt ein Kunde auf „In den Warenkorb“, prüft das Plugin Preis und Menge über die Quote3D-API und legt das Angebot mit Datei, Material und Vorschau als Line-Item-Meta in den WooCommerce-Warenkorb – ein manuelles Überschreiben des Preises ist nicht erforderlich. Mit einem Server-Token (bleibt auf Ihrem Server, nie in Seiten) fügt es WordPress zusätzlich ein Quote3D-Menü hinzu: Tarif und verbleibende Limits, alle Angebote, die daraus entstandenen Bestellungen sowie tägliche bis jährliche Berichte. Warenkorb und Bestellungen bleiben in der eigenen Datenbank des Shops; Quote3D liefert nur Tarif, Limits und die Anzahl der Angebote.

Shopify-Block für 3D-Druck-Angebote

Fügen Sie der Produktvorlage eines „3D-Druck“-Produkts mit Stückpreis einen Custom-Liquid-Block mit unserem Code hinzu. Shopify übernimmt den Preis aus dem Produkt, und nur Shopify Plus kann ihn überschreiben; daher wird das Angebot als Menge dieses Produkts hinzugefügt (ein Angebot über 45,99 wird bei einem Produkt zu 1,00 zu 46 × 1,00). Die Bestellung enthält die Angebots-ID und den Angebotspreis, sodass Sie beides vor dem Druck prüfen können. Eine optionale Änderung an der Warenkorbvorlage Ihres Themes zeigt das Vorschaubild des Modells in der Position; im Checkout bleibt das Produktbild.

Andere Plattformen und benutzerdefinierte Stacks

Wix: ein Velo-Paket, das den Angebotspreis im Backend Ihrer Website prüft und in den Wix-Stores-Warenkorb legt (Premium-Tarif; nutzt das eCommerce Catalog Service Plugin von Wix, derzeit in der Beta). Die Warenkorbposition zeigt das Bild des Trägerprodukts, nicht das Vorschaubild des Modells: Wix akzeptiert nur Bilder aus seinem Media Manager.
Squarespace: Binden Sie das Widget mit einem Code Block ein. Squarespace hat keine Warenkorb-API, daher laufen Bestellungen über Angebotsanfrage, Rechnung oder Zahlungslink.
PrestaShop 8: ein installierbares Modul, das den Angebotspreis auf Ihrem Server prüft und das Angebot in den Warenkorb legt, mit dem Quote3D-Backoffice unter Sell: Angebote, Produktionswarteschlange, Farbbestand, Berichte, Modell-Downloads und Einstellungen.
OpenCart 3.0, 4.0.2.2+ und 4.1: eine installierbare Erweiterung, die den Angebotspreis auf Ihrem Server prüft und das Angebot in den Warenkorb legt, mit einem Quote3D-Menü im Admin: Angebote, Produktionswarteschlange, Farbbestand, Berichte, Modell-Downloads und Einstellungen.
Magento Open Source / Adobe Commerce 2.4: ein Modul, das den Angebotspreis auf Ihrem Server prüft und das Angebot in den Warenkorb legt, mit einem Quote3D-Menü im Admin: Angebote, Produktionswarteschlange, Farbbestand, Berichte, Modell-Downloads und Einstellungen.
Webflow: Binden Sie das Widget mit einem Code-Embed-Element ein. Angebote können nicht in den Webflow-Ecommerce-Warenkorb gelegt werden.
Framer: eine React-Code-Komponente für das Widget. Framer hat keinen eingebauten Warenkorb.
Individuelle Software: Kann mit dem JS SDK in jedes React-, Vue- oder Vanilla JS-Projekt integriert werden.

Technisches Funktionsprinzip

Das Quote3D Widget funktioniert als leistungsstarkes Iframe oder ein modernes JS SDK. So funktioniert es:

Isolierter Betrieb: Das Widget läuft in einer eigenen geschützten Zone (Iframe), wodurch der Stil Ihrer Website nicht beeinträchtigt wird.
Echtzeit-Kommunikation: Das Widget überträgt Berechnungsergebnisse über die 'postMessage'-API an Ihre Seite. Wenn Sie das SDK verwenden, werden Ereignisse nur an den Origin gesendet, der das Widget eingebettet hat, anstatt an alle Listener ausgestrahlt zu werden.
Automatische Größenanpassung: Bei Verwendung des SDK passt das Widget seine Höhe automatisch an den Inhalt an.

Mit der API neben dem Widget arbeiten

Das Widget wickelt seinen API-Verkehr intern ab — diese Routen rufen Sie nicht selbst auf. Wenn Sie dieselben Daten aus eigenem Code lesen oder verarbeiten möchten, nutzen Sie die öffentlichen v2-Endpunkte aus den Kernkonzepten, gerichtet an https://api.quote3d.com/v2 mit einem echten API-Bearer-Token statt einer Token-ID. Um darauf zu reagieren, dass ein Käufer ein konfiguriertes Teil in den Warenkorb legt, abonnieren Sie den Webhook widget.added_to_cart, anstatt direkt etwas aufzurufen.

Aufruf der API aus Ihrem eigenen Code

Die v2-API beantwortet Cross-Origin-Anfragen nur für die konfigurierte Quote3D-Origin. Rufen Sie diese von Ihrem Server aus auf, anstatt aus dem JavaScript Ihres Storefronts; das Widget selbst läuft auf einer Quote3D-Origin innerhalb des iframes, sodass seine eigenen Anfragen nicht betroffen sind.

Sicherheit und Verifizierung

Das Widget ruft Quote3D aus dem Browser auf, weshalb sein Token für jeden sichtbar ist, der den Quelltext der Seite betrachtet. Erstellen Sie ein dediziertes Widget-Token, beschränken Sie es auf den Widget-Scope und binden Sie es an Ihre Storefront-Origins. Die Rotation bewahrt beide Beschränkungen, sodass ein rotiertes Widget-Token niemals zu einem Token mit vollem Zugriff wird.

Hochgeladene Dateien und Vorschauen

Über das Widget hochgeladene Dateien werden verschlüsselt gespeichert und sind nicht öffentlich erreichbar. Die Add-to-Cart-Payload liefert die thumbnailUrl, einen absoluten Link, der über Ihren eigenen Storefront gerendert wird: Speichern Sie diesen exakt so, wie er empfangen wurde. Das Umschreiben, das Entfernen der Query-Parameter oder das Re-Hosting unter Ihrer eigenen Domain führt dazu, dass das Bild nicht mehr angezeigt wird.

Preise, denen Ihr Shop vertrauen kann

Ein Token mit Widget-Scope kann keinen Preis festlegen. Ein damit angefordertes Angebot übernimmt nur die Optionen, die ein Kunde im Formular wählt; Material-, Maschinen- und Gebührenpreise stammen immer aus Ihren eigenen Profilen.
Der Webhook widget.added_to_cart meldet Preis, Währung, Menge und Material, die mit dem Angebot gespeichert sind, nicht das, was der Browser gesendet hat, und wird einmal pro Angebot gesendet.
Die Nachricht QUOTE3D_ADD_TO_CART, die Ihre Seite erhält, stammt aus dem Browser des Kunden und kann dort verändert werden. Prüfen Sie den Preis vor der Abrechnung anhand des Webhooks oder mit GET https://api.quote3d.com/v2/quotes/{quote_id}.

Widget-Token-Scope

Ein mit dem Widget-Scope erstellter Token kann nur die Endpunkte erreichen, die das eingebettete Erlebnis tatsächlich benötigt. Alles andere in der API wird abgelehnt, sodass ein aus Ihrem Quellcode entwendeter Token nicht gegen Ihr Konto verwendet werden kann.

Der Widget-Scope erlaubt:

Das Auslesen Ihrer Drucker- und Materialkonfiguration, damit das Angebotsformular Ihre Optionen anzeigen kann.
Das Anfordern einer Upload-ID und das Hochladen einer Modelldatei.
Das Lesen und Löschen der hochgeladenen Datei.
Das Starten eines asynchronen Angebots für diese Datei und das Polling des resultierenden Jobs.
Das Lesen eines Angebots per ID, das Speichern des Vorschaubildes und das Senden des 'In den Warenkorb'-Events.

Der Widget-Scope verweigert:

Das Webhook-Management, damit ein gestohlener Token Ihren Event-Stream nicht auf einen anderen Server umleiten kann.
Kontodaten, Ihren Upload-Verlauf, Angebotslisten, Analysen, Nutzung und Kontingente.
Die Lizenzaktivierung und alle anderen oben nicht aufgeführten Endpunkte.

Origin-Bindung

Listen Sie die Shops auf, die das Token nutzen dürfen, zum Beispiel https://shop.example.com. Ein Widget-Token braucht mindestens einen Eintrag: Quote3D prüft beim Laden des iframes die einbettende Seite und verweigert die Anzeige auf jeder Website, die nicht auf der Liste steht.

Was die Origin-Bindung von Ihrer Seite benötigt

Die Prüfung liest den Referrer aus, den Ihr Browser beim Laden des Widget-Iframes sendet. Dies ist das Standardverhalten, sodass von einer normalen Seite nichts angefordert wird.
Setzt Ihre Seite referrer-policy: no-referrer, lässt sich der Origin nicht prüfen und das Widget lädt nicht. Verwenden Sie auf Seiten mit dem Widget die Browser-Vorgabe (strict-origin-when-cross-origin) oder origin.
Direkte API-Aufrufe werden separat geprüft: Eine Anfrage, die von einem Browser auf einer Seite außerhalb der Liste gesendet wird, wird abgelehnt, während Server-zu-Server-Aufrufe, die keinen Origin-Header senden, nicht betroffen sind.

Was ein Widget-Token nicht lesen kann

Der Konfigurations-Endpunkt gibt nur das zurück, was das Angebotsformular anzeigt – Druckernamen, Bauvolumina, Materialien, Farben und Schichtlimits. Ihre Kostenbasis (Materialpreis pro Kilogramm, Maschinenstundensatz, Support-Kostenmultiplikator, Stromverbrauch) wird niemals an den Browser gesendet; die Preisgestaltung wird auf dem Server berechnet.

Besuchersitzungen

Ein Widget-Token ist öffentlich. Ein Limit, das am Token gezählt wird, teilen sich deshalb alle Kunden Ihres Shops, und ein einzelnes Skript könnte es aufbrauchen und alle anderen aussperren. Das Widget öffnet daher beim ersten Datei-Upload eines Kunden eine kurze Besuchersitzung, und die kostenverursachenden Schritte werden pro Sitzung gezählt.

Das eingebettete Widget erledigt das selbst. Der Standard-Einbettungscode muss nicht geändert werden.
Das Hochladen einer Datei, das Starten eines Angebots, das Speichern eines Vorschaubildes und das 'In den Warenkorb'-Event benötigen eine Sitzung. Das Lesen Ihrer Konfiguration, das Abfragen eines Jobs und das Abrufen eines Angebots nicht, sodass eine lange Berechnung einen Kunden nie auf halbem Weg stehen lässt.
Eine Sitzung gilt 30 Minuten. Pro Sitzung kann ein Kunde stündlich bis zu 30 Uploads, 15 Angebote, 30 Vorschaubild-Speicherungen und 20 Warenkorb-Events auslösen. Eine IP-Adresse kann für dasselbe Token bis zu 20 Sitzungen pro Stunde öffnen.
Diese Regeln gelten nur für Tokens mit Widget-Scope. Ein Token ohne Scope wird als Server-Integration behandelt und erhält keinen dieser Schutzmechanismen; das Token in Ihrem Shop sollte daher immer einen Widget-Scope haben.
Wenn Sie diese Endpunkte selbst mit einem Token mit Widget-Scope aufrufen, öffnen Sie zuerst eine Sitzung: Holen Sie mit GET https://api.quote3d.com/v2/widget/challenge eine Challenge, suchen Sie die Zahl zwischen 0 und maxnumber, für die der SHA-256 des Salts gefolgt von dieser Zahl der Challenge entspricht, und senden Sie sie an POST https://api.quote3d.com/v2/widget/session. Senden Sie den zurückgegebenen Wert im Header X-Widget-Session. Eine fehlende oder abgelaufene Sitzung wird mit 401 und dem Fehlercode AUTH_005 beantwortet; öffnen Sie eine neue Sitzung und wiederholen Sie den Aufruf.
Widget-Traffic hat ein eigenes stündliches Kontingent, getrennt von Ihrer Server-Integration, sodass ein stark besuchter Shop und Ihr eigenes Backend sich nicht gegenseitig ausbremsen. Außerdem können Sie im Dashboard ein tägliches Angebotslimit für das Widget festlegen; ist es erreicht, werden Kunden gebeten, es am nächsten Tag erneut zu versuchen, und Sie erhalten eine E-Mail.

Tokens, die ohne einen Scope erstellt wurden, behalten den vollen Zugriff, sodass bestehende Integrationen unverändert weiter funktionieren. Durch das Hinzufügen eines Scopes wird ein Token für die Einschränkung aktiviert.