3D-Druck-Angebots-Widget auf Ihrer Website einbetten

Ü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- und 3MF-Dateien.
• Sofortige Preisberechnung: Automatisierte Kostenkalkulation basierend auf Ihren eigenen Material- und Druckerprofilen.
• Multi-Technologie: Unterstützt FDM-, SLA- und SLS-Technologien mit spezifischer 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: Sofort einsatzbereite Plugins für WooCommerce und Shopify.

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.

Plattform-Integrationen: Shopify, WooCommerce und mehr

Das Quote3D Widget wurde mit modernen Webtechnologien entwickelt und funktioniert auf praktisch jeder Plattform. Wir haben fertige Integrationslösungen für beliebte Systeme:

Andere Plattformen und benutzerdefinierte Stacks

• Wix: Erweiterte Integration über Velo und benutzerdefinierte Elemente.
• Squarespace: Schnelle Einrichtung über Codeblöcke.
• PrestaShop: Strukturen, die mit der Smarty-Template-Engine kompatibel sind.
• OpenCart: Moderne Theme-Unterstützung basierend auf Twig.
• 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.

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.

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 Storefronts auf, die den Token verwenden dürfen, zum Beispiel https://shop.example.com. Quote3D prüft die Seite, die das Widget einbettet, wenn das Iframe geladen wird, und verweigert die Darstellung auf jeder Seite, die nicht auf der Liste steht. Lassen Sie das Feld leer, damit der Token überall funktioniert.

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.
• Wenn Ihre Seite 'referrer-policy: no-referrer' setzt, kann die Origin nicht verifiziert werden und das Widget lässt sich nicht laden. Verwenden Sie auf solchen Seiten einen Token ohne Origin-Einschränkung.
• 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.

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.