Cómo configurar una URL personalizada para tus propuestas

Por defecto, tus propuestas son accesibles a través de una URL con el siguiente formato:

https://app.ieco.io/reports/e48662b4c753756ce5a75d174c1ed7e6404babe4

Es posible que quieras cambiar esto para que todas las propuestas sean accesibles a través de tu propio dominio. Si ese es el caso, y suponiendo que quieras utilizar una URL con el formato:

http://tudominio.com/propuestas?id=e48662b4c753756ce5a75d174c1ed7e6404babe4

Necesitarás crear una página propuestas.html que realice lo siguiente:

Leer la URL para extraer el parámetro id.
Utilizar el parámetro id para inferir la URL de la propuesta.
Cargar la URL de la propuesta inferida utilizando un iframe.

Usando HTML, CSS y JavaScript puedes hacer esto con bastante facilidad:

html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Propuesta</title>
  <style>
    #ieco-iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
</head>
<body>
  <!-- Contenedor del iframe -->
  <div>
    <!-- El iframe se cargará aquí -->
    <iframe id="ieco-iframe" src="https://app.ieco.io/reports/placeholder" frameborder="0"></iframe>
  </div>

  <!-- Script para modificar la URL del iframe -->
  <script>
    // Función para obtener el UUID de la propuesta desde la URL actual
    function obtenerUuidPropuesta() {
      const parametrosURL = new URLSearchParams(window.location.search);
      return parametrosURL.get('id');
    }

    // Función para actualizar la URL del iframe con el UUID de la propuesta recuperado
    function actualizarIframe() {
      const iframe = document.getElementById('ieco-iframe');
      const uuid = obtenerUuidPropuesta();
      iframe.src = `https://app.ieco.io/reports/${uuid}`;
    }

    // Llamar a la función al cargar la página para actualizar inicialmente la URL del iframe
    actualizarIframe();
  </script>
</body>
</html>

Cómo configurar una URL personalizada para tus propuestas ​

Cómo configurar una URL personalizada para tus propuestas