Cómo agregar Acuity Scheduling a tu sitio web

Revisa las diferentes formas en que puedes conectar tu página de reserva de citas a tu sitio.

Inserta el programador de reservas para que tus clientes reserven directamente a través de tu sitio web. Agrega botones y barras de reservas a las páginas de tu sitio web para llevar a los clientes al programador.

Consejo: Si empiezas y decides que quieres más ayuda práctica para configurar Acuity Scheduling, puedes contratar a un experto verificado. 

Mira el video

Lo que puedes añadir

Hay tres formas de agregar Acuity a un sitio web:

• Programador integrado: puedes insertar la experiencia completa de reservas en línea de Acuity en tu sitio web.
• Botón de reservas: puedes agregar un botón que lleve al programador en tu página de reserva de citas generada por Acuity.
• Barra de reservas. Puedes agregar una barra con un botón de reservas en la parte superior de las páginas de tu sitio web.

Insertar el programador

Puedes insertar el programador en casi cualquier sitio web, tanto si usas uno de Squarespace como si usas uno de otro proveedor. Puedes usar el programador predeterminado o cualquier programador al que puedas vincular directamente.

Sitios web de Squarespace

Agrega un bloque de reserva de citas a tu sitio web.

Consejo: Para proteger la reserva con contraseña, agrega el bloque de reserva de citas a una página con una contraseña de página. Para que la reserva sea exclusiva para los miembros del sitio, agrega Productos digitales en tu sitio y luego coloca el bloque de reserva de citas dentro del contenido controlado.

Otros sitios web

Para insertar el programador en otros sitios web, primero copia el código de inserción que Acuity genera para ti y luego agrégalo a tu sitio web. Los pasos exactos para hacerlo variarán dependiendo de tu proveedor, pero implicarán agregar HTML. Consulta la sección a continuación para obtener consejos para proveedores seleccionados o comunícate con el creador de tu sitio web.

Para obtener el código de inserción:

1. En Acuity, haz clic en Página de reserva de citas y luego en Enlace.
2. En la sección Enlaces directos e inserción, usa el menú desplegable para elegir si quieres insertar el programador predeterminado o uno más especializado, como para un calendario o tipo de cita en particular.
3. Haz clic en la pestaña Insertar programador o en la pestaña Insertar otro. Solo aparecerá uno de los dos.
4. Presiona Copiar.

Agregar un botón de reservas

La forma en que agregues un botón de reservas depende de si estás usando un sitio web de Squarespace o de otro proveedor. Puedes incrustar un botón que dirija a la página de reservas de citas para los clientes predeterminada o a cualquier programador de reservas al que puedas vincular directamente.

Sitios web de Squarespace

Añade un bloque de botón a tu sitio web. Cuando elijas el enlace para tu nuevo botón, usa un enlace a tu página de reserva de citas o un enlace directo.

Otros sitios web

Para agregar un botón de reservas a tu sitio web, primero copia el código que Acuity genera para ti y luego agrégalo a tu sitio web.

Para obtener el código:

1. En Acuity, haz clic en Página de reserva de citas y luego en Enlace.
2. En la sección Enlaces directos e inserción, usa el menú desplegable para elegir si deseas vincular al programador predeterminado o uno más especializado, como para un calendario o tipo de cita en particular.
3. Haz clic en la pestaña Botón de reservas.
4. Presiona Copiar.

Después de copiar el código, agrégalo al código de tu sitio web. Los pasos exactos para añadirlo a tu sitio web dependen del proveedor. Consulta la sección a continuación para obtener consejos para proveedores seleccionados o comunícate con el creador de tu sitio web.

Agregar una barra de reservas

Para agregar una botón de reservas a tu sitio web, primero copia el código que Acuity genera para ti y luego agrégalo a tu sitio web. La forma en que agregues una barra de reservas depende de si estás usando un sitio web de Squarespace u otro proveedor. La barra de reservas contiene un botón que puede llevar a la página de reserva de citas para clientes predeterminada o a cualquier programador al que puedas vincular directamente.

Para obtener el código:

1. En Acuity, haz clic en Página de reserva de citas y luego en Enlace.
2. En la sección Enlaces directos e inserción, usa el menú desplegable para elegir si deseas vincular al programador predeterminado o uno más especializado, como para un calendario o tipo de cita en particular.
3. Haz clic en la pestaña Barra de reservas.
4. Presiona Copiar.

Sitios web de Squarespace

Usa la inserción de código para pegar el código en la sección de pie de página de tu sitio.

La inserción de código es una función premium disponible en los planes Empresa y Commerce.

Otros sitios web

Agrega el código que copiaste al código de tu sitio web. Los pasos exactos para agregarlo a tu sitio web dependen del proveedor. Consulta la sección a continuación para obtener consejos para proveedores seleccionados o comunícate con el creador de tu sitio web.

Consejos para usar otros creadores de páginas web

Drupal

Cambia tu formato de texto a HTML completo para agregar HTML personalizado y luego agrega el fragmento de código de Acuity. 

GoDaddy

Sigue las instrucciones de GoDaddy para agregar HTML personalizado y agregar el código que Acuity genera automáticamente.

Ionos

Agrega el código de inserción generado automáticamente por Acuity a un elemento de widget/HTML. Es posible que tengas que ver el programador en la Vista de página para verificar que esté funcionando correctamente.

Para que Ionos muestre el programador integrado a los clientes en dispositivos móviles, desactiva la opción de mostrar solo contenido optimizado en smartphones y tabletas.

Leadpages

Usa el widget HTML de Leadpages para agregar el fragmento de código de Acuity.

Shopify

Usa el editor HTML para agregar el código de Acuity a una de tus páginas. Guarda los cambios antes de ver el nuevo programador.

Vistaprint/Webs.com

Usa la función HTML personalizada para agregar el código generado automáticamente de Acuity a tu sitio web.

Weebly

Arrastra el elemento de código de inserción de Weebly a tu página web y luego agrega el código generado automáticamente de Acuity al widget.

Wix

Sigue los pasos de Wix para agregar el elemento HTML a tu sitio. Cuando estés listo para agregar código al elemento HTML, usa el fragmento de código que Acuity genera para ti.

Nota: No es posible insertar el programador si estás usando Artificial Design Intelligence de Wix en lugar del editor.

Si el marco que contiene el programador insertado es más corto que el programador en sí, algunos dispositivos móviles pueden experimentar fallas al hacer la reserva. Para evitar esto, usa el editor móvil de Wix para arrastrar la parte inferior del marco hacia abajo, hasta que todo el programador esté visible. Asegúrate de que la parte inferior del programador esté visible durante todo el proceso de reserva.

WordPress

Para insertar el programador en tu sitio de WordPress, usa el Editor de texto de WordPress para agregar el código de inserción de Acuity.

Para insertar el programador:

1. Para obtener el código de inserción del programador, entra en el panel de enlaces de la página de reserva de citas y haz clic en Insertar programador y luego en Copiar.
2. Usa el editor de texto de WordPress para pegar el código que copiaste en una de tus páginas.

Nota: Puedes insertar el programador en sitios creados usando WordPress, pero no en aquellos alojados en WordPress.com, ya que tienen URL que terminan en wordpress.com. Si esto te afecta, agrega un enlace directo a la página de reserva de citas.

Zenfolio

Sigue las instrucciones de Zenfolio para crear una página personalizada y agregar e insertar código. Usa el código de Acuity para insertar el programador. 

Personalizar el botón y la barra de reservas

En general, las fuentes y otros estilos en el botón y la barra de reservas coinciden con los predeterminados para tu sitio web.

Puedes actualizar el texto del botón o de la barra con solo editar el fragmento de código que proporciona Acuity.

La barra y el botón de reservas cambian de color para que coincidan con el color de los botones y del contraste del programador. Aprende a cambiar los colores de tu programador.

Consejo: Para que la navegación del sitio web sea lo más amplia posible, es importante tener en cuenta la accesibilidad durante el proceso de diseño.Obtén más información sobre cómo crear contenido de sitio accesible.