Cómo insertar demos interactivas de Storylane en Webflow

Una demostración de producto funciona porque el vídeo le dice al espectador qué sucede; una demostración interactiva le permite hacer clic en el botón por sí mismo. Ambas dejan impresiones muy distintas.

Con Storylane, puedes grabar ese recorrido y obtener un código de inserción. Webflow te da la página donde se aloja. Las decisiones interesantes están en el medio: qué formato de inserción elegir, dónde poner el script y si los motores de búsqueda pueden ver algo de todo esto.

Esta guía cubre ambas familias de inserción y los tres patrones que generan, las reglas de código personalizado de Webflow que deciden dónde puede vivir cada una, y una configuración reciente de Storylane que cambia si tu demostración es indexable o no.

¿Qué necesitas para insertar una demostración de Storylane en Webflow?

Necesitas una demostración de Storylane publicada, un sitio de Webflow con un plan que permita código personalizado y decidir cuál de los tres formatos de inserción se adapta mejor a la página.

Comprueba estos requisitos antes de continuar:

• Una demostración de Storylane publicada y compartible, con acceso a su panel de Compartir
• Un sitio de Webflow con un plan de sitio activo o un espacio de trabajo Core, Growth, Agency o Freelancer, que es lo que otorga acceso a código personalizado
• La página o plantilla donde vivirá la demostración, y una idea clara de si es el motivo por el que llegan los usuarios o un elemento de apoyo
• Derechos de publicación en el sitio, ya que el código personalizado se comporta de forma distinta antes y después de publicar

Storylane incluye a Webflow entre las plataformas con las que sus demostraciones funcionan de forma nativa, así que aquí no hace falta ningún apaño. Lo que sí hace falta es elegir el formato correcto, y esa elección es más difícil de cambiar después de lo que parece.

¿Qué formato de inserción de Storylane encaja en la página?

Storylane ofrece dos familias de inserción: en línea, que coloca la demostración en el flujo de la página, y emergente, que la abre sobre la página al pulsar un botón. La opción en línea se divide a su vez según si la demostración comienza sola o no.

La documentación de inserción describe una inserción en línea sin superposición como una que se inicia automáticamente al cargar la página, y una inserción en línea con superposición como una que muestra una vista previa con una llamada a la acción que carga la demostración al hacer clic. Las inserciones con superposición también incluyen un control deslizante de desenfoque para el fondo detrás de la vista previa.

Adapta el formato al propósito de la página:

La reproducción automática es esa opción que todos eligen y luego lamentan. Una demostración que empieza a sonar mientras el visitante intenta leer los precios compite con el contenido en lugar de ayudar, y si la conexión es lenta, se convierte en el elemento más pesado de la pantalla. Resérvala solo para páginas donde el recorrido sea el objetivo principal.

4 pasos para añadir una demostración de Storylane a una página de Webflow

La configuración consiste en un script de carga en el pie de página, un fragmento de código en la página y una opción que casi nadie encuentra, pero que decide si los buscadores pueden leer la demostración.

Sigue estos pasos en este orden.

1. Copia el código de inserción desde el panel Compartir

Abre tu demostración en Storylane, ve a Compartir, luego a Insertar y elige el formato que decidiste antes. Copia el fragmento que se genera en lugar de adaptar uno de otro sitio.

El fragmento contiene valores específicos para tu demostración: su URL, el relleno que define la relación de aspecto y, en el caso de las ventanas emergentes, el ancho y el alto. Esos números parecen aleatorios, pero no lo son. Cambiarlos por tu cuenta es la forma más rápida de que la inserción se vea cortada o con franjas negras en la página.

Guarda el fragmento en un lugar donde puedas copiarlo dos veces, ya que el cargador y la inserción suelen ir en sitios distintos en Webflow. Termina este paso teniendo a mano la URL de la demostración y el bloque de código generado.

Ten en cuenta que el fragmento de Storylane incluye su propia copia del script de carga, así que si instalas el cargador en todo el sitio en el paso 3, elimina esa etiqueta de script del fragmento antes de pegarlo en la página.

2. Activa el interruptor "LLM-Friendly" antes de copiar

Es fácil pasar esto por alto y difícil de adaptar después. Para un motor de búsqueda, una demo incrustada es un script opaco: todo lo que ocurre dentro es invisible, por lo que el lenguaje del producto en tu tour no cuenta como contenido de la página.

Storylane añadió un interruptor "LLM-Friendly" en el panel de incrustación que cambia esto. Su documentación explica que hace que el contenido de la demo sea legible para LLMs y motores de búsqueda, permitiendo que el tour del producto se indexe y descubra de forma orgánica. La instrucción de Storylane es clara: actívalo antes de copiar el código.

