Wie bette ich einen 3D-Konfigurator auf meiner Website ein?

Fügen Sie ein einzelnes JavaScript-Script-Tag in das HTML Ihrer Webseite ein, einschließlich eines data-id-Attributs mit Ihrer eindeutigen Konfigurator-ID aus dem Zinevu-Portal. Der Konfigurator lädt responsiv in jedem Container. Er funktioniert mit WordPress, Webflow, Squarespace, Wix und jedem anderen Website-Builder, der benutzerdefiniertes HTML unterstützt.

Verlangsamt die Einbettung des Konfigurators meine Website?

Minimal, wenn er korrekt geladen wird. Die Zinevu-Einbettung verwendet standardmäßig Lazy Loading und initialisiert die 3D-Engine nur, wenn der Konfigurator in den Viewport eintritt. Für beste Performance platzieren Sie die Einbettung unterhalb der Falz auf Produktseiten.

Kann ich den Konfigurator als eigenständige Seite statt eingebettet nutzen?

Ja. Ihre Zinevu-White-Label-Domain (z. B. konfigurator.ihrfirma.de) kann als direkter Link geteilt werden – in E-Mails, Anzeigen, WhatsApp-Nachrichten oder Social-Media-Profilen. Sie müssen ihn nicht auf Ihrer Website einbetten, um ihn zu nutzen.

Welche Website-Plattformen unterstützen die Zinevu-Konfigurator-Einbettung?

Jede Website-Plattform, die das Hinzufügen eines benutzerdefinierten HTML-Script-Tags ermöglicht. Dazu gehören WordPress (über einen Custom-HTML-Block), Webflow (über benutzerdefinierte Code-Einbettung), Squarespace, Wix, Shopify, HubSpot CMS und jede handcodierte HTML/React/Next.js-Seite.

Wie erreichen mich Leads aus dem eingebetteten Konfigurator?

Leads fließen automatisch in Ihr Zinevu CRM, sobald ein Kunde seine Konfiguration absendet. Sie erhalten eine Benachrichtigung (E-Mail oder In-App), und der Lead erscheint in Ihrem CRM-Posteingang mit der vollständigen Konfiguration, Kontaktdaten, einem 3D-Render und dem konfigurierten Preis.

Kann ich Konfigurator-Konversionen in Google Analytics verfolgen?

Ja. Die Zinevu-Einbettung feuert ein JavaScript-Ereignis (zinevu:completed), wenn ein Kunde einen Lead einreicht. Sie können auf dieses Ereignis hören und es als Konversionsereignis an Google Analytics 4 oder Google Tag Manager weiterleiten – so können Sie Konfigurator-Abschlüsse bestimmten Werbekampagnen oder Traffic-Quellen zuordnen.

Gibt es ein Limit, auf wie vielen Seiten ich den Konfigurator einbetten kann?

Nein. Sie können denselben Konfigurator (mit derselben data-id) auf so vielen Seiten einbetten, wie Sie möchten. Wenn Sie verschiedene Produktbereiche auf verschiedenen Seiten wünschen, können Sie mehrere Konfigurator-Konfigurationen in Ihrem Händlerportal erstellen, jede mit ihrer eigenen Einbettungs-ID.

Wie man einen 3D-Konfigurator auf der Website einbindet (und mehr Leads generiert)

Warum Ihre Website einen 3D-Konfigurator benötigt

Ihre Website erhält Besucher, die aktiv nach Outdoor-Living-Lösungen suchen – und die meisten von ihnen verlassen die Seite, ohne Kontakt aufzunehmen. Die Konversionsrate einer Standard-Outdoor-Living-Website (Kontaktformular oder Telefonanruf) liegt typischerweise zwischen 1–3 % der Besucher. Von je 100 Personen, die Ihre Veranda-Seite besuchen, gehen 97–99 ohne Angabe ihrer Identität.

Ein 3D-Konfigurator ändert diese Gleichung. Statt Besucher aufzufordern, Sie zu kontaktieren, lädt er sie ein, ihr Produkt sofort zu gestalten. Die Hürde ist niedriger, die Erfahrung ist ansprechender und die Bindung ist höher. Besucher, die 5–10 Minuten mit einem Konfigurator interagieren, unterscheiden sich qualitativ von denen, die einen Blick auf ein Kontaktformular werfen und abspringen.

Laut Googles Verbraucherforschung verbringen Hausbesitzer, die größere Heimverbesserungskäufe recherchieren, deutlich mehr Zeit auf Websites mit interaktiven Tools als auf statischen Broschüren-Websites.

