SliceQuote
Anmelden
Zurück zur Startseite

Integrations-Leitfaden

Integrieren Sie SliceQuote in wenigen Minuten in Ihre Website. Das Widget wird als iFrame eingebettet – keine Abhängigkeiten, funktioniert überall.

Professional iFrame
Empfohlen

Vollwertige Integration mit automatischer Höhenanpassung und API-Kommunikation. Ideal für professionelle Websites.

<!-- SliceQuote Widget -->
<section id="slicequote-widget-container">
  <iframe
    sandbox="allow-downloads allow-scripts allow-same-origin allow-forms allow-popups"
    id="slicequote-embed"
    class="slicequote-embed"
    src="https://slicequote.de/widget/YOUR_SHOP_ID?embedded=true"
    style="width: 1px; min-width: 100%; height: 600px; border: 0px; border-radius: 8px; transition: height 0.3s ease;"
    scrolling="no">
  </iframe>
</section>
<script src="https://slicequote.de/api/widget/embed-api.js"></script>
  • • Automatische Höhenanpassung via API
  • • Sandbox-Sicherheit
  • • Optimierte Performance
  • • Vollscreen-Unterstützung

Simple iFrame
Einfach

Minimale Integration ohne zusätzliche Skripte. Für einfache Anwendungsfälle und CMS-Systeme.

<!-- SliceQuote Widget (Einfach) -->
<iframe
  src="https://slicequote.de/widget/YOUR_SHOP_ID?embedded=true"
  width="100%"
  height="700"
  frameborder="0"
  scrolling="auto"
  style="width: 1px; min-width: 100%; border: none; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
</iframe>
  • • Feste Höhe (700px)
  • • Kein JavaScript erforderlich
  • • Funktioniert in jedem CMS
  • • Schnelle Implementierung

Schritt-für-Schritt Integration

  1. 1

    Shop registrieren & Shop-ID ermitteln

    Melden Sie sich im Dashboard an. Ihre Shop-ID finden Sie unter Admin → Widget-Konfiguration im Embed-Code-Tab.

  2. 2

    Embed-Code kopieren

    Kopieren Sie den generierten Embed-Code aus dem Widget-Konfigurations-Dashboard. Der Code enthält bereits Ihre Shop-ID.

  3. 3

    Code in Ihre Website einfügen

    Fügen Sie den Code an der gewünschten Stelle in Ihrer Website ein. Das Widget passt sich automatisch an die Breite des Containers an.

  4. ✓

    Fertig!

    Das Widget ist live. Kunden können sofort 3D-Modelle hochladen und Preisangebote erhalten.

Einbinden nach Plattform

Der Embed-Code aus dem Dashboard ist reines HTML – so fügen Sie ihn auf den gängigsten Plattformen ein.

WordPress
Plugin

Für WordPress gibt es ein offizielles Plugin – mit Gutenberg-Block, Shortcode [slicequote] und Einstellungsseite. Kein Embed-Code nötig.

  1. 1

    Im WP-Admin unter Plugins → Installieren nach „SliceQuote“ suchen → Jetzt installieren → aktivieren. Oder direkt im offiziellen WordPress-Plugin-Verzeichnis ansehen.

  2. 2

    Unter Einstellungen → SliceQuote die Shop-ID eintragen (zu finden im SliceQuote-Admin unter Snippet & Design).

  3. 3

    Den Block „SliceQuote Widget“ in eine Seite einfügen – oder den Shortcode [slicequote] verwenden. Veröffentlichen, fertig.

Updates kommen automatisch über die WordPress-Plugin-Verwaltung. Alternativ gibt es das Plugin auch als Zip-Download für die manuelle Installation.

Shopify
Beliebt

  1. 1

    Öffnen Sie im Shopify-Admin: Onlineshop → Themes → Anpassen.

  2. 2

    Wechseln Sie über die Seitenauswahl oben zu der Seite, auf der das Widget erscheinen soll (z. B. eine eigene Seite „3D-Druck-Angebot“).

  3. 3

    Klicken Sie in der linken Leiste auf „Abschnitt hinzufügen“ und wählen Sie „Benutzerdefiniertes Liquid“ (Custom Liquid).

  4. 4

    Fügen Sie den kopierten Embed-Code in das Freitext-Feld „Benutzerdefiniertes Liquid“ ein und klicken Sie auf Speichern.

Der Embed-Code ist reines HTML und damit gültiges Liquid – es sind keine Anpassungen nötig. Den Abschnitt können Sie anschließend wie jeden anderen Theme-Abschnitt verschieben.

Andere CMS (Typo3, Wix, Jimdo …)

  1. 1

    Öffnen Sie die Zielseite im Editor Ihres CMS.

  2. 2

    Fügen Sie einen HTML-/Code-Block hinzu – Wix: „Embed-Code“, Jimdo: „Widget/HTML“-Element, Typo3: HTML-Inhaltselement. (Für WordPress empfehlen wir das Plugin oben.)

  3. 3

    Fügen Sie den kopierten Code in den Block ein und veröffentlichen Sie die Seite.

Wichtig: Den Code als Rohcode/HTML einfügen – nicht in den normalen Text-Editor (WYSIWYG), sonst wird der Code als sichtbarer Text angezeigt statt ausgeführt.

Statische Website (eigenes HTML)

  1. 1

    Öffnen Sie die HTML-Datei der Seite, auf der das Widget erscheinen soll.

  2. 2

    Fügen Sie den Code innerhalb von <body> an der gewünschten Stelle ein.

  3. 3

    Datei speichern und auf den Webserver hochladen – fertig.

URL-Parameter

Das Widget unterstützt folgende URL-Parameter für die src-URL des iFrames:

Darstellung

embedded=trueOptimiert für iFrame
langde | en

Hinweis

Farben, Materialien und weitere Einstellungen werden direkt im Widget-Konfigurations-Dashboard gespeichert und automatisch geladen.

Best Practices

✓ Empfehlungen

  • • Mindestbreite von 320px für den Container sicherstellen
  • • Professional iFrame für beste Performance verwenden
  • • Widget auf einer eigenen Angebotsseite einbetten
  • • Mobiloptimierung des umgebenden Layouts sicherstellen
  • • Widget-Farben im Dashboard an Ihr Branding anpassen

✗ Häufige Fehler

  • • Widget nicht in zu kleinen Containern einbetten (<320px)
  • • Nicht mehrere Widget-Instanzen auf einer Seite verwenden
  • • Widget nicht in Modals ohne feste Höhe einbauen
  • • Shop-ID im Code nicht vergessen zu ersetzen
  • • iFrame nicht in einem overflow: hidden Container einbetten

Benötigen Sie Hilfe bei der Integration?

Unser Team unterstützt Sie gerne bei der Integration und beantwortet alle technischen Fragen.

Integration SupportAPI Dokumentation