# Incrustando sitios externos

Ahora es posible incrustar sitios web de terceros en [DexAppBuilder](https://dexappbuilder.dexkit.com) usando el componente predefinido “código”, ya sea como una sección o como parte de una página personalizada.

Primero expliquemos cómo agregar este componente como una sección predefinida en DexAppBuilder:

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%2F09XzHeBFem2S8vBH9Mty%2Fimage.png?alt=media&#x26;token=9387a81b-3cc8-46cb-ad74-1c02c1ff07fd" 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%2Fd9B92mtLffHfu4WDbIhI%2Fimage.png?alt=media&#x26;token=ec28f807-adcb-4992-8fa3-851c569fb7e8" alt="" width="172"><figcaption></figcaption></figure>

5. 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%2FcMCuQoAutsjyX8owtxBB%2Fimage.png?alt=media&#x26;token=eac0d79d-9b57-4164-b69f-34f346e0990b" alt="" width="563"><figcaption></figcaption></figure>

6. 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. Una vez creada tu página la verás debajo de la página de inicio como se muestra en la imagen 👇&#x20;

<figure><img src="https://3072554521-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 puedes ver, ahora estamos dentro de la página que acabamos de crear y está vacía de componentes / secciones. Agreguemos 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%2FkNXBUOOY91Fd36Nl0bsv%2Fimage.png?alt=media&#x26;token=18bb6ed2-a750-4b11-bf97-a4899d0042f7" 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%2F0JVQi30k191sga8hmCH4%2Fimage.png?alt=media&#x26;token=b217e132-26ee-4bc8-9d19-cde34c5f4874" alt="" width="323"><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 tu sitio web. Para este propósito usaremos un [Typeform](https://typeform.com) para la encuesta.&#x20;

<figure><img src="https://3072554521-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 analizar en la última operación que Typeform nos dio un componente \<div> incrustable y otro \<script> que juntos hicieron posible la invocación de la encuesta de satisfacción que creamos para este propósito. Ahora hacemos clic en el botón azul «Save».
11. 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%2FMHqfEnbcM7wY1UXZeWoE%2Fimage.png?alt=media&#x26;token=50a1e053-b9c1-4531-a119-aac4af5bfc6f" alt="" width="563"><figcaption></figcaption></figure>

12. Ahora coloquemos nuestra página recién creada en el menú superior haciendo clic en la opción "Nav Menu" 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%2FsFF7TRhNlw2UaBn1g1zE%2Fimage.png?alt=media&#x26;token=0d5f5eda-5146-4289-a1c5-1bcd5108bde3" alt=""><figcaption></figcaption></figure>

13. 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%2FmMsdnkiIr6s18qEBrF6y%2Fimage.png?alt=media&#x26;token=6e44baa1-9892-4dcb-9c84-87b083f1207c" alt="" width="563"><figcaption></figcaption></figure>

14. 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="" width="383"><figcaption></figcaption></figure>

15. 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%2FT4R26uqVg6deNGHrugLN%2Fimage.png?alt=media&#x26;token=c48d9c85-6a6f-48dd-873c-6141bf9fda6c" alt="" width="563"><figcaption></figcaption></figure>

16. 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%2FzOvkfM35kuXEHOYFGGnC%2Fimage.png?alt=media&#x26;token=b21d1c6a-680a-4068-9f34-b60abf39c598" alt="" width="563"><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%2FZafZTuXcJZdKvvMigWqG%2Fimage.png?alt=media&#x26;token=c7fb6a2f-96c7-46e8-bb7a-37ad369f0156" alt=""><figcaption></figcaption></figure>

17. Hacemos clic en el enlace y, como puedes ver en la imagen de abajo, la encuesta está activa en nuestra DApp.

<figure><img src="https://3072554521-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" %}
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 %}