Por línea de seguro

Ayuda · Webflow

Agregue su calculadora a Webflow

El elemento Embed de Webflow (Code Embed) contiene HTML y scripts personalizados dentro de su diseño. La calculadora se comporta entonces como cualquier otro elemento del lienzo: usted controla su contenedor, su ancho y su espaciado en cada punto de quiebre.

Para insertar una calculadora en Webflow, abra el Designer, arrastre un elemento Embed desde el panel Add hasta la sección donde deba aparecer la calculadora, pegue el código de la pestaña de inserción de su cuenta, guarde y cierre. Después publique el sitio y pruébelo en la URL publicada, porque es posible que los scripts no se ejecuten en el lienzo del Designer.

Cómo funciona, paso a paso

Cómo funciona, paso a paso

  1. Copie el código de su pestaña de inserción

    Elija el modo En línea en su cuenta y copie el código.

  2. Prepare un contenedor

    En el Designer de Webflow, agregue una sección o un div block para la calculadora y dele un ancho máximo y un relleno razonables.

  3. Agregue un elemento Embed

    Abra el panel Add, busque Embed (Code Embed) en Components o Advanced y arrástrelo a su contenedor.

  4. Pegue el código y guarde

    Pegue el código de inserción en el editor de HTML que se abre y haga clic en Save & Close.

  5. Revise cada punto de quiebre

    Pase por los puntos de quiebre de tableta y celular para asegurarse de que el contenedor siga a ancho completo y no esté limitado por alturas fijas.

  6. Publique y pruebe

    Publique en su dominio, abra la página real en una ventana privada, complete la calculadora y confirme que llegó el prospecto de prueba.

Dónde va su código de inserción

<!-- Pegue aquí el código de inserción de la pestaña de inserción de su cuenta -->

Errores comunes

  • Juzgar por el lienzo del Designer: ahí los scripts pueden verse solo como un marcador de posición. Pruebe en el sitio publicado.
  • Una altura fija en el contenedor o en el elemento Embed: los resultados de la calculadora quedan cortados. Deje la altura en automático.
  • Overflow en hidden en un elemento padre: las ventanas emergentes o los resultados largos pueden quedar cortados.
  • Funciones de código personalizado que dependen de su plan de Webflow: revise lo que permite el plan de su sitio antes de depender del código para todo el sitio.
  • Probar solo en el subdominio de pruebas: confirme en el dominio que usarán los visitantes, ya que esa es la URL de página que registran sus prospectos.
  • Duplicar el código de la burbuja flotante en los ajustes de la página y en los del sitio: el lanzador aparece dos veces.

¿Cómo debo organizar la calculadora en Webflow?

Dele a la calculadora su propia sección con un contenedor de ancho máximo, altura automática y sin recorte por overflow. La calculadora se ajusta al espacio que recibe, así que el contenedor decide cómo se ve. En escritorio suele funcionar bien un ancho parecido al de su columna principal de lectura, y en celular el ancho completo con un relleno moderado.

Como la inserción en línea se muestra en un contenedor aislado, las clases de Webflow no aplican estilos a la calculadora en sí. Úselas solo para la sección que la rodea, y adapte la apariencia de la calculadora con su tema, paleta y fuentes en su cuenta.

¿Puedo colocar calculadoras en páginas del CMS de Webflow?

Sí. Un elemento Embed dentro de una plantilla del CMS aparece en cada elemento que usa esa plantilla. Eso conviene a una colección de 'Guías de cobertura' donde cada guía enlaza a su ramo. Si distintos elementos necesitan calculadoras distintas, agregue un campo de texto simple con el enlace directo de cada una y vincule un botón a ese campo.

Cada prospecto registra la URL de la página, así que aunque una plantilla sirva a muchos elementos, puede saber qué guía generó el prospecto.

¿Cómo agrego una burbuja flotante a todo el sitio de Webflow?

Pegue el código de la burbuja flotante en el área de código personalizado para todo el sitio (antes de la etiqueta de cierre del body) en los ajustes de su proyecto y publique. Aparecerá en todas las páginas. Si solo la quiere en ciertas páginas, use en su lugar los ajustes de código personalizado de cada página, y no la agregue en ambos lugares.

Una burbuja que abre un widget con varias calculadoras permite a los visitantes elegir su ramo desde cualquier lugar. Consulte widgets con varias calculadoras.

Preguntas frecuentes

Preguntas que hacen las agencias

Primero la respuesta, luego los detalles.

¿Por qué el elemento Embed se ve vacío en el Designer?

Webflow no siempre ejecuta scripts externos en el lienzo, así que puede ver un marcador de posición. Publique y vea la página real. Si también está en blanco ahí, verifique que se haya pegado el código completo y que ningún elemento padre tenga una altura fija o el overflow oculto.

¿Necesito un plan de pago de Webflow?

La disponibilidad del código personalizado depende de los planes de su sitio y de su espacio de trabajo en Webflow, que Webflow define y actualiza. Revise las funciones de código personalizado de su plan actual. Un enlace directo a la calculadora funciona con cualquier plan.

¿Las interacciones de Webflow pueden animar la calculadora?

Puede animar la sección que la rodea, por ejemplo, para que aparezca con un fundido al desplazarse. Evite transformaciones en el elemento padre directo de la calculadora que puedan afectar a las ventanas emergentes, y pruebe en celular después de agregar cualquier interacción.

¿Los estilos globales de Webflow cambiarán la calculadora?

No. La inserción en línea está aislada del CSS de su sitio. Defina sus fuentes, paleta, tema y modo claro u oscuro en su cuenta para que coincidan con el sitio.

¿Puedo usar una sola calculadora en muchas páginas de Webflow?

Sí. Pegue el mismo código en un elemento Embed en cada página o en un componente reutilizable. Los prospectos registran la página de la que vinieron, así puede comparar ubicaciones.

¿Cómo conservo las etiquetas UTM cuando los visitantes llegan desde anuncios?

No hace falta nada más. La calculadora registra con el prospecto las etiquetas UTM, los ID de clic, el sitio de referencia, la página de destino y la fuente del primer contacto. Solo etiquete de forma coherente los enlaces de sus anuncios y correos.

¿Puedo abrir la calculadora desde un botón existente de Webflow?

Sí. Use el modo de activación "su propio enlace o botón" de la pestaña de inserción, o simplemente apunte el botón al enlace directo de la calculadora si prefiere que se abra como una página aparte.

InsuranceQuoteWidget

Agregue su calculadora a su sitio de Webflow

Coloque un elemento Embed, pegue su código y publique. Después envíe un prospecto de prueba hasta HighLevel.

Empiece gratisCompare los planes

Plan Producer gratis · 14 días de prueba en planes de pago · cancele cuando quiera