# Incrustando aplicaciones internas

También puedes incrustar otras DApps hechas con DexAppBuilder dentro de la tuya. Esto puede ayudarte a conectar otros proyectos tuyos (o de terceros) dentro de tu aplicación, dándole mayor diversidad.

El procedimiento es similar al de incrustar sitios web externos con ciertas diferencias. A continuación explicaremos cómo añadir una DApp \[`*.dexkit.app`] dentro de la tuya:

1. Ve a [el siguiente enlace](https://dexappbuilder.dexkit.com/admin) (que redirige a la gestión de la aplicación de DexAppBuilder) y conecta tu wallet haciendo clic en el botón "Connect wallet" ubicado en la esquina superior derecha de la pantalla.

<figure><img src="https://3072554521-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. Elige entre las conexiones disponibles. Recuerda que debes conectar la wallet donde has creado tu DApp para que aparezca en la sección de administración.

<figure><img src="https://3072554521-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: Se te pedirá firmar digitalmente con tu wallet para autenticarte en la app. Por favor acepta esta firma, es segura y no tiene riesgos.
{% endhint %}

3. Una vez conectada podrás ver tus DApps en la lista. Haz clic en el menú (los tres puntos a la derecha de tu DApp, dentro de la columna “Actions”) y haz clic en “Edit”.

<figure><img src="https://3072554521-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. Una vez dentro de la página de administración de tu DApp, ve a la sección "Layout" en la izquierda haciendo clic en ella. Se mostrarán varias opciones, haz clic en "Pages" para gestionar la creación de páginas dentro de tu DApp.

<figure><img src="https://3072554521-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 los fines de esta guía crearemos una nueva página llamada “Embedded” en la que pegaremos el componente “Code”. Ahora haz clic en el botón azul «New page».

<figure><img src="https://3072554521-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. Ahora vamos a crear el título de la página, recordando que usaremos "Embedded" para el ejemplo actual. Una vez que terminemos de escribirlo presionamos el botón azul «Save»

<figure><img src="https://3072554521-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 puedes ver, ahora estamos dentro de la nueva página que creamos y está vacía. Vamos a añadir una sección predefinida de código para incrustar el sitio web de terceros. Hagamos clic en el botón "+ Add Section" que abrirá los componentes predefinidos que podemos usar.

<figure><img src="https://3072554521-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. Una vez que hagamos clic en el botón debemos buscar el componente “Code”, que está delineado en verde en la imagen ilustrativa a continuación

<figure><img src="https://3072554521-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. Al hacer clic en la opción "Code" se abrirá la siguiente pantalla en la que debes pegar el código fuente de la DApp. La sintaxis será la siguiente:&#x20;

```html
// Copia, modifica con el nombre de la DApp que quieres incrustar y pégalo 
en el 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 a explicar la sintaxis del código:

```html
// Necesitaremos abrir un componente div
<div style="margin: 0 auto; width: 100%; height: 800px;">
// El resto del código
<div>
```

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

Este `iframe` invocará la DApp que quieres mostrar en tu página. El `src`  debería ser el enlace de la DApp elegida (en este ejemplo es `https://scaleswap.dexkit.app`). Luego necesitarás usar la `opción embed` y llamar al `?page` dentro de la DApp que estás a punto de mostrar.

El `hideLayout` opción marcada como `true` eliminará el encabezado y el banner para esa DApp invocada (incrustada) específica.

Después de esas opciones necesitarás establecer el `style` para esto `iframe`.&#x20;

10. Una vez que presionemos el botón guardar volvemos a la pantalla anterior donde podemos añadir más secciones o simplemente guardar. En este caso presionamos el botón azul "save"

<figure><img src="https://3072554521-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. Ahora coloquemos nuestra página recién creada en el menú superior haciendo clic en la opción "Navbar" dentro de la sección Layout.

<figure><img src="https://3072554521-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. Aquí podemos ver todos los enlaces que son parte del encabezado de nuestra DApp. Presionemos el botón "+ Add Menu"

<figure><img src="https://3072554521-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. Dentro del modal de creación del menú elegimos el tipo (en nuestro caso será página) y abajo seleccionamos la indicada, que en nuestro caso es "Embedded". Presionamos el botón azul "Save" una vez que terminemos de elegir.

<figure><img src="https://3072554521-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. Una vez que el menú aparezca en nuestra lista, presionamos el botón "Save" en la esquina inferior derecha para enviar los cambios a producción.

<figure><img src="https://3072554521-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. Hagamos clic en el botón "Open URL" para ver los cambios. Tendrás que esperar un par de minutos hasta que los cambios se vean reflejados.

<figure><img src="https://3072554521-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. Después de unos minutos podrás ver la nueva página en el menú superior de tu DApp, como en la imagen a continuación:

<figure><img src="https://3072554521-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. Hacemos clic en el enlace y, como puedes ver en la imagen a continuación, la DApp incrustada está activa en nuestra propia DApp 🤯

<figure><img src="https://3072554521-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>Acabamos de incrustar ScaleSwap en nuestra propia DApp</p></figcaption></figure>

{% hint style="info" %}
Recomendamos usar la [Gated content](https://docs.dexkit.com/productos-defi-y-soluciones-es/dexappbuilder/gestionando-esta-herramienta/gated-content) opción junto con esta funcionalidad para crear páginas visibles solo para poseedores de cierta colección de NFTs o tokens ERC20.
{% endhint %}