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

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

始める前に

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

最小例

<div id="trading-widget" style="width: 100%; height: 720px"></div>
<script src="https://app.6mm.com/sdk/trading-widget/v1/index.js"></script>
<script>
  const widget = TradingWidget.create('#trading-widget', {
    baseUrl: 'https://app.6mm.com',
    symbol: 'BTCUSDT',
    theme: 'dark',
    locale: 'en',
    layout: 'default',
    display: {
      showHeader: false,
      showTicker: false,
      hidden: [],
    },
    onReady(event) {
      console.log('ready', event)
    },
    onError(error) {
      console.error('error', error)
    },
  })
</script>

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

SDK URL

明示的に baseUrl 設定

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

表示コントロール

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

display: {
  showHeader: false,
  showTicker: false,
  hidden: ['account'],
}

容器サイズ

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

統合の検証

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

一般的な問題

今後のステップ