Para una página cuyo contenido principal es la demo, esta es la diferencia entre una página con sustancia y una que parece vacía para un rastreador. Actívalo y luego copia. Si la demo ya está incrustada, genera el fragmento de nuevo con el interruptor activado y reemplaza lo que hay en la página.

3. Añade el script de carga en Webflow

La incrustación depende de que el cargador de Storylane esté presente, y Storylane es específico sobre dónde debe ir: su guía de atribución de leads indica que el script debe instalarse en todas las páginas del sitio, en la sección , o la actividad de la demo no podrá vincularse a los envíos de formularios.<head>

Esto hace que la sección de código Head en la configuración del sitio sea el lugar ideal, ya que todo lo que se coloque allí se aplica a todo el sitio.

Pega el fragmento de Storylane en la configuración del sitio, luego en la pestaña de código personalizado (Custom code) y después en el código Head:

<!-- Site settings > Custom code > Head code -->
<script>
  (function () {
    'use strict'
    function e(t) {
      var r = t.head
      if (!r) return
      var i = t.querySelector(
          'script[src="https://js.storylane.io/js/v2/storylane.js"]'
        ),
        n = t.querySelector(
          'script[src="https://js.storylane.io/js/v1/storylane.js"]'
        )
      if (i || n) return
      var s = t.createElement('script')
      s.type = 'text/javascript'
      s.async = !0
      s.src = 'https://js.storylane.io/js/v2/storylane.js'
      r.appendChild(s)
    }
    e(window.document)
  })()
</script>

La guía de código personalizado de Webflow generalmente prefiere las etiquetas script justo antes de la etiqueta de cierre del cuerpo, para que la página se renderice antes de que se procese el JavaScript. La instrucción de Storylane anula esto aquí, y el compromiso es deliberado: la ubicación en el head es lo que hace que la atribución funcione.

Ten en cuenta que su fragmento comprueba si ya existe una etiqueta v1 o v2 antes de añadirla, por lo que no se cargará dos veces si una incrustación de demo trae su propia copia.

Cada sección de código acepta hasta 50.000 caracteres, una cifra que un cargador nunca alcanzará, y las secciones solo admiten HTML, CSS y JavaScript.

Guarda los cambios. Aún no aparecerá nada, porque un cargador sin una incrustación que cargar no hace nada visible, lo cual es el resultado correcto en este punto.

4. Coloca la incrustación y publica

Dónde colocar la incrustación depende del formato. Una demo en línea (inline) debe ir en un elemento Embed en el Designer para que se ajuste al diseño y herede el espaciado circundante.

La incrustación en línea es un contenedor con relleno alrededor de un iframe, que es lo que devuelve la API de incrustación de Storylane:

<!-- An Embed element on the page. Storylane's generated snippet also
     contains a loader <script> tag: delete it if you installed the
     loader site-wide, or you will load the library twice. -->
<div
  class="sl-embed"
  style="position:relative;padding-bottom:calc(56.32% + 26px);width:100%;height:0;transform:scale(1)"
>
  <iframe
    class="sl-demo"
    src="https://app.storylane.io/demo/your-demo-id"
    allow="fullscreen"
    style="position:absolute;top:0;left:0;width:100%;height:100%;border:none;"
  ></iframe>
</div>

Aquí no hay números de ancho o alto que puedan fallar. La relación de aspecto reside completamente en el del contenedor, y el iframe simplemente lo rellena.padding-bottom

Una ventana emergente (popup) necesita un botón con un ID conocido y un script que escuche el clic. Este patrón utiliza , que su sitio ejecuta en producción pero que no aparece en su documentación pública, así que considéralo algo a verificar en lugar de un contrato estable.Storylane.Play()

Asigna un ID al botón en el Designer y luego añade el listener:

<!-- Page settings > Before </body> tag, or an Embed element -->
<script>
  var button = document.getElementById('play-button')

  if (button) {
    button.addEventListener('click', (event) => {
      event.preventDefault()

      // Values come from the Share panel. The dimensions set the aspect
      // ratio the demo renders at, so do not substitute your own.
      Storylane.Play({
        type: 'popup',
        demo_type: 'image',
        width: 2854,
        height: 1560,
        scale: '0.95',
        demo_url: 'https://app.storylane.io/demo/your-demo-id',
        padding_bottom: 'calc(54.66% + 27px)',
      })
    })
  }
</script>

