Incrustar el 6MM Trading Widget: Inicio rápido

El Trading Widget SDK integra la interfaz de trading 6MM dentro de una página web propiedad del socio. La integración más rápida requiere un contenedor visible, el script de producción SDK y una llamada a TradingWidget.create().

Antes de que empieces

• Ejecutar el ejemplo desde una página web que pueda cargar recursos desde https://app.6mm.com.
• Dar al contenedor del widget un ancho y una altura explícitos.
• Carga el SDK antes de llamar a TradingWidget.create().
• Planear el flujo de autenticación antes de habilitar funciones de cuenta o trading en producción.

Ejemplo mínimo

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>

Cuando la integración tiene éxito, el SDK crea un iframe dentro de #trading-widget y llama a onReady. Captura onError durante el desarrollo para que las fallas de configuración y carga sean visibles.

SDK URLs

Establecido baseUrl explícitamente

Cuando pruebes desde páginas propiedad del socio, pasa baseUrl para que el iframe siempre apunte al dominio web 6MM .

Controles de pantalla

Las incrustaciones de socios ocultan por defecto el encabezado de PC y el ticker de mercado más bajo. Usa display cuando necesites mostrar esas áreas de concha o esconder contenedores de alto nivel en la página de comercio incrustada.

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

Tamaño del contenedor

Para diseños responsivos, mantén el ancho fluido y establece una altura mínima adecuada para cada punto de interrupción. Un contenedor con altura cero puede cargar el SDK exitosamente mientras deja invisible la interfaz de intercambio.

Verifica la integración

1. Confirmar que el script de SDK regresa correctamente en el panel de red del navegador.
2. Confirma onReady se dispara una vez que el iframe esté inicializado.
3. Prueba el symbolconfigurado, locale, tema y secciones ocultas.
4. Redimensiona la página entre los puntos de interrupción de escritorio y móvil.
5. Completar una prueba autenticada con un usuario no productivo antes del lanzamiento.

Problemas comunes

Próximos pasos