🛠️ Incorporación avanzada de Koalendar para desarrolladores

Incrusta tu página de Koalendar para que los visitantes puedan reservar citas sin salir de tu sitio web.

Esta guía le enseñará cómo instalar nuestro script de inserción y las diversas formas de activar la aparición de enlaces de programación.

🎨 ¿Quieres ver una vista previa de cada estilo?

Vea ejemplos de nuestras opciones de integración →

💡 ¿Necesitas la forma más rápida de copiar y pegar para insertar?

Siga nuestra sencilla guía para añadirlo a su sitio web aquí →

Instalación del script de incrustación

Copia y pega el siguiente código JavaScript justo antes del cierre. </body>  etiqueta:

<script>window.Koalendar=window.Koalendar||function(){(Koalendar.props=Koalendar.props||[]).push(arguments)};</script>
<script async src="https://koalendar.com/assets/widget.js"></script>
<script>Koalendar('init');</script>

Admitimos 4 modos diferentes para la integración de Koalendar:

1. Mostrar ventana emergente mediante hipervínculo
2. Mostrar un botón emergente flotante
3. Abrir una ventana emergente mediante JavaScript
4. Renderizar una interfaz de reserva en línea.

¡Sigue leyendo para obtener más detalles sobre cómo hacerlo!

1. Mostrar ventana emergente mediante hipervínculo.

Para abrir una página de reservas cuando alguien hace clic en un hipervínculo, añade un widget de calendario de datos  atribuir al enlace.

<a data-koalendar-widget href="https://koalendar.com/e/demo">Schedule a meeting</a>

Mostraremos el enlace desde el href  en una caja de luz:

2. Mostrar un botón emergente flotante.

Para renderizar un widget flotante en tu sitio, llama a Koalendar('widget') y establecer el URL  atributo con tu URL de Koalendar.

<script>
  Koalendar('widget', {
    "url": "https://koalendar.com/e/demo",
    "text": "Schedule a meeting",
    "shape": "rounded-full",
    "backgroundColor": "#5145CD",
    "textColor": "#FFFFFF",
    "position": "bottom-right",
    "icon": "calendar"
  });
</script>

Esto insertará un botón flotante en la parte inferior de tu sitio web:

La configuración del widget acepta las siguientes propiedades:

3. Abrir una ventana emergente mediante JavaScript.

Puede utilizar el abierto  Llama para abrir el widget Koalendar en cualquier momento:

<script>
  Koalendar('open', { url: 'https://koalendar.com/e/demo' });
</script>

4. Renderizar una interfaz de reserva en línea.

Esta opción te permite colocar la interfaz de programación de Koalendar directamente en línea con el resto del contenido de tu sitio web:

Para mostrar tu enlace en línea, crea un en línea  llamada tras llamada inicializar  :

<div id="booking-page">
  <!-- this is where we will inject the booking page embed -->
</div>

<script>
  Koalendar('inline', {
     "url": "https://koalendar.com/e/demo",
     "selector": "#booking-page"
  });
</script>

El en línea  El comando acepta las siguientes opciones: