Einbetten der 6MM Trading Widget: Schneller Start

Die Trading Widget SDK bettet die 6MM -Handelsschnittstelle in eine Partner-eigene Webseite ein. Die schnellste Integration erfordert einen sichtbaren Container, das Produktions- SDK -Skript und einen Aufruf zu TradingWidget.create().

Bevor du anfängst

• Führe das Beispiel von einer Webseite aus, die Ressourcen aus https://app.6mm.comladen kann.
• Gib dem Widget-Container eine explizite Breite und Höhe.
• Lade die SDK , bevor du TradingWidget.create()anrufst.
• Planen Sie den Authentifizierungsfluss vor der Aktivierung von Konto- oder Handelsfunktionen in der Produktion.

Minimales Beispiel

1
<div id="trading-widget" style="width: 100%; height: 720px"></div>
2
3
<script src="https://app.6mm.com/sdk/trading-widget/v1/index.js"></script>
4
<script>
5
  const widget = TradingWidget.create('#trading-widget', {
6
    baseUrl: 'https://app.6mm.com',
7
    symbol: 'BTCUSDT',
8
    theme: 'dark',
9
    locale: 'en',
10
    layout: 'default',
11
    display: {
12
      showHeader: false,
13
      showTicker: false,
14
      hidden: [],
15
    },
16
    onReady(event) {
17
      console.log('ready', event)
18
    },
19
    onError(error) {
20
      console.error('error', error)
21
    },
22
  })
23
</script>

Wenn die Integration gelingt, erstellt der SDK innerhalb #trading-widget einen iframe und ruft onReadyauf. Erfassen Sie onError während der Entwicklung, damit Konfigurations- und Ladefehler sichtbar sind.

SDK URLs

Setze baseUrl explizit

Beim Testen von Partner-eigenen Seiten übergebe baseUrl so, dass der iframe immer auf die 6MM Webdomain zeigt.

Display-Steuerungen

Partner-Einbettungen verbergen standardmäßig den PC-Header und den Bottommarket-Ticker. Nutze display , wenn du diese Shell-Bereiche anzeigen oder hochrangige Container auf der eingebetteten Handelsseite ausblenden musst.

1
display: {
2
  showHeader: false,
3
  showTicker: false,
4
  hidden: ['account'],
5
}

Behältergröße

Für responsive Layouts sollten Sie die Breite flüssig halten und für jeden Breakpoint eine passende Mindesthochhöhe festlegen. Ein Container mit null Höhe kann die SDK erfolgreich beladen, während die Handelsoberfläche unsichtbar bleibt.

Verifiziere die Integration

1. Bestätigen Sie, dass das SDK -Skript im Browser-Netzwerkpanel erfolgreich zurückkehrt.
2. Bestätigen Sie onReady ausgelöst wird, sobald das iframe initialisiert ist.
3. Teste die konfigurierten symbol, locale, das Thema und die versteckten Abschnitte.
4. Die Seite über Desktop- und Mobilfunk-Breakpoints zu vergrößern.
5. Führen Sie vor dem Start einen authentifizierten Test mit einem Nicht-Produktionsnutzer durch.

Häufige Probleme

Nächste Schritte