Hecho para el mercado de EE. UU. · precios en USD30 calculadoras disponibles
Español
Iniciar sesión
InsuranceQuoteWidget
Empiece gratis

Por línea de seguro

Vida

Salud

Medicare

Incapacidad y LTC

Anualidades

P&C

Auto

Empresas

Especialidad

Ayuda · HTML simple

Agregue su calculadora a cualquier página HTML

Para sitios hechos a mano, generadores de sitios estáticos y todo lo que no cubre una guía de creador. La inserción en línea es un div y un script; el resto de esta página trata sobre dónde van y qué puede bloquear una configuración estricta del sitio.

Empiece gratisTodas las plataformas

Para insertar una calculadora en una página HTML simple, copie el código en línea de la pestaña de inserción de su cuenta. Ponga el div donde deba aparecer la calculadora en el cuerpo de la página y el script justo antes de la etiqueta de cierre del body, o inmediatamente después del div. Publique la página, cárguela en un navegador y envíe un prospecto de prueba.

Cómo funciona, paso a paso

Cómo funciona, paso a paso

  1. Copie el código en línea

    En su cuenta, abra la pestaña de inserción de la calculadora o del widget, elija En línea y copie ambas líneas: el div y el script.

  2. Coloque el div

    Pegue el div en su HTML en el lugar exacto donde deba mostrarse la calculadora: dentro de su columna principal de contenido, no dentro de un párrafo ni de un enlace.

  3. Coloque el script

    Pegue el script justo antes de </body>. Ponerlo inmediatamente después del div también funciona, si sus plantillas lo hacen más fácil.

  4. Revise su política de seguridad de contenido

    Si su sitio envía un encabezado CSP, permita el origen del script y los orígenes a los que se conecta y que muestra en marcos, tal como aparecen en el código de inserción.

  5. Publique y cargue la página

    Publique la página y ábrala en una ventana privada. Use la consola de desarrollador de su navegador para detectar solicitudes bloqueadas.

  6. Envíe un prospecto de prueba

    Complete la calculadora y confirme que el prospecto aparezca en sus contactos, en su alerta por correo y en su destino de webhook.

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

  • Copiar solo el div o solo el script: la inserción en línea necesita ambos.
  • Una política de seguridad de contenido que bloquea scripts o marcos externos: la consola muestra el origen bloqueado; agréguelo a la directiva correcta.
  • Abrir el archivo desde su computadora (file://) en lugar de un servidor web: pruebe en una URL http(s) real.
  • Colocar el div dentro de un elemento con altura fija u overflow oculto: los resultados y las ventanas emergentes quedan cortados.
  • Cargar el script dos veces mediante una plantilla compartida y una página: deje una sola copia por página.
  • Motores de plantillas que escapan el código: marque el bloque como HTML sin procesar o sin escapar para que las etiquetas se conserven.

¿La calculadora chocará con el CSS y el JavaScript de mi sitio?

No. La inserción en línea se muestra dentro de un contenedor aislado (un shadow DOM), así que sus hojas de estilo no pueden cambiar el estilo de la calculadora y los estilos de esta no pueden filtrarse a su página. Tampoco necesita ninguna biblioteca de su sitio. Aplíquele estilo con sus propios ajustes de tema, paleta, fuentes y modo claro u oscuro en lugar de su CSS.

Si necesita ajustar detalles más allá de las opciones integradas, use el campo de CSS personalizado de su cuenta; se aplica dentro del contenedor de la calculadora. Consulte marca y temas.

¿Cuándo debo usar el iframe o un enlace en lugar del modo en línea?

Use el iframe que se ajusta solo cuando una página o plataforma no puede ejecutar scripts externos en su documento principal pero sí permite marcos. Use el iframe clásico para diseños fijos. Use el enlace directo en correos, mensajes de texto y destinos de anuncios. Use los modos emergente, burbuja flotante o activador propio cuando la calculadora deba abrirse a pedido.

El código de cada modo está en la misma pestaña de inserción. Cambiar de modo más adelante no cambia los ajustes de sus prospectos ni su webhook.

¿Cómo la agrego a un generador de sitios estáticos o a un framework?

Ponga el div en la plantilla o el componente de la página, y el script en su diseño base antes de la etiqueta de cierre del body, cargado solo en las páginas que lo usan. Si su framework vuelve a renderizar las páginas al navegar, asegúrese de que el div exista cuando se ejecute el script; una carga completa de la página para esa ruta es la solución más sencilla.

Marque la inserción como HTML sin procesar en los motores de plantillas que escapan la salida; de lo contrario, las etiquetas llegan como texto.

Todas las plataformas

WordPressWixSquarespaceWebflowShopifyHighLevel

Preguntas frecuentes

Preguntas que hacen las agencias

Primero la respuesta, luego los detalles.

¿El script tiene que ir antes de la etiqueta de cierre del body?

Es el lugar recomendado, porque el contenido de la página se carga primero. Colocarlo justo después del div también funciona. Lo importante es que el div exista en la página cuando se ejecute el script.

¿Qué debe permitir mi política de seguridad de contenido?

El origen del script en script-src, y los orígenes a los que se conecta la calculadora y que muestra en marcos en connect-src y frame-src. Los hosts exactos están en su código de inserción; la consola de su navegador indica cualquier origen que bloquee la política.

¿Puedo poner dos calculadoras en una página HTML?

Sí. Pegue el código de cada calculadora donde deba aparecer y verifique que ambas se carguen en la página publicada. O, de forma más ordenada, inserte un widget con varias calculadoras, que muestra varias calculadoras como pestañas, botones o tarjetas desde una sola inserción.

¿Puedo aplicar estilos a la calculadora desde mi propia hoja de estilos?

No desde el CSS de su página, porque la calculadora está aislada. Use las opciones de tema, paleta, fuente y CSS personalizado de su cuenta, que se aplican dentro de la calculadora.

¿Qué datos recoge la calculadora en mi página?

Cuando un visitante envía el formulario, recoge su nombre, correo electrónico o teléfono, cualquier mensaje, su consentimiento, los datos ingresados y resultados de la calculadora, la URL de la página y la atribución, como etiquetas UTM, ID de clic y sitio de referencia. Cubra esto en su propio aviso de privacidad, ya que ocurre en su página.

¿Cómo envío la calculadora por correo electrónico o mensaje de texto?

Use el enlace directo de la pestaña de inserción. Abre la calculadora como una página aparte, así que funciona en cualquier lugar donde funcione un enlace. Agregue etiquetas UTM al enlace para saber qué mensaje generó el prospecto.

¿La calculadora funcionará si mis visitantes bloquean scripts de terceros?

Algunas herramientas de privacidad bloquean scripts y marcos externos, y en ese caso no se muestra nada. Agregue cerca de la inserción un enlace alternativo breve al enlace directo de la calculadora, para que esos visitantes tengan otra forma de entrar.

InsuranceQuoteWidget

Dos líneas de código, un prospecto de prueba

Pegue el div y el script, publique y envíe una prueba. Si su política de seguridad es estricta, contáctenos y le indicaremos los orígenes que debe permitir.

Empiece gratisCompare los planes

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

Empiece gratisPrecios