Cómo personalizar su inserción

Personaliza tu inserción de Calendly para que coincida con tu sitio: oculta información del evento, elimina el banner de cookies, cambia colores y ajusta la ubicación del widget.

Ocultar detalles del evento

Puedes ocultar información personal o de evento para que no se muestre dos veces en tu sitio.

Lo que está oculto:

• Tu foto
• Tu nombre
• Duración del evento
• Ubicación del evento
• Descripción del evento

Para ocultar los detalles del evento al crear tu inserción:

1. Antes de copiar el código de inserción, selecciona Ocultar detalles del evento
   • Funciona tanto para inserciones en línea como emergentes
2. Selecciona Copiar código.
3. Pega el código en el HTML de tu sitio web.

Si ya has insertado Calendly: añade estos parámetros de consulta a tu enlace de Calendly:

Nota: Si utiliza ambos, es posible que la descripción del tipo de evento siga mostrándose.

Ejemplo:

https://calendly.com/<YOUR_LINK>?hide_event_type_details=1

Ocultar el banner de cookies

Calendly muestra un banner de cookies por defecto. Si lo ocultas, asegúrate de que tu sitio administre leyes de cookies como GDPR o CCPA.

Para ocultar el banner de cookies:

• Selecciona Ocultar banner de cookies antes de copiar tu código de inserción

Si ya incrustaste Calendly:

• Añade ?hide_gdpr_banner=1 a tu enlace de Calendly

Ejemplo de código de inserción:

<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_EVENT?hide_event_type_details=1&hide_gdpr_banner=1"
style="min-width:320px;height:630px;"></div>
<script src="https://assets.calendly.com/assets/external/widget.js"></script>

Cambiar colores y texto de botón

Si tienes un plan de pago, puedes actualizar la apariencia de tu inserción cambiando el color de fondo, el color del texto, el color del botón o la etiqueta del botón (solo disponible para la inserción emergente). Puede hacer esto al copiar tu código o editando tu código de inserción existente.

Opciones disponibles:

• background_color: establece el fondo detrás de la inserción

• text_color: cambia el color del texto

• primary_color — Actualiza el color del botón y el enlace

• button_text — Reemplaza la etiqueta predeterminada del botón "Programar"

Ejemplo:

<!-- Calendly badge widget begin -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"
async>
</script>
<script type="text/javascript">
window.onload = function() {
Calendly.initBadgeWidget({
url: 'https://calendly.com/<YOUR LINK>',
text: 'Your Button Text Here',
color: '#0069ff',
textColor: '#ffffff'
});
}
</script>
<!-- Calendly badge widget end -->

¿Necesitas ayuda para elegir colores? Prueba un comprobador de contraste para asegurarte de que tus opciones sean accesibles.

Cambia la posición del widget

Cuando se utiliza nuestro código de inserción de widget emergente, la ubicación predeterminada del widget será la parte inferior de la página web alineada con la esquina derecha. Para cambiar la alineación a la izquierda o al centro de la página, añade uno de los códigos CSS a continuación. Luego, ajusta las entradas izquierda y derecha hasta llegar al espaciado deseado.

Izquierda:

<!-- left align the badge widget -->
<style type="text/css"> 
.calendly-badge-widget { 
right: auto ! important; 
left: 20px ! important; 
} 
</style> 
<!-- end left align the badge widget -->

Centro:

<!-- center align the badge widget-->
<style type="text/css">
.calendly-badge-widget { 
left: 50% ! important; 
margin-left: -100px! important; 
}
</style>
<!--end center align the badge widget-->

Previsualiza y ajusta tu inserción

• Prueba tanto diseños móviles como de escritorio
• Usa la herramienta Inspeccionar de tu navegador (selección con el botón derecho > Inspeccionar) para probar los cambios
• Ajusta el ancho y la altura hasta que la inserción se adapte a tu sitio