# Widgets Web3 🆕

Os widgets Web3 permitem adicionar funcionalidade Web3 — como swaps, exchanges descentralizadas, drops de tokens, mintagem de NFTs e mais — diretamente em ambientes Web2 ou Web3 sem integrações complexas.

Este sistema é perfeito para projetos em produção ou para ideias ainda em fase de planejamento. Com os Web3 Widgets, você pode transformar sua plataforma em um hub Web3 gerador de receita em minutos.

## Principais Recursos

* **Incorporação Universal** – Funciona com qualquer plataforma ou site, codificado em qualquer linguagem.
* **Grande Variedade de Componentes** – Suporta widgets de swap, integrações DEX, mintagem de NFTs, drops de tokens e mais.
* **Sem Atrito** – Não é necessário migrar ou reconstruir sua plataforma existente.
* **Geração de Receita** – Ganhe taxas com swaps ou use widgets para vendas de tokens.
* **Aparência Personalizável** – Altere cores, temas e layouts para combinar com sua marca.
* **Suporte a Múltiplas Redes** – Escolha entre Ethereum, Optimism, BNB Chain, Polygon, Base, Arbitrum, Avalanche e mais.

## Como Funciona

Os Web3 Widgets usam um simples **embed iframe** para exibir e executar componentes Web3 totalmente funcionais dentro do seu site ou aplicação.\
Uma vez incorporados, os usuários podem interagir com funcionalidades blockchain diretamente, sem sair da sua plataforma.

## Introdução

#### 1. Acesse o Builder

<figure><img src="https://1903426557-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>

Vá para **dexabuilder.dexkit.com**.\
O Builder da DexKit é uma plataforma no-code/low-code para criar aplicações e widgets on-chain. Você não precisa criar um aplicativo completo para usar a funcionalidade de widget.

#### 2. Conecte Sua Carteira

* Clique **Conectar Carteira**.
* Selecione sua carteira preferida (por exemplo, MetaMask).
* Autorize a conexão.

#### 3. Gerenciar Widgets

<figure><img src="https://1903426557-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>

* Na barra de navegação superior, vá para **Gerenciar Widgets**.
* Assine a solicitação de autenticação na sua carteira.
* Você será redirecionado para seu **Painel de Widgets**.

#### 4. Criar um Novo Widget

<figure><img src="https://1903426557-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>

* Clique **Novo Widget**.
* Digite um **nome privado** (visível apenas para você).
* Clique **Criar** para abrir as configurações do widget.

#### 5. Configurar Configurações Gerais

<figure><img src="https://1903426557-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>

* Altere o nome privado se necessário.
* Defina a moeda padrão.
* Selecione o idioma do seu widget.

#### 6. Créditos & Branding

<figure><img src="https://1903426557-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 padrão, os widgets exibem **“Powered by DexKit”** no rodapé.

* **Plano Gratuito** – 100.000 solicitações gratuitas/mês.
* **Plano Pago** – $100/mês para remover o branding e personalizar completamente o rodapé.

#### 7. Layout & Tema

<figure><img src="https://1903426557-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>

* Altere as cores primária, secundária, de fundo, do papel e do texto.
* Escolha entre centenas de fontes ou use um tema padrão.

#### 8. Adicionar Componentes

<figure><img src="https://1903426557-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>

* Clique **Adicionar Seção**.
* Escolha o componente Web3 desejado (por exemplo, **Swap**).
* Selecione seu layout: clássico, moderno, minimalista, compacto, mobile, etc.
* Configurar:
  * **Rede Padrão** (Ethereum, Polygon, BNB, etc.)
  * **Token de Entrada** (token que o usuário possui)
  * **Token de Saída** (token que o usuário deseja)

#### 9. Definir Taxas de Swap

<figure><img src="https://1903426557-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>

* Vá para **Taxas de Swap**.
* Adicione seu endereço de carteira para receber taxas.
* Defina uma porcentagem (por exemplo, 0,1%). Taxas mais baixas geralmente resultam em mais transações.

#### 10. Configurar Fontes de Dados

<figure><img src="https://1903426557-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>

* Importe coleções de NFT (opcional).
* Selecione redes suportadas para o widget.
* Importe tokens via:
  * Search API
  * Endereço de contrato (auto-preenchido com logo e detalhes)

Destaque tokens favoritos para que apareçam em destaque no widget.

#### 11. Incorporar o Widget

<figure><img src="https://1903426557-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>

* Clique **Incorporar**.
* Copie o **iframe** código.
* Cole-o no HTML do seu site ou app no local onde deseja que o widget apareça.

Exemplo:

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

## Casos de Uso Exemplares

* Adicione um swap DEX ao seu site de comércio eletrônico Web2.
* Integre a mintagem de NFTs na página de aterrissagem de um jogo.
* Permita compras de tokens diretamente do seu portal comunitário.
* Realize drops promocionais sem mover seu site principal para Web3.

## Melhores Práticas

* Mantenha sua porcentagem de taxa baixa para incentivar mais negociações.
* Garanta que tokens e NFTs importados sejam verificados e configurados corretamente.
* Teste seu widget em vários tamanhos de tela antes de entrar no ar.
* Monitore o uso a partir do Painel de Widgets para ajustar desempenho e ofertas.

Este **Widget Web3** a solução permite atualizar sua plataforma para um serviço pronto para Web3 em minutos, sem escrever código blockchain complexo. Quer você queira monetizar via taxas de swap, vender seus próprios tokens ou proporcionar uma melhor experiência para seus usuários, os Web3 Widgets da DexKit dão a você a flexibilidade e o poder para tornar isso possível.