Añade CSS o JavaScript a tu horario

Esta página explica cómo personalizar tus mensajes en pantalla usando HTML, lo que te permite incorporar CSS y scripts de JavaScript. CSS te permite dar estilo a las páginas, mientras que los scripts de JavaScript pueden añadir funciones (visuales) a tu sitio web que pueden cambiar el contenido, registrar información y más.

Aprende más sobre cómo añadir HTML dentro de los campos de texto
Cambia el aspecto de tu horario con CSS
Cambia el aspecto de tu widget con CSS
Descubre más sobre los fragmentos de JavaScript y cómo funcionan
Aprende cómo insertar JavaScript para integrar funciones dinámicas en tu horario
Añade opciones extra cuando usas scripts, como texto automático o un fragmento de analytics

Añade HTML dentro de los campos de texto

En SuperSaaS, HTML, CSS y JavaScript solo se pueden insertar en campos de texto que permitan contenido HTML. Hay cuatro lugares donde puedes añadir HTML a tu campo de texto:

En el cuadro de mensaje debajo de Disposición general
En los cuadros de mensaje ubicados en cada horario en la página Configurar > Disposición
En el cuadro de comentarios HTML que se encuentra en los formularios personalizados yendo a Configurar > Diseño
En los cuadros de mensaje de correo electrónico en la página Configurar > Disposición si HTML está habilitado para los mensajes de correo electrónico

No todas las cuentas tienen permitido JavaScript. Si tienes una cuenta gratuita, es posible que debas ponerte en contacto con el soporte para pedirles que te permitan añadir JavaScript a la página. No es posible añadir JavaScript a los mensajes de correo electrónico.

Cambia el aspecto de tu horario con CSS

Si quieres añadir estilos específicos a ciertas páginas del horario para que coincidan con tu sitio web, por ejemplo, puedes usar CSS. Al igual que los scripts, CSS se puede añadir a cada cuadro de mensaje que permita HTML. Haz clic en el botón < > en la barra de herramientas del cuadro de mensaje para abrir el campo de texto del código fuente y añadir tu CSS. Necesitarás algunos conocimientos técnicos básicos para aplicar esto a tu horario. Hay dos formas de usar CSS en SuperSaaS: puedes usar CSS en línea o puedes enlazar una hoja de estilo externa.

CSS en línea

CSS en línea es un método que te permite aplicar estilos directamente a elementos HTML individuales dentro de tu horario. Esto se hace usando el atributo style dentro de la etiqueta de apertura de un elemento HTML. Por ejemplo, si quieres cambiar el color del texto en un párrafo a verde y establecer el tamaño de la fuente a 16 píxeles, usarías CSS en línea de la siguiente manera:


	<p style="color: green; font-size: 16px;"> Este es un párrafo con texto verde y un tamaño de fuente de 16 píxeles.</p>

Este es un párrafo con texto verde y un tamaño de fuente de 16 píxeles.

CSS en línea es genial para cambiar rápidamente el estilo de un elemento específico sin afectar el resto de la página. Sin embargo, se vuelve menos práctico cuando necesitas aplicar el mismo estilo a muchos elementos, ya que tienes que repetir el mismo código cada vez.

CSS en línea en el correo electrónico

SuperSaaS ofrece dos tipos de formato de correo electrónico: texto plano y HTML. Por defecto, los correos electrónicos se envían en texto plano, que solo permite texto básico. Si quieres incluir imágenes, HTML o aplicar estilos como CSS, habilita el formato HTML para los mensajes de correo electrónico en la página Disposición general. En el correo electrónico, tienes que usar CSS en línea porque los correos electrónicos no admiten hojas de estilo CSS de la misma manera que las páginas web. Después de habilitar el formato HTML para el correo electrónico, puedes aplicar CSS en línea como se explicó anteriormente.

Usando una hoja de estilo externa

Si bien CSS en línea es útil para pequeños cambios, se vuelve difícil de manejar si tienes mucho CSS, y entonces es preferible usar una hoja de estilo CSS externa. Para enlazar a una hoja de estilo externa, es importante que la hoja de estilo sea accesible a través de otro servidor, ya que no es posible almacenar archivos CSS directamente en SuperSaaS. La estructura básica para enlazar a una hoja de estilo CSS separada se ve de la siguiente manera:

Después de aplicar CSS en el código fuente de los cuadros de mensaje que permiten contenido HTML, haz clic en ‘Guardar’ y visita la página para asegurarte de que el CSS se haya aplicado correctamente.

Añadiendo CSS a tu widget

También puedes añadir CSS a un widget de un horario que se puede incrustar en tu sitio web. Si deseas personalizar el estilo del widget, puedes añadir tu propio CSS, que se colocará entre etiquetas de style en cada marco, o enlazar a una hoja de estilo externa. Sin embargo, ten en cuenta que la estructura y los identificadores del widget podrían cambiar a medida que realicemos actualizaciones, así que no confíes en que permanezcan iguales.

var supersaas = new SuperSaaS("demostraciones", "Terapeuta", {"custom_css": "h1 {color:red}"})
var supersaas = new SuperSaaS("demostraciones", "Terapeuta", {"custom_css": "https://….css"})

Para obtener más información sobre cómo personalizar tu widget de SuperSaaS, consulta nuestra documentación para desarrolladores.

Usando scripts en SuperSaaS

Los scripts de JavaScript pueden ser convenientes para integrar funciones dinámicas en las páginas o formularios de tu horario para mejorar el proceso de reserva. Puedes integrar varios servicios o funciones, como chat en vivo, botones, cuentas regresivas o scripts de seguimiento para servicios de análisis como Google Analytics o Bing.

Por ejemplo, el siguiente fragmento añade un botón como esta que se puede usar para mostrar información adicional cuando los clientes reservan a través de tu página de reservas.


	<input onclick="window.open('//static.supersaas.net/img/demo_room.jpg', 'Ventana emergente', 'width=400,height=300')" type="button" value="Ventana emergente">

Cómo insertar un script

Encuentra tu cuadro de mensaje: Navega al cuadro de mensaje donde quieres añadir tu script de JavaScript. Este cuadro de mensaje puede estar en cualquiera de las ubicaciones mencionadas anteriormente
Abre el campo de texto del código fuente: Haz clic en el botón < > en la barra de herramientas del cuadro de mensaje para abrir el campo de texto del código fuente
Copia tu script: Recupera el fragmento de código del servicio o función que deseas integrar, como un botón de chat en vivo para soporte en vivo o un servicio de análisis como Google Analytics
Añádelo al campo de texto del código fuente y guarda: Pega el fragmento de código en el campo de texto del código fuente en SuperSaaS y haz clic en Guardar. Luego, desplázate hasta la parte inferior de la página y haz clic en el botón Guardar cambios
Comprueba: Después de guardar el código, visita la página donde aplicaste el fragmento de código para asegurarte de que el script se aplique correctamente. Si necesitas el fragmento en varias páginas, repite el proceso de inserción para cada cuadro de mensaje personalizado

Cada campo de texto puede contener hasta 3000 caracteres. Si necesitas incluir más código, usa una etiqueta src en tu script para enlazar a un archivo HTML externo y coloca esta etiqueta en el código fuente. Esto te permite añadir una gran cantidad de JavaScript sin exceder el límite de caracteres. Para asegurar una carga rápida de la página, es una buena idea añadir un atributo defer a la etiqueta src.

Opciones extra dentro de SuperSaaS

Usando texto automático con scripts

Las cadenas de texto automático (“autotextos”) son un conjunto de “palabras mágicas” que se reemplazan automáticamente por otra cosa cuando se genera el mensaje. Las declaraciones de autotexto son útiles para correos electrónicos y mensajes en pantalla. Sin embargo, también se pueden usar en HTML en combinación con un script. En la página personalizar los mensajes en pantalla puedes encontrar todas las declaraciones de autotexto que se pueden usar con HTML.

El autotexto también se puede usar para añadir scripts condicionalmente, por ejemplo, para añadir un script solo si un pago es exitoso. Para añadir un fragmento de código a tu declaración de autotexto condicional, simplemente añádelo dentro de las llaves.


	$if paid {Gracias por tu compra, $name <script>…</script>}

Gracias a la declaración condicional $if, el fragmento de código en este caso solo se ejecutará en la página si alguien ha pagado. Si el pago falló o si un administrador o superusuario hizo una cita sin pagar, el script no se ejecutará. También podrías usar autotexto para solo mostrar un botón de chatbot cuando un usuario ha iniciado sesión, pero omitirlo cuando un superusuario ha iniciado sesión.

Otras formas de rastrear reservas

Otra forma de rastrear reservas exitosas es añadiendo una URL a una página en tu sitio en Configurar > Proceso ¿A dónde enviamos al usuario después de crear una reserva con éxito?. En esa página de “Gracias” añadirías tu propio script con código de análisis que los clientes ven solo después de completar el proceso de reserva. Puedes usar las “palabras mágicas” $name, $id, $price, $slot_id, $email, $lang y $full_name en la URL, que se reemplazarán por el nombre de usuario, ID, precio, ID de espacio, correo electrónico y nombre completo, respectivamente, de la reserva creada. El script en esa página puede entonces recopilar la información de la página cuando el usuario llega allí. Fíjate en que las palabras mágicas disponibles para esta URL son diferentes a las palabras mágicas disponibles para los mensajes en pantalla y para las notificaciones y los recordatorios.