Personalización del botón de activación de EC Quote

Después de instalar EC Quote en su sitio web, puede personalizar el botón desde la configuración de administración de EC Quote. Estas opciones le permiten controlar el texto del botón, el espaciado a su alrededor, su estilo y el tema de la interfaz de cotización sin modificar el código de inserción en su sitio web.

Go Live (Publicar)

Use Go Live para mostrar u ocultar el botón de activación de EC Quote en la ruta actual.

Cuando Go Live está activado, el botón de cotización aparece en cualquier lugar donde esté instalado el elemento <ec-quote></ec-quote>. Cuando Go Live está desactivado, el botón se oculta, pero el código de instalación puede permanecer en su lugar.

Consejo

Desactivar Go Live es la forma recomendada de retirar temporalmente EC Quote de una página. Solo elimine el elemento personalizado <ec-quote></ec-quote> de su sitio web si va a desinstalar por completo el complemento de esa ubicación.

Texto del botón

Use Button label (etiqueta del botón) para cambiar el texto que se muestra dentro del botón de activación.

Ejemplos:

• Get a Quote
• Start My Estimate
• Request Pricing
• Build My System

Si deja el campo vacío, EC Quote utilizará el texto predeterminado del botón de cotización.

Estilos del contenedor

Use Wrapper inline styles (estilos en línea del contenedor) para controlar el área alrededor del botón de activación. Esto es útil para el espaciado, la alineación y la ubicación en la página.

Por ejemplo:

padding: 1rem 0; text-align: center;

Opciones comunes de estilo para el contenedor:

Objetivo	Ejemplo
Agregar espaciado vertical	padding: 1.5rem 0;
Centrar el botón	text-align: center;
Agregar espacio encima del botón	margin-top: 2rem;
Centrar con flexbox	display: flex; justify-content: center;

El padding del contenedor controla el espacio fuera del botón. Úselo cuando el botón se vea demasiado cerca del contenido que lo rodea.

Estilos del botón de activación

Use Trigger button inline styles (estilos en línea del botón de activación) para dar estilo al botón en sí. Esto controla el color del botón, el color del texto, el radio del borde, el relleno interno, el ancho, la sombra y otras propiedades CSS similares.

Por ejemplo:

background: #111827; color: #fff; border-radius: 999px; padding: 14px 30px;

Opciones comunes de estilo para el botón de activación:

Objetivo	Ejemplo
Cambiar el color del botón	background: #111827; color: #fff;
Redondear el botón	border-radius: 999px;
Ajustar el relleno del botón	padding: 14px 30px;
Hacer el botón más ancho	width: 100%; max-width: 320px;
Agregar profundidad	box-shadow: 0 10px 24px rgba(17, 24, 39, 0.18);

El padding del botón controla el espacio dentro del botón, alrededor de la etiqueta.

Tema

La configuración de Theme (tema) controla el estilo principal que se utiliza en toda la interfaz de cotización.

Configuración	Qué modifica
Primary	El color principal de acciones y elementos destacados.
Primary foreground	El color del texto que se muestra sobre el color principal.
Radius	El redondeo de las esquinas de los elementos de la interfaz de cotización, medido en rem.

Use Reset theme (restablecer tema) para eliminar las personalizaciones del tema y volver al estilo predeterminado de EC Quote.

Ejemplos de temas

Estos ejemplos muestran cómo distintas opciones de tema pueden cambiar la apariencia de la experiencia de EC Quote.

Verde

Azul

Dorado

Ejemplos de estilos

Botón centrado

Estilos en línea del contenedor:

padding: 1.5rem 0; text-align: center;

Estilos en línea del botón de activación:

background: #111827; color: #fff; border-radius: 999px; padding: 14px 30px;

Botón de ancho completo

Estilos en línea del contenedor:

padding: 16px 0;

Estilos en línea del botón de activación:

width: 100%; max-width: 360px; padding: 16px 24px; border-radius: 8px;

Haga clic en Save (Guardar) después de realizar los cambios.