# 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="/files/a04da987f38853ab4c848ce7ec0d2093de1ebb77" 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="/files/144f655ba0d50b3bf1b3514467ef15be86249b1a" 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="/files/39d9d0abee95127651bea243bd0a22dc3508c205" 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="/files/226d1ed5847017bc3f9ceca913805fb1efd19c3c" 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="/files/dec924a6508343cf30da5303650a6bc4207b78db" 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="/files/75f274b517e719504c2a852c19a4094e4a4454cf" 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="/files/ea917ffa143c131c2e62ddea62d82e35aa72ca8c" 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="/files/dfc441f439bd5df7d67dbe3386722c0798e16ba2" 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="/files/970cc658c6d88e04c568589f615feef11119ad3a" 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="/files/f083ce1a394bc500323d647c5c17cd8daa1d0d5a" 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dexkit.com/productos-defi-y-soluciones-es/dexappbuilder/widgets-web3.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.