Die Einbettung eines 3D-Konfigurators auf Ihrer Website bedeutet, Ihren bestehenden Traffic in qualifizierte, spezifizierte Leads umzuwandeln – ohne Ihre Anzeigenausgaben zu erhöhen.

Wie die Einbettung technisch funktioniert

Der Zinevu 3D-Konfigurator wird mit einem einzelnen JavaScript-Snippet eingebettet – eine Zeile Code, die Sie in Ihr HTML einfügen. Keine serverseitige Integration erforderlich, kein Build-Schritt und keine Abhängigkeit von Ihrer bestehenden Website-Plattform.

Der Einbettungscode lädt den Konfigurator als iFrame in Ihrer Seite:

<script
  src="https://cdn.zinevu.com/embed/v1.js"
  data-id="IHR_CONFIG_ID"
></script>

Ersetzen Sie IHR_CONFIG_ID mit der ID, die in Ihrem Zinevu-Händlerportal unter Einstellungen → Einbettung angezeigt wird. Der Konfigurator lädt in einem responsiven Container, der sich an die Breite des Elements anpasst, in dem er platziert ist.

Das Einbettungs-Script kommuniziert über JavaScript-Ereignisse mit Ihrer Seite, sodass Sie auf Kundenaktionen reagieren können – Konfiguration abgeschlossen, Lead eingereicht – mit Ihrer eigenen benutzerdefinierten Logik:

window.addEventListener('zinevu:completed', function(event) {
  var lead = event.detail;
  // lead.customer.email, lead.config, lead.totalPrice
  console.log('Neuer Lead:', lead.customer.name);
});

Der Konfigurator lädt vom globalen CDN von Zinevu mit Performance-Optimierungen einschließlich Lazy Loading von 3D-Assets, progressivem Modell-Loading und WebGL-Erkennung. Für die meisten modernen Websites ist der Einfluss auf die Seitenlade-Zeit minimal, wenn die Einbettung unterhalb der Falz platziert wird.

Wo der Konfigurator auf Ihrer Website platziert werden sollte

Die Platzierung hat einen erheblichen Einfluss auf die Engagement-Raten. Hier sind die effektivsten Positionen für einen 3D-Verandakonfigurator auf Ihrer Website:

Produktseiten (höchste Wirkung)

Den Konfigurator direkt auf der Produktseite einzubetten – neben oder unterhalb der Produktbeschreibung – ist die am besten konvertierende Platzierung. Der Besucher ist bereits im Produktmodus; der Konfigurator ist der natürliche nächste Schritt. Entfernen oder reduzieren Sie das Kontaktformular auf Produktseiten, auf denen der Konfigurator eingebettet ist.

Dedizierte „Ihre Veranda gestalten"-Landingpage

Erstellen Sie eine eigenständige Seite (z. B. /gestalten oder /konfigurator), auf der der Konfigurator in voller Breite mit minimalem Umgebungsinhalt erscheint. Diese Seite ist ideal als Ziel für bezahlten Werbungstraffic, wo Sie möchten, dass Besucher genau eine Aktion ausführen.

Homepage-Hero (für konfigurator-zentrierte Unternehmen)

Händler, die ihr Marketing um den Konfigurator herum aufgebaut haben, platzieren manchmal einen Teaser-CTA direkt auf der Homepage. „Gestalten Sie Ihre Veranda in 3D → Sofortpreis erhalten" funktioniert gut über der Falz.

In E-Mail- und WhatsApp-Follow-ups

Der Konfigurator muss nicht nur auf Ihrer Website leben. Ein direkter Link zu Ihrem Konfigurator – gehostet auf Ihrer White-Label-Domain – kann in E-Mail-Antworten, WhatsApp-Nachrichten oder Social-Media-Posts geteilt werden. „Showroom-Besuch überspringen – gestalten Sie Ihres online und ich schicke Ihnen innerhalb von 24 Stunden ein Angebot" ist eine überzeugende Aussage für vielbeschäftigte Hausbesitzer.

Schritt für Schritt: vom Portal zur Live-Einbettung

Hier ist der vollständige Prozess, um einen Zinevu 3D-Konfigurator auf Ihrer Website einzubetten:

Ihren Produktkatalog einrichten. Konfigurieren Sie in Ihrem Zinevu-Händlerportal die Strukturen, Optionen und Preisregeln, die Kunden zur Verfügung stehen sollen. Dies ist der zeitaufwändigste Schritt – die meisten Händler schließen ihn in 2–4 Stunden am ersten Tag ab.
Ihre Einbettungs-ID holen. Navigieren Sie zu Einstellungen → Einbettung in Ihrem Händlerportal. Kopieren Sie den angezeigten data-id-Wert – das ist Ihre eindeutige Konfigurator-Kennung.
Das Script zu Ihrer Website hinzufügen. Fügen Sie das Einbettungs-Snippet in das HTML jeder Seite ein, auf der der Konfigurator erscheinen soll. Wenn Sie einen Website-Builder verwenden (WordPress, Webflow, Squarespace, Wix), fügen Sie es in einen Custom-HTML-Block oder den Code-Injection-Bereich der Seite ein.
Im Staging testen. Laden Sie die Seite in einem privaten Browser-Fenster und schließen Sie eine Testkonfiguration ab. Überprüfen Sie, ob der Lead in Ihrem Zinevu CRM-Lead-Posteingang erscheint.
Ihre White-Label-Domain einrichten (optional, aber empfohlen). Folgen Sie dem CNAME-Konfigurationsprozess, der in unserem White-Label-Konfigurator-Leitfaden beschrieben wird.
Live gehen. Veröffentlichen Sie die Seite. Der Konfigurator ist nun live und nimmt Leads an.

Der Prozess dauert typischerweise weniger als einen Arbeitstag von der Kontoerstellung bis zur Live-Einbettung. Lesen Sie unseren vollständigen Erste-Schritte-Leitfaden in der Zinevu Academy für Schritt-für-Schritt-Screenshots jeder Phase.

Leads aus dem Konfigurator erfassen und weiterleiten

Jede abgeschlossene Konfiguration generiert automatisch einen Lead in Ihrem Zinevu CRM. Der Lead umfasst:

Name, E-Mail-Adresse und Telefonnummer des Kunden
Die vollständige Produktkonfiguration (Strukturtyp, Abmessungen, Materialien, Optionen)
Ein 3D-Render der konfigurierten Struktur
Den gesamten konfigurierten Preis
Einen Zeitstempel und eine Quell-URL

Aus dem CRM können Sie Leads mit einer personalisierten Nachricht und einem beigefügten formalen Angebots-PDF antworten oder sie direkt in ein Projekt im Projektmanagement-Flow von Zinevu umwandeln.

Für Teams, die externe CRM-Systeme verwenden (HubSpot, Salesforce, Pipedrive), ermöglicht das Zinevu API- und Webhook-System, Leads automatisch an Ihre bestehenden Tools weiterzuleiten. Technische Details finden Sie auf der Entwickler & API-Seite.

Für Werbe- und Analyseteams kann das zinevu:completed-JavaScript-Ereignis verwendet werden, um Konversionsverfolgungsereignisse in Google Analytics 4, Google Tag Manager oder Meta Pixel auszulösen.

Performance-Überlegungen für eingebettete Konfiguratoren

3D-Rendering in einem Browser ist rechenintensiv und das Einbetten eines Konfigurators fügt Gewicht zu Ihrer Seite hinzu. Hier sind Best Practices zur Aufrechterhaltung der Site-Performance:

Unterhalb der Falz laden. Verwenden Sie Lazy Loading – das Zinevu-Einbettungs-Script tut dies standardmäßig und initialisiert die 3D-Engine nur, wenn der Konfigurator in den Viewport eintritt.
Auf mobilen Geräten testen. WebGL-Performance variiert über mobile Hardware hinweg. Der Zinevu-Konfigurator enthält Performance-Optimierungen für Geräte mit niedrigerer Spezifikation.
Nicht auf der Homepage laden. Wenn der Konfigurator nicht Ihr primärer CTA ist, vermeiden Sie ihn auf stark frequentierten Seiten wie der Homepage einzubetten. Verwenden Sie stattdessen eine verlinkte Konfigurator-Seite.
Mit Core Web Vitals überwachen. Googles Core Web Vitals (LCP, CLS, FID) messen die Seitenerfahrung und beeinflussen Suchrankings. Wenn die Konfigurator-Einbettung CLS-Probleme (Layout-Verschiebung) verursacht, wickeln Sie sie in einen Container mit fester Höhe ein.

Wenn Sie spezifische Performance-Bedenken haben, hat das Zinevu-Hilfecenter Leitfäden zur Optimierung der Einbettungsplatzierung.