# Incorporando sites externos

Agora é possível incorporar sites de terceiros em [DexAppBuilder](https://dexappbuilder.dexkit.com) usando o componente predefinido “código”, seja como uma seção ou como parte de uma página personalizada.

Antes de tudo, vamos explicar como adicionar este componente como uma seção predefinida no DexAppBuilder:

1. Vá para [o link a seguir](https://dexappbuilder.dexkit.com/admin) (que redireciona para a gestão de aplicativos do DexAppBuilder) e conecte sua carteira clicando no botão "Connect wallet" localizado no canto superior direito da tela.

<figure><img src="/files/84cd1299a9ab7834f09403f9c453cbd271fe6d1d" alt=""><figcaption></figcaption></figure>

2. Escolha entre as conexões disponíveis. Lembre-se de que você deve conectar a carteira onde criou seu DApp para que ele apareça na seção de administração.

<figure><img src="/files/ab48019eba25a44d4db1561e108e3a081f4a44e3" alt="" width="382"><figcaption></figcaption></figure>

{% hint style="success" %}
Nota: Será solicitado que você assine digitalmente com sua carteira para se autenticar no aplicativo. Por favor, aceite essa assinatura, ela é segura e inofensiva.
{% endhint %}

3. Uma vez conectado você poderá ver seus DApps na lista. Clique no menu (os três pontos à direita do seu DApp, dentro da coluna “Actions”) e clique em “Edit”.

<figure><img src="/files/d65d8040501ebace4095e097bfc95d774a08a127" alt=""><figcaption></figcaption></figure>

4. Dentro da página de administração do seu DApp, vá para a seção "Layout" à esquerda clicando nela. Várias opções serão exibidas; clique em "Pages" para gerenciar a criação de páginas dentro do seu DApp.

<figure><img src="/files/df07521fe5cb20936752a3ac92dcb659cb994479" alt="" width="172"><figcaption></figcaption></figure>

5. Para os propósitos deste guia criaremos uma nova página chamada “Embedded” na qual colaremos o componente “Code”. Agora clique no botão azul «New page».

<figure><img src="/files/dfa331acf2776173420cc28dd9df250d09f1ead4" alt="" width="563"><figcaption></figcaption></figure>

6. Agora vamos criar o título da página, lembrando que usaremos "Embedded" para o exemplo atual. Depois de terminar de digitá-lo, pressione o botão azul «Save»

<figure><img src="/files/4a091bc9c294a2834512ad4448a0f44eb7b4ea7d" alt="" width="379"><figcaption></figcaption></figure>

7. Uma vez que sua página esteja criada, você a verá abaixo da página inicial, conforme mostrado na imagem 👇&#x20;

<figure><img src="/files/83ed65254a13d6eca9b4c1626265eec48c323488" alt="" width="563"><figcaption></figcaption></figure>

7. Como você pode ver, agora estamos dentro da página que acabamos de criar e ela está vazia de componentes / seções. Vamos adicionar uma seção predefinida de código para incorporar o site de terceiros. Clique no botão "+ Add Section" que abrirá os componentes predefinidos que podemos usar.

<figure><img src="/files/1c53e37038c045c75b81f7396c314a5f925f4e49" alt="" width="563"><figcaption></figcaption></figure>

8. Ao clicar no botão devemos procurar o componente “Code”, que está delineado em verde na imagem ilustrativa abaixo

<figure><img src="/files/2505778f3bd4fb7d14e13f4d5fb979dd2276b9e6" alt="" width="323"><figcaption></figcaption></figure>

9. Clicar na opção "Code" abrirá a seguinte tela na qual você deve colar o código-fonte do seu site. Usaremos um [Typeform](https://typeform.com) survey para este propósito.&#x20;

<figure><img src="/files/41614be125b6f29c2fb34c7d588875c2e3e744a3" alt="" width="563"><figcaption></figcaption></figure>

10. Podemos analisar na última operação que o Typeform nos forneceu um componente \<div> incorporável e outro \<script> que juntos possibilitaram a invocação da pesquisa de satisfação que criamos para este fim. Agora clicamos no botão azul «Save».
11. style

<figure><img src="/files/6c34e7bdbdf248c181c703d5d5cdae40e07488f7" alt="" width="563"><figcaption></figcaption></figure>

12. Agora vamos colocar nossa página recém-criada no menu superior clicando na opção "Nav Menu" dentro da seção Layout.

<figure><img src="/files/2bdf05b15dfdd8afd78984976b88e502851d042a" alt=""><figcaption></figcaption></figure>

13. Uma vez que pressionarmos o botão salvar retornamos à tela anterior onde podemos adicionar mais seções ou simplesmente salvar. Neste caso pressionamos o botão azul "save"

<figure><img src="/files/5c9079d718bdb3c50b7edd81138be7abf637e9f2" alt="" width="563"><figcaption></figcaption></figure>

14. Agora vamos colocar nossa página recém-criada no menu superior clicando na opção "Navbar" dentro da seção Layout.

<figure><img src="/files/0025d9e4a4ca2a396a5aaa2b0383e8a1e1ee7815" alt="" width="383"><figcaption></figcaption></figure>

15. Aqui podemos ver todos os links que fazem parte do cabeçalho do nosso DApp. Vamos pressionar o botão "+ Add Menu"

<figure><img src="/files/3464419e960cbe3665280048aafe2be0b8512485" alt="" width="563"><figcaption></figcaption></figure>

16. Dentro do modal de criação de menu escolhemos o tipo (no nosso caso será page) e abaixo selecionamos o indicado, que no nosso caso é "Embedded". Pressionamos o botão azul "Save" quando terminarmos a escolha.

<figure><img src="/files/eea58845479bddc5caa5067d0f7176b2d0fb980a" alt="" width="563"><figcaption></figcaption></figure>

16. Uma vez que o menu apareça em nossa lista, pressionamos o botão "Save" no canto inferior direito para enviar as alterações para produção.

<figure><img src="/files/014cd8b368ebf408d3e90cc9389f2c21e7c7e2e6" alt=""><figcaption></figcaption></figure>

17. Clicamos no link e, como você pode ver na imagem abaixo, a pesquisa está ativa em nosso DApp.

<figure><img src="/files/bcf6bf0394f9be993caa0c30e661575f769cec9c" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}
Clicamos no link e, como você pode ver na imagem abaixo, o DApp incorporado está ativo dentro do nosso próprio DApp 🤯 [Acabamos de incorporar o ScaleSwap no nosso próprio DApp](/produtos-e-solucoes-defi-pt/dexappbuilder/gerenciando-esta-ferramenta/acabamos-de-incorporar-o-scaleswap-no-nosso-proprio-dapp.md) Recomendamos usar a
{% endhint %}


---

# 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/produtos-e-solucoes-defi-pt/dexappbuilder/incorporando-sites-externos.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.