Incrustando sitios externos
Ahora es posible incrustar sitios web de terceros en DexAppBuilder 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:
Ve a el siguiente enlace (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.
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.
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.
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”.
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.
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».
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»
Una vez creada tu página la verás debajo de la página de inicio como se muestra en la imagen 👇
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.
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
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 para la encuesta.
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».
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"
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.
Aquí podemos ver todos los enlaces que son parte del encabezado de nuestra DApp. Presionemos el botón "+ Add Menu"
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.
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.
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.
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:
Hacemos clic en el enlace y, como puedes ver en la imagen de abajo, la encuesta está activa en nuestra DApp.
Última actualización