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 설정

파트너 소유 페이지에서 테스트할 때는 baseUrl 패스하여 iframe이 항상 6MM 웹 도메인을 가리키도록 합니다.

디스플레이 제어

파트너 임베드는 기본적으로 PC 헤더와 하단 시장 티커를 숨깁니다. display 그 셸 영역을 보여주거나 내장된 거래 페이지에서 고레벨 컨테이너를 숨겨야 할 때 사용하세요.

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

컨테이너 크기

반응형 레이아웃의 경우, 폭을 유동적으로 유지하고 각 브레이크포인트마다 적절한 최소 높이를 설정하세요. 높이가 0인 컨테이너는 거래 인터페이스를 보이지 않게 하면서 SDK 을 성공적으로 적재할 수 있습니다.

통합 확인

1. 브라우저 네트워크 패널에서 SDK 스크립트가 성공적으로 반환되었는지 확인합니다.
2. iframe이 초기화되면 onReady 발화되는지 확인.
3. 구성 symbol, locale, 테마, 숨겨진 섹션을 테스트합니다.
4. 데스크톱과 모바일 브레이크포인트에서 페이지 크기 조정.
5. 출시 전에 비생산 사용자와 인증된 테스트를 완료하세요.

일반적인 문제

다음 단계