Intégrer le 6MM Trading Widget: Démarrage rapide

Le Trading Widget SDK intègre l’interface de trading 6MM dans une page web appartenant à un partenaire. L’intégration la plus rapide nécessite un conteneur visible, le script de SDK de production et un appel à TradingWidget.create().

Avant que tu commences

• Exécuter l’exemple depuis une page web pouvant charger des ressources depuis https://app.6mm.com.
• Attribuer au conteneur widget une largeur et une hauteur explicites.
• Chargez le SDK avant d’appeler TradingWidget.create().
• Planifier le flux d’authentification avant d’activer les fonctionnalités de compte ou de trading en production.

Exemple minimal

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>

Lorsque l’intégration réussit, le SDK crée un iframe à l’intérieur de #trading-widget et appelle onReady. Capturez onError pendant le développement afin que les défaillances de configuration et de chargement soient visibles.

SDK URLs

Mis baseUrl explicitement

Lorsque vous testez depuis des pages appartenant à un partenaire, passez baseUrl pour que l’iframe pointe toujours vers le 6MM domaine Web.

Commandes d’affichage

Les embeds partenaires masquent par défaut l’en-tête PC et le ticker du marché le plus bas. Utilisez display lorsque vous devez montrer ces zones de coquille ou cacher des conteneurs de haut niveau dans la page de trading intégrée.

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

Taille du conteneur

Pour des configurations réactives, gardez la largeur fluide et fixez une hauteur minimale appropriée pour chaque point d’arrêt. Un conteneur de hauteur nulle peut charger le SDK avec succès tout en laissant l’interface de trading invisible.

Vérifier l’intégration

1. Confirmer que le script de SDK revient avec succès dans le panneau réseau du navigateur.
2. Confirmer onReady déclenche une fois l’iframe initialisé.
3. Testez les symbol, locale, le thème et les sections cachées configurées.
4. Redimensionner la page entre les points d’arrêt sur ordinateur et mobile.
5. Effectuer un test authentifié avec un utilisateur non en production avant le lancement.

Problèmes courants

Prochaines étapes