Reserva online

Diseñador de botones

Versión Markdown | Tiempo de lectura: unos 3 min.; Última actualización: 2026-09-24 06:30:43

Hemos desarrollado el diseñador de botones para que puedas añadir en tu sitio web un botón, personalizado con múltiples opciones, que dé acceso a tu calendario online.

Cada botón que diseñes tendrá su propio código de integración, que debes usar para insertar el botón en tu sitio web.

Inicia sesión en TuCalendi con tu usuario y contraseña. Ve a la opción "Códigos de inserción" del menú vertical:

Códigos de inserción

En la sección "Botón" haz clic en "Seleccionar".

Tipo de widget botón

Elige el tipo de widget que quieres insertar en tu sitio web:

  • Calendario.
  • Encuesta inteligente.

El proceso es exactamente el mismo para ambos tipos de widget.

Selecciona "Calendario":

Código de inserción

Haz clic en el menú desplegable y elige el Calendario o el Evento que quieres mostrar cuando alguien haga clic en el botón de reserva.

En este caso hemos elegido el evento llamado "First Event (30 Min)".

Activa la opción "Usar diseñador de botones".

Diseñador del código del botón

Al hacer clic en "Diseñador de botones" accederás al diseñador, con numerosas opciones para que crees el botón como quieras.

Diseñador de botones

Las posibilidades para diseñar y personalizar los botones son múltiples:

  • Texto del botón. El mensaje que aparece en el botón. Puedes crear una llamada a la acción atractiva que anime a tus clientes a hacer clic y reservar una cita.
  • Color del botón.
  • Color del texto.
  • Familia de fuente. Puedes elegir entre diferentes fuentes para el texto del botón.
  • Alineación del texto. Alinea el texto dentro del botón.
  • Estilo de fuente.
  • Grosor de fuente. Para elegir el grosor de la fuente.
  • Tamaño de fuente. Para cambiar el tamaño de la fuente simplemente moviendo la barra para aumentarlo o reducirlo.
  • Ancho mínimo. El ancho mínimo del botón.

Y otras opciones que, además de tener la barra para cambiar el valor, se desbloquean al hacer clic en el "Candado", para que puedas jugar más con estas funciones:

  • Relleno (padding).

Diseñador de botones padding

  • Radio del borde.

Diseñador de botones radio del borde

  • Sombra de caja.

Diseñador de botones sombras

Cuando hayas diseñado el botón:

Botón diseñado

haz clic en "Guardar" y se generará el código de inserción del botón que has diseñado:

Código de inserción de un botón

Solo tienes que copiar el código y pegarlo en tu sitio web para que se muestre tal y como lo has diseñado.