El ID del botón en el script debe coincidir con el ID que estableciste en el elemento en el Designer. Sin la protección mostrada arriba, un elemento faltante hará que lance un TypeError no detectado al cargar la página, lo cual es evidente en la consola pero invisible para cualquiera que pruebe haciendo clic.addEventListener

Luego publica. Webflow es claro al indicar que los efectos del código personalizado aparecen en los modos de vista previa y comentarios, pero no se activan hasta que se publica el sitio. Por lo tanto, si una demo funciona en el Designer pero no en la URL real, generalmente significa que nadie ha publicado desde que se añadió el código.

¿Qué causa que una incrustación de Storylane falle en Webflow?

La mayoría de los problemas se deben a cuatro fallos: un plan que no permite código personalizado, un sitio sin publicar, un botón emergente que no coincide con su script y una demo que se muestra con el formato incorrecto.

Los campos de código personalizado no aparecen o están desactivados

Causa: El sitio no cuenta con un plan que permita el uso de código personalizado. Webflow lo habilita en sitios con un plan de sitio activo o en los espacios de trabajo Core, Growth, Agency y Freelancer; sin uno de estos, las secciones de código personalizado no están disponibles.

Solución: Comprueba el plan del sitio antes de asumir que la configuración se ha movido. Confirma esto cuanto antes, ya que la solución alternativa que suele usarse es pegar el cargador en un elemento Embed en una sola página; esto funciona, pero duplica silenciosamente el script en cada página que contiene una demo. La versión fácil de mantener es colocar un solo cargador en la sección Footer, y para eso necesitas el plan adecuado.

La demo funciona en la vista previa pero no en el sitio publicado

Causa: El sitio no se ha publicado desde que se añadió el código. Webflow indica claramente que el código personalizado surte efecto en la vista previa, pero no se activa hasta que se publica el sitio, por lo que la vista previa es un lugar engañoso para dar por terminado el trabajo.

Solución: Publica y luego prueba en el dominio real en lugar de hacerlo en el Designer. Haz que esto sea un hábito para todo lo que implique código personalizado, ya que esta misma brecha explica la mayoría de las integraciones que funcionan para quien las creó, pero para nadie más.

Si sigue fallando después de publicar, abre la consola del navegador en la página activa y comprueba que el script del cargador esté presente.

El botón emergente no hace nada al hacer clic

Causa: El script no puede encontrar el elemento que está escuchando. El ID en el script y el ID en el elemento del Designer no coinciden, o el script se ejecuta antes de que el elemento exista en el DOM.

Solución: Define el ID del elemento en el panel de configuración del Designer y utiliza exactamente esa cadena en el script, en lugar de una clase o un nombre. Si el script está en el head en lugar de antes de la etiqueta de cierre del body, muévelo, ya que un elemento que aún no se ha renderizado no puede tener un detector de eventos asociado.

Abre primero la consola del navegador en lugar de adivinar: un script sin protección indica la línea que falla en un TypeError no detectado tan pronto como se carga la página.

La demo se ve con franjas negras, recortada o con el tamaño incorrecto

Causa: Se cambió el valor del relleno (padding) o, en el caso de una ventana emergente, el ancho, el alto o la escala. Esos números definen la relación de aspecto con la que se grabó la demo, por lo que editarlos para que encajen en un diseño distorsiona el marco en lugar de cambiar su tamaño.

Solución: Restaura los valores desde el panel Share y ajusta el tamaño del contenedor alrededor de la demo, ya que el elemento incrustado se adapta al espacio que se le da y no a los números que escribas. Si el problema ocurre en dispositivos móviles y no en escritorio, la solución está en el lado de Storylane y depende de cómo se haya capturado la demo.

Una demo HTML tiene un interruptor en Settings > Auto-scale Demo que la ajusta automáticamente, mientras que una demo de captura de pantalla usa Mobile View, que pide a los visitantes que giren su dispositivo. Comprueba ambas orientaciones en un teléfono real antes de terminar, ya que una demo grabada en una pantalla de escritorio ancha es el elemento con más probabilidades de romperse en anchos reducidos.

Qué puedes construir a continuación con Storylane y Webflow

Una vez que una demo está bien incrustada, el patrón se repite fácilmente: un tour por página de función, uno más corto dentro de una comparativa de precios o una guía de bienvenida tras iniciar sesión que los nuevos clientes ven en su primera visita.

El mismo patrón de clic para abrir funciona en la mayoría de los widgets de terceros, por lo que se transfiere directamente. Nuestra guía de pop-up de Calendly cubre el mismo flujo de reserva, que combina naturalmente con una demo cuando el siguiente paso es una conversación. Para conocer los detalles de la conexión, consulta la integración de Webflow y Storylane.