Live-Trading-Ergebnisse in Wix, Webflow, Squarespace oder Shopify einbetten

Ein Live-Trading-Widget besteht aus einem einzigen HTML-Snippet. Jeder Website-Baukasten kann es aufnehmen, aber jeder versteckt das passende Element unter einem anderen Namen, und jeder hat seine eigene Tücke.

Diese Seite ist zum Nachschlagen gedacht: Such deinen Baukasten, folge vier Schritten und lies den einen Warnhinweis. Für WordPress gibt es eine eigene Anleitung.

📋 Das Snippet, das du einfügst

Du bekommst es bei ShowMyTrades: Verbinde dein Konto (MetaTrader, cTrader oder TradeLocker), veröffentliche es, öffne im Dashboard Widgets und kopiere den Code. Das alles ist kostenlos.

<iframe
  id="smt-equity-a1b2c3d4e"
  src="https://showmytrades.com/widget/YOUR-ACCOUNT-SLUG?type=equity&theme=light"
  width="100%"
  height="400"
  loading="lazy"
  frameborder="0"
  style="border-radius: 8px; width: 100%;">
</iframe>
<script>
(function() {
  var iframe = document.getElementById('smt-equity-a1b2c3d4e');
  window.addEventListener('message', function(e) {
    if (e.data?.type === 'widget-resize' && e.source === iframe.contentWindow) {
      iframe.height = e.data.height;
    }
  });
})();
</script>

Das Snippet hat zwei Teile. Das <iframe> ist das Widget selbst. Über das <script> teilt das Widget deiner Seite mit, wie hoch es ist, damit der Rahmen mit dem Inhalt wächst und schrumpft. Manche Baukästen führen dieses Skript aus, andere nicht: Genau das ist die Tücke, die du bei jedem kennen solltest.

Manche Baukästen verlangen statt Code eine Webadresse. Dann nimmst du nur die Adresse in src="…": Diese Adresse ist das Widget.

🟦 Wix

1. Klicke im Editor auf Elemente hinzufügen (Add Elements, das +).
2. Wähle Code einbetten (Embed Code) und dann HTML einbetten (Embed HTML).
3. Klicke auf Code eingeben (Enter Code), füge das komplette Snippet ein und klicke auf Aktualisieren (Update).
4. Zieh das Element auf die gewünschte Breite und Höhe und veröffentliche die Seite.

Die Tücke. Wix packt deinen Code in einen eigenen Rahmen, der so groß ist, wie du ihn ziehst. Diesen äußeren Rahmen kann das Widget nicht verändern, das Skript bewirkt hier also nichts: Leg die Höhe von Hand fest, etwas höher, als das Widget braucht, und prüf sie auch in der mobilen Ansicht. Am leichtesten passen auf Wix die Widgets mit fester Höhe (Statistikkarte, Statistikzeile).

🟪 Webflow

1. Öffne das Panel Add und such dort Code Embed.
2. Zieh das Element an die Stelle, an der der Chart erscheinen soll.
3. Füge das komplette Snippet ein und klicke auf Save & Close.
4. Veröffentliche die Website.

Die Tücke. Im Designer läuft das Skript nicht. Auf der Arbeitsfläche wirkt das Widget deshalb womöglich abgeschnitten oder zeigt nur einen Platzhalter. Beurteile es auf der veröffentlichten Website, dort passt es seine Größe korrekt an. Code Embed setzt einen kostenpflichtigen Webflow-Plan voraus.

⬛ Squarespace

1. Bearbeite die Seite und klicke auf Block hinzufügen (Add Block).
2. Wähle Code.
3. Achte darauf, dass als Typ HTML eingestellt und Quelltext anzeigen (Display Source) ausgeschaltet ist, und füge dann das komplette Snippet ein.
4. Speichere.

Die Tücke. Solange du angemeldet bist und bearbeitest, zeigt Squarespace den Block aus Sicherheitsgründen unter Umständen als deaktiviert an. Öffne die Live-Seite in einem privaten Fenster, dann siehst du das echte Ergebnis. Code-Blöcke mit Skripten oder iframes gibt es nur in den Plänen, die eigenen Code erlauben, nicht im Einstiegsplan.

🟩 Shopify

1. Geh zu Onlineshop → Themes (Online Store → Themes) und klicke auf Anpassen (Customize).
2. Öffne die Seitenvorlage, in der der Chart erscheinen soll.
3. Klicke auf Abschnitt hinzufügen (Add section) oder innerhalb eines Abschnitts auf Block hinzufügen (Add block) und wähle Benutzerdefiniertes Liquid (Custom Liquid).
4. Füge das komplette Snippet ein und speichere.

Die Tücke. Benutzerdefiniertes Liquid gibt es in der aktuellen Theme-Generation (Online Store 2.0), zu der alle kostenlosen Themes gehören, die Shopify heute mitliefert. Bei einem älteren Theme bearbeitest du die Seite unter Seiten (Pages), schaltest den Editor mit der Schaltfläche <> auf HTML um und fügst das Snippet dort ein.

Verkaufst du auf einer Produktseite einen EA oder ein Signal, dann lies „So zeigst du Live-Ergebnisse deines EA auf der Verkaufsseite“, bevor du entscheidest, wo der Chart hinkommt.

🧩 Weitere Baukästen

📐 Einstellungen, die dir Ärger ersparen

Leg sie im Widget-Generator von ShowMyTrades fest, bevor du den Code kopierst.

🖼️ Wenn der Baukasten keinen Code annimmt: Nimm ein Bild

An ein paar Stellen geht gar kein Code: in einem kostenlosen Plan, in dem eigener Code gesperrt ist, in einem Angebot auf einem Marktplatz, in einem Newsletter-Dienst. Zu jedem Konto gibt es aber auch elf Bilder, die sich selbst aktualisieren, und ein Bild wird überall angenommen.

Wähle im Generator Automatisch aktualisiertes Bild, such dir Typ und Design aus (hell, dunkel oder transparent) und kopiere die Adresse des Bildes. Füge es mit dem normalen Bildelement deines Website-Baukastens ein und verlinke das Bild dann mit deiner Kontoseite.

Das Bild zeichnet sich neu, sobald sich deine Trading-Daten ändern. Interaktiv ist es nicht, nimm es also nur dort, wo das Live-Widget nicht hinkommt.

❓ Häufige Fragen

Im Widget erscheint eine Bildlaufleiste. Woran liegt das? Der Rahmen ist niedriger als sein Inhalt, und das Skript konnte ihn nicht vergrößern. In Wix, Google Sites und Framer stellst du von Hand eine größere Höhe ein. Überall sonst prüfst du, ob du auch den <script>-Teil eingefügt hast.

Auf dem Desktop sieht das Widget gut aus, auf dem Smartphone ist es abgeschnitten. Die Breite wurde in Pixeln kopiert. Geh zurück in den Generator, stell die Breite auf 100 Prozent und kopiere den Code noch einmal.

Kann ich mehrere Widgets auf eine Seite setzen? Ja. Kopiere jedes einzeln aus dem Generator: Jedes Snippet hat seine eigene ID, deshalb kommen sie sich nicht in die Quere.

Muss ich den Code anpassen, wenn ich neue Trades mache? Nein. Das Widget holt sich die Daten bei jedem Laden der Seite von ShowMyTrades.

Funktioniert das mit dem kostenlosen Plan meines Website-Baukastens? Das Widget selbst ist kostenlos. Ob du Code einfügen darfst, hängt vom Baukasten ab: Webflow, Squarespace und Carrd behalten eigenen Code den kostenpflichtigen Plänen vor. Dort ist das automatisch aktualisierte Bild der kostenlose Weg.

Gibt es eine ShowMyTrades-App oder ein Plugin für diese Baukästen? Nein, und es braucht auch keins: Das Snippet ist die Integration.

🔗 Weiterführende Artikel

• Verifizierte Ergebnisse überall einbetten: alle Widgets, Formate und Optionen
• Live-Trading-Ergebnisse in WordPress einbinden: Gutenberg, Elementor, Divi und der klassische Editor
• So baust du eine Track-Record-Seite für deine Trading-Website: was rund um das Widget auf die Seite gehört
• Trading-Ergebnisse in Forensignatur, E-Mail oder Chat: die Bildformate im Detail

Verbinde dein Konto kostenlos, kopiere das Widget und füge es in deinen Baukasten ein. Wenn du den Code schon vor der Registrierung sehen willst, öffne den Widget-Generator und wähle ein beliebiges öffentliches Konto.