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?

1. 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.

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

1. 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:

   html

   <iframe src="https://nombreproyecto.hauzd.app" width="800" height="600" frameborder="0" allowfullscreen></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.

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!

Si necesitas asistencia, comunícate con nosotros a success@hauzd.com