Incrusta tu proyecto hauzd en tu p谩gina web 馃寪

Incrusta tu proyecto hauzd en tu p谩gina web 馃寪

Idea
Para incrustar tu proyecto hauzd en tu sitio web, puedes utilizar un iframe. El iframe permite que tu proyecto hauzd se muestre dentro de otro sitio web. Aqu铆 te explico c贸mo hacerlo.

驴D贸nde consigo el iframe de mi proyecto hauzd?

Siempre lo tendr谩s disponible en tu hauzd Admin Panel dentro de la secci贸n "Information". All铆 ver谩s la opci贸n para copiar el Iframe de tu proyecto. 

Si no tienes acceso al hauzd Admin Panel, solo con la URL de tu proyecto puedes generar el iframe. A continuaci贸n te dejamos el paso a paso para que lo realices: 

Pasos para incrustar tu proyecto hauzd en un sitio web usando un Iframe:

Obt茅n el C贸digo del Iframe: Necesitar谩s el c贸digo HTML del iframe para incrustar el sitio. Aqu铆 tienes un ejemplo b谩sico de c贸mo se ve:

  1. <iframe src="https://nombredetuproyecto.hauzd.app?disableLogin=true" width="600" height="400" title="Iframe Example"></iframe>

    En este c贸digo:

    • src es la URL del sitio que deseas incrustar.
    • width y height son las dimensiones del iframe. Puedes ajustarlas seg煤n sea necesario.
    • frameborder se usa para eliminar el borde alrededor del iframe (0 significa sin borde).
    • allowfullscreen permite que el iframe se muestre en pantalla completa si es necesario.
    • Reemplaza la URL que visualizas en el c贸digo (https://nombreproyecto.hauzd.app) por la URL de tu proyecto hauzd. 

  2. Agrega el C贸digo a Tu P谩gina Web: Abre el archivo HTML de tu sitio web donde quieras que aparezca el iframe y pega el c贸digo que obtuviste en el paso anterior. Aseg煤rate de colocarlo en la ubicaci贸n deseada dentro de tu documento HTML.

  3. Guarda los Cambios y Prueba: Guarda el archivo HTML y abre tu sitio web en un navegador para verificar que el iframe se muestra correctamente y que el sitio incrustado carga como se espera.

A continuaci贸n te dejamos un ejemplo de c贸mo se ver铆a

  1. https://example.hauzd.com/
    1. Es una p谩gina web de ejemplo, all铆 ver谩s el bot贸n de "Explora el Tour Virtual" para ver el showroom de hauzd.

Consideraciones Adicionales

  • Responsive Design: Si deseas que el iframe sea responsive (se adapte a diferentes tama帽os de pantalla), considera usar CSS para ajustar el ancho y la altura del iframe de manera m谩s flexible. Aqu铆 tienes un ejemplo b谩sico de CSS para un iframe responsive:

  • html
    <style>
    .iframe-container {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 ratio */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
    }
    .iframe-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>
<div class="iframe-container">
    <iframe src="https://nombreproyecto.hauzd.app" frameborder="0" allowfullscreen></iframe>
</div>

Este c贸digo crea un contenedor que mantiene una proporci贸n de aspecto de 16:9 y permite que el iframe se ajuste al tama帽o del contenedor.

隆Espero que esto te ayude a incrustar tu proyecto hauzd en tu sitio web!

IdeaSi necesitas asistencia, comun铆cate con nosotros a success@hauzd.com