# Incorporando apps internos

Você também pode incorporar outros DApps feitos com o DexAppBuilder no seu. Isso pode ajudar a conectar outros projetos seus (ou de terceiros) dentro da sua aplicação, dando-lhe maior diversidade.

O procedimento é semelhante ao de incorporar sites externos, com certas diferenças. A seguir explicaremos como adicionar um DApp \[`*.dexkit.app`] dentro do seu:

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/2062019ccc052a68b9260dcf5178cfefe2df44e3" 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/c629e4aa4014d0025c011cc4fa9fec95be57b0de" alt="" width="208"><figcaption></figcaption></figure>

4. 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/0b9c8201ef6b4ff3189debd0ae069d340f3d2139" alt="" width="563"><figcaption></figcaption></figure>

4. 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. Como pode ver, agora estamos dentro da nova página que criamos e ela está vazia. Vamos adicionar uma seção de código predefinida para incorporar o site de terceiros. Clique no botão "+ Add Section" que abrirá os componentes predefinidos que podemos usar.

<figure><img src="/files/9b0a697e93ba923fd961cadcce11a6fc10667d84" 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/15a77fd3eab218856499f21f248df75d746f5da1" alt="" width="461"><figcaption></figcaption></figure>

9. Clicar na opção "Code" abrirá a seguinte tela na qual você deve colar o código-fonte do DApp. A sintaxe será a seguinte:&#x20;

```html
// Copie, modifique com o nome do DApp que deseja incorporar e cole 
no componente de código
<div style="margin: 0 auto; width: 100%; height: 800px;">
    <iframe src="https://scaleswap.dexkit.app/embed?page=home&hideLayout=true" style="width: 100%; height: 100%; border: none;"></iframe>
</div>
```

Vamos explicar a sintaxe do código:

```html
// Precisaremos abrir um componente div
<div style="margin: 0 auto; width: 100%; height: 800px;">
// O resto do código
<div>
```

```html
// Dentro do componente div inseriremos um iframe
<iframe src="https://scaleswap.dexkit.app/embed?page=home&hideLayout=true" style="width: 100%; height: 100%; border: none;"></iframe>
```

Este `iframe` invocará o DApp que você deseja mostrar em sua página. O `src`  deve ser o link do DApp escolhido (neste exemplo é `https://scaleswap.dexkit.app`). Então você precisará usar a `opção` embed `e chamar o` ?page

O `dentro do DApp que você está prestes a exibir.` a opção `hideLayout` marcada como

true `removerá o cabeçalho e o banner desse DApp específico invocado (incorporado).` Depois dessas opções você precisará definir o `iframe`.&#x20;

10. style

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

11. para este

<figure><img src="/files/d7ee879f4ca61532efb54e66f7073ebbaed83819" alt="" width="168"><figcaption></figcaption></figure>

12. 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/65686f3b44438a3efc4f0470ff3feb2a4b1ea336" alt=""><figcaption></figcaption></figure>

13. 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=""><figcaption></figcaption></figure>

14. 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/2180f96ebc4e8737a8f1450d1a1fc16932f8792c" alt=""><figcaption></figcaption></figure>

15. 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/cf95b50af98278713f89678699318697d8a88a38" alt=""><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/a1591daaafcc0b583940ef019768c99a8335b146" alt=""><figcaption></figcaption></figure>

16. Vamos clicar no botão "Open URL" para ver as alterações. Você terá que esperar alguns minutos até que as mudanças sejam refletidas.

<figure><img src="/files/28ded359609d7f22779e181ef5941c5f6d7e5a7b" alt=""><figcaption><p>Após alguns minutos você poderá ver a nova página no menu superior do seu DApp, como na imagem abaixo:</p></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-apps-internos.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.