> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.6mm.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.6mm.com/_mcp/server.

# 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 SDK de producción y una llamada a `TradingWidget.create()`.

<h2 id="before-you-start">
  Antes de empezar
</h2>

* Ejecutar el ejemplo desde una página web que pueda cargar recursos desde `https://app.6mm.com`.
* Asignar al contenedor del widget un ancho y una altura explícitos.
* Carga el SDK antes de llamar a `TradingWidget.create()`.
* Planificar el [flujo de autenticación](/es-ES/sdk/trading-widget/authentication) antes de habilitar funciones de cuenta o trading en producción.

<h2 id="minimal-example">
  Ejemplo mínimo
</h2>

```html
<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>
```

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

<h2 id="sdk-urls">
  SDK URLs
</h2>

| Medio ambiente | Guion URL                                                                                                |
| -------------- | -------------------------------------------------------------------------------------------------------- |
| Producción     | [https://app.6mm.com/sdk/trading-widget/v1/index.js](https://app.6mm.com/sdk/trading-widget/v1/index.js) |

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

<h2 id="display-controls">
  Controles de pantalla
</h2>

Las incrustaciones de socios ocultan por defecto la cabecera del PC y el ticker de mercado inferior. Usa `display` cuando necesites mostrar esas áreas de shell o ocultar contenedores de alto nivel en la página de trading incrustada.

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

<h2 id="container-size">
  Tamaño del contenedor
</h2>

| Superficie | Mínimo recomendado |
| ---------- | ------------------ |
| Escritorio | 1024 x 720         |
| Móvil      | 390 x 700          |

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 con éxito dejando invisible la interfaz de negociación.

<h2 id="verify-the-integration">
  Verifica la integración
</h2>

1. Confirmar que el script de SDK regresa correctamente en el panel de red del navegador.
2. Confirmar `onReady` se dispara una vez que el iframe esté inicializado.
3. Prueba las secciones configuradas `symbol` `locale`, tema y ocultas.
4. Redimensionar 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.

<h2 id="common-issues">
  Cuestiones comunes
</h2>

| Síntoma                                     | Qué comprobar                                                                |
| ------------------------------------------- | ---------------------------------------------------------------------------- |
| Área de widget en blanco                    | Confirma que el contenedor tiene ancho y altura visibles.                    |
| `TradingWidget` es indefinida               | Confirma que el script v1 se cargó antes de la llamada create.               |
| Página o entorno equivocados                | Establece `baseUrl` explícitamente y verifica el entorno configurado.        |
| El evento de preparación nunca se activa    | Captura `onError` e inspecciona solicitudes bloqueadas de iframes o scripts. |
| Los datos de la cuenta no están disponibles | Completa el flujo de autenticación de widgets compatible.                    |

<h2 id="next-steps">
  Próximos pasos
</h2>

#### [Autenticación de widgets](/es-ES/sdk/trading-widget/authentication)

Conecta el terminal embebido a una sesión de usuario aprobada.

#### [Opciones y eventos](/es-ES/sdk/trading-widget/options-events)

Configura símbolos, ubicación, comportamiento de visualización y llamadas al ciclo de vida.

#### [Métodos de instancia](/es-ES/sdk/trading-widget/instance-methods)

Controla la instancia del widget creado tras la inicialización.