# 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FI3Q2hF0W7jvzxdd8QWRN%2Fimage.png?alt=media&#x26;token=8438f30b-9657-4777-bc7a-c54d8428a38d" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FwzB4pyaL2fosqO5c4PtZ%2Fimage.png?alt=media&#x26;token=0804664c-2448-4a95-83cb-fd30e3bebc3d" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2F09XzHeBFem2S8vBH9Mty%2Fimage.png?alt=media&#x26;token=9387a81b-3cc8-46cb-ad74-1c02c1ff07fd" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2Fd9B92mtLffHfu4WDbIhI%2Fimage.png?alt=media&#x26;token=ec28f807-adcb-4992-8fa3-851c569fb7e8" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FcMCuQoAutsjyX8owtxBB%2Fimage.png?alt=media&#x26;token=eac0d79d-9b57-4164-b69f-34f346e0990b" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2F50cDuyCZGrTLFDrnqwxZ%2Fimage.png?alt=media&#x26;token=59597002-68af-4633-84be-0b51acba5e63" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FKknWjiDC2QLS8KMouYn0%2Fimage.png?alt=media&#x26;token=b293abde-e926-4a1a-9127-a73447a3643b" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FkNXBUOOY91Fd36Nl0bsv%2Fimage.png?alt=media&#x26;token=18bb6ed2-a750-4b11-bf97-a4899d0042f7" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2F0JVQi30k191sga8hmCH4%2Fimage.png?alt=media&#x26;token=b217e132-26ee-4bc8-9d19-cde34c5f4874" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2F1aTL0hMsyQgh40he0TOR%2Fimage.png?alt=media&#x26;token=688cffec-6bd7-456c-91e4-38525d757ba1" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FMHqfEnbcM7wY1UXZeWoE%2Fimage.png?alt=media&#x26;token=50a1e053-b9c1-4531-a119-aac4af5bfc6f" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FsFF7TRhNlw2UaBn1g1zE%2Fimage.png?alt=media&#x26;token=0d5f5eda-5146-4289-a1c5-1bcd5108bde3" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FmMsdnkiIr6s18qEBrF6y%2Fimage.png?alt=media&#x26;token=6e44baa1-9892-4dcb-9c84-87b083f1207c" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FenCKm0VO8swwOG1ZWJFH%2Fimage.png?alt=media&#x26;token=e0bf8fe9-639f-49f5-9414-2c7e959cdd66" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FT4R26uqVg6deNGHrugLN%2Fimage.png?alt=media&#x26;token=c48d9c85-6a6f-48dd-873c-6141bf9fda6c" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FzOvkfM35kuXEHOYFGGnC%2Fimage.png?alt=media&#x26;token=b21d1c6a-680a-4068-9f34-b60abf39c598" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FZafZTuXcJZdKvvMigWqG%2Fimage.png?alt=media&#x26;token=c7fb6a2f-96c7-46e8-bb7a-37ad369f0156" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FtzLT08NJTR46u57vdsFv%2Fimage.png?alt=media&#x26;token=d94c8041-942a-4fbc-b66d-0bf5bdb6e8c4" 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](https://docs.dexkit.com/produtos-e-solucoes-defi-pt/dexappbuilder/gerenciando-esta-ferramenta/acabamos-de-incorporar-o-scaleswap-no-nosso-proprio-dapp) Recomendamos usar a
{% endhint %}