6MM Trading Widgetを埋め込む:クイックスタート

Trading Widget SDK は、6MM取引インターフェースをパートナー所有のウェブページ内に埋め込みます。最も迅速な統合には、目に見えるコンテナ、本番SDK スクリプト、そしてTradingWidget.create()への呼び出しが必要です。

始める前に

• https://app.6mm.comからリソースを読み込めるウェブページから例を実行する。
• ウィジェットコンテナに明示的な幅と高さを割り当てる。
• SDK を装填してから TradingWidget.create()。
• 計画を立てる 認証の流れ 本格的なアカウントや取引機能を有効にする前に。

最小例

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>

統合が成功すると、 SDK は #trading-widget 内にiframeを作成し、 onReadyを呼び出します。開発中に onError をキャプチャし、設定やロードの失敗を目に見えます。

SDK URL

明示的に baseUrl 設定

パートナー所有のページからテストする際は、iframeが常に6MMウェブドメインを指すように、baseUrlパスしてください。

表示コントロール

パートナーの埋め込みはデフォルトでPCのヘッダーとボトムマーケットのティッカーを隠します。シェルエリアを見せる必要がある時や、埋め込みトレーディングページで高レベルのコンテナを隠す必要がある場合は display を使いましょう。

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

容器サイズ

レスポンシブレイアウトでは、幅を流動的に保ち、各ブレークポイントに適切な最小高さを設定しましょう。高さゼロのコンテナでも、取引インターフェースを見えなさずに SDK を正常にロードできます。

統合の検証

1. SDK スクリプトがブラウザネットワークパネルで正常に戻っているか確認します。
2. iframeが初期化されたら onReady が発射されることを確認します。
3. 設定済み symbol、 locale、テーマ、隠しセクションをテストします。
4. デスクトップとモバイルのブレークポイント間でページのサイズ変更。
5. リリース前に非本番ユーザーとの認証済みテストを完了すること。

一般的な問題

今後のステップ