# 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="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%2FP75rEzjkzwkVosM3rh0R%2Fimage.png?alt=media&#x26;token=26dc78a3-b0e2-40ef-89a5-1e1b43a6ebaa" 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%2FBkRLfhoDBrL8p1YOhplM%2Fimage.png?alt=media&#x26;token=8a13eb32-cbb5-483b-a311-12f149defe55" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FWsQOgNOEOAjaba3Dr8Sc%2Fimage.png?alt=media&#x26;token=ce4e69b1-f876-4e88-9b18-a92dc1753276" 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="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. 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FqNzqdQL4eYKU4gRLoxMp%2Fimage.png?alt=media&#x26;token=92052517-6a90-4c14-9199-2037c39f52b2" 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%2FOhPoeQGYo0r9TH9z7X2d%2Fimage.png?alt=media&#x26;token=fff59349-e984-4661-b50b-0f80e94e5c59" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2Fr31hvLDbZD2uXi4xoHqL%2Fimage.png?alt=media&#x26;token=56efb49a-8ff6-4585-903a-17220fcbc79e" alt=""><figcaption></figcaption></figure>

11. para este

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FzuqOGYEmy0xyJiB7Vzq6%2Fimage.png?alt=media&#x26;token=1cb3fd58-ffdd-4457-8f97-44db9352e8b6" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FjQFbc7bkhxB8CCHk7J7d%2Fimage.png?alt=media&#x26;token=e8f70334-4889-4380-8f25-178984f634a5" 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="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=""><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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FWUsTZ8bcFM8lVAvcWiNk%2Fimage.png?alt=media&#x26;token=71b775c1-f37f-4eb8-86b7-4cef003bba2d" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FsLwPkPXLACI1UIHOmKyL%2Fimage.png?alt=media&#x26;token=2e550488-837a-48ae-8d37-2407d8d904da" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FhzDbbkmWuxD6rtz7G2W5%2Fimage.png?alt=media&#x26;token=f68c03d6-7efe-4f38-b371-516e72780afa" 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="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2Fd83r9JWJs7sFUbYtWSjb%2Fimage.png?alt=media&#x26;token=a40b982b-308e-4c73-b1c9-0c3915c0b8dd" 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](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 %}