# Widgets Web3 🆕

Los widgets Web3 te permiten añadir funcionalidad Web3—como swaps, exchanges descentralizados, drops de tokens, mint de NFT y más—directamente en entornos Web2 o Web3 sin integraciones complejas.

Este sistema es perfecto para proyectos en producción o para ideas que aún están en fase de planificación. Con los Web3 Widgets, puedes transformar tu plataforma en un centro Web3 generador de ingresos en minutos.

## Características clave

* **Incrustación universal** – Funciona con cualquier plataforma o sitio web, codificado en cualquier lenguaje.
* **Amplia gama de componentes** – Soporta widgets de swap, integraciones DEX, mint de NFT, drops de tokens y más.
* **Cero fricción** – No es necesario migrar ni reconstruir tu plataforma existente.
* **Generación de ingresos** – Gana comisiones por swaps o usa widgets para ventas de tokens.
* **Apariencia personalizable** – Cambia colores, temas y diseños para que coincidan con tu marca.
* **Soporte multi-red** – Elige entre Ethereum, Optimism, BNB Chain, Polygon, Base, Arbitrum, Avalanche y más.

## Cómo funciona

Los Web3 Widgets usan un simple **iframe incrustado** para mostrar y ejecutar componentes Web3 totalmente funcionales dentro de tu sitio web o aplicación.\
Una vez incrustados, los usuarios pueden interactuar con funciones blockchain directamente, sin salir de tu plataforma.

## Comenzando

#### 1. Accede al Builder

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FEoc53AqVcU15BlhxLG65%2Fimage.png?alt=media&#x26;token=022af1bd-2a2f-4656-b1b2-20355ef4c075" alt=""><figcaption></figcaption></figure>

Ve a **dexabuilder.dexkit.com**.\
El Builder de DexKit es una plataforma sin código/con poco código para crear apps y widgets on-chain. No necesitas crear una app completa para usar la funcionalidad del widget.

#### 2. Conecta tu billetera

* Haz clic **Conectar billetera**.
* Selecciona tu billetera preferida (p. ej., MetaMask).
* Autoriza la conexión.

#### 3. Gestiona widgets

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2Foj2lFu1mVwbfFw7EvzC9%2Fimage.png?alt=media&#x26;token=babaf11d-d9ef-46a4-8797-f70f66696f0b" alt=""><figcaption></figcaption></figure>

* Desde la barra de navegación superior, ve a **Gestionar widgets**.
* Firma la solicitud de autenticación en tu billetera.
* Serás redirigido a tu **Panel de Widgets**.

#### 4. Crea un nuevo widget

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2F6wQo8rowXWOI7N2vFRvk%2Fimage.png?alt=media&#x26;token=5f1bf05a-5ba1-492c-8aef-e687523b0595" alt=""><figcaption></figcaption></figure>

* Haz clic **Nuevo widget**.
* Introduce un **nombre privado** (visible solo para ti).
* Haz clic **Crear** para abrir la configuración del widget.

#### 5. Configurar ajustes generales

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2Fi5wT2j7QjWyd2LysaIvV%2Fimage.png?alt=media&#x26;token=f4fc3fd8-d1f1-412e-b0b9-0453c7831eb5" alt="" width="563"><figcaption></figcaption></figure>

* Cambia el nombre privado si es necesario.
* Establece la moneda por defecto.
* Selecciona el idioma de tu widget.

#### 6. Créditos y marca

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FavcOtSoVMgl6SRG0lkzQ%2Fimage.png?alt=media&#x26;token=6a2eb834-3754-47af-9d35-62317c8c5523" alt=""><figcaption></figcaption></figure>

Por defecto, los widgets muestran **“Powered by DexKit”** en el pie de página.

* **Plan gratuito** – 100.000 solicitudes gratuitas/mes.
* **Plan de pago** – $100/mes para eliminar la marca y personalizar completamente el pie de página.

#### 7. Diseño y tema

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FKNnFxIyLZXRONjypCN9X%2Fimage.png?alt=media&#x26;token=9ceb658f-75dc-4b98-a6ef-860164bcd1af" alt=""><figcaption></figcaption></figure>

* Cambia los colores primario, secundario, de fondo, de papel y del texto.
* Elige entre cientos de fuentes o usa un tema predeterminado.

#### 8. Añadir componentes

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2F0dTVeC660iiFpIrzH1qD%2Fimage.png?alt=media&#x26;token=8c488872-3c2b-4d4e-9df9-7964765d263a" alt=""><figcaption></figcaption></figure>

* Haz clic **Añadir sección**.
* Elige el componente Web3 deseado (p. ej., **Swap**).
* Selecciona tu diseño: clásico, moderno, minimalista, compacto, móvil, etc.
* Configurar:
  * **Red predeterminada** (Ethereum, Polygon, BNB, etc.)
  * **Token de entrada** (token que el usuario tiene)
  * **Token de salida** (token que el usuario desea)

#### 9. Establecer comisiones de swap

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FnQznJv4QoIgJoWAn9FQn%2Fimage.png?alt=media&#x26;token=e65a92b2-d9d1-4704-8c58-15d0f529fa0d" alt=""><figcaption></figcaption></figure>

* Ve a **Comisiones de swap**.
* Añade la dirección de tu billetera para recibir comisiones.
* Establece un porcentaje (p. ej., 0,1%). Comisiones más bajas generalmente resultan en más transacciones.

#### 10. Configurar fuentes de datos

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FMWrppZoxUIe04Mtxr68V%2Fimage.png?alt=media&#x26;token=12d580af-87a4-4f64-8cf1-1a92386fec62" alt=""><figcaption></figcaption></figure>

* Importa colecciones NFT (opcional).
* Selecciona las redes soportadas para el widget.
* Importar tokens vía:
  * API de búsqueda
  * Dirección de contrato (autorrellena con logo y detalles)

Resalta tokens favoritos para que aparezcan de forma prominente en el widget.

#### 11. Incrustar el widget

<figure><img src="https://3072554521-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2Fwo2IPxEEiVHyDzOhL3Jd%2Fimage.png?alt=media&#x26;token=c0bde200-56e8-4a16-94a5-5381003157b9" alt=""><figcaption></figcaption></figure>

* Haz clic **Incrustar**.
* Copia el **iframe** código generado.
* Pégalo en el HTML de tu sitio web o app donde quieras que aparezca el widget.

Ejemplo:

```html
<iframe src="https://dexappbuilder.dexkit.com/_widget_iframe?widgetId=1" frameBorder="0" width="1000px" height="500px"></iframe>
```

## Casos de uso de ejemplo

* Añade un swap DEX a tu sitio de e-commerce Web2.
* Integra el mint de NFT en la landing page de un juego.
* Permite compras de tokens directamente desde tu portal comunitario.
* Realiza drops promocionales sin mover tu sitio principal a Web3.

## Mejores prácticas

* Mantén tu porcentaje de comisiones bajo para fomentar más intercambios.
* Asegúrate de que los tokens y NFTs importados estén verificados y correctamente configurados.
* Prueba tu widget en múltiples tamaños de pantalla antes de publicarlo.
* Monitorea el uso desde el Panel de Widgets para ajustar rendimiento y ofertas.

Este **Widget Web3** la solución te permite actualizar tu plataforma a un servicio listo para Web3 en minutos, sin escribir código blockchain complejo. Ya sea que quieras monetizar mediante comisiones de swap, vender tus propios tokens o proporcionar una mejor experiencia a tus usuarios, los Web3 Widgets de DexKit te brindan la flexibilidad y el poder para lograrlo.