Puedes insertar Calendly en cualquier aplicación que admita HTML y JavaScript, como Angular. Esta guía muestra cómo añadir Calendly a su aplicación Angular utilizando nuestro código de inserción.
Selecciona el método de inserción
Calendly utiliza JavaScript y un iframe para mostrar las opciones de programación. Angular es compatible con ambos. Puedes elegir entre dos métodos:
- Inserción en línea: HTML simple con el script de Calendly
- Inserción avanzada: utiliza Calendly.initInlineWidget() para tener más control
Puedes colocar cualquiera de las dos dentro de una plantilla de componente.
inserta utilizando el método en línea estándar
Utiliza el código de inserción estándar de Calendly en la plantilla HTML de tu componente:
<!-- Utilice la plantilla de su componente Angular -->
<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
style="min-width:320px;height:700px;">
</div>A continuación, añade el script de Calendly globalmente en tu archivo index.html o angular.json:
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>Este script carga el widget de Calendly cuando aparece tu componente.
Incorporar utilizando el método avanzado de JavaScript
¿Necesitas más control? Utiliza el método avanzado para cambiar el tamaño, prellenar datos o realizar un seguimiento de eventos.
Añade este código a tu archivo de componente (por ejemplo, booking.component.ts):
import { Component, AfterViewInit } from '@angular/core';
declare const Calendly: any;
@Component({
selector: 'app-booking',
template: `<div id="calendly-embed" style="min-width:320px;height:700px; "></div>`,
})
export class BookingComponent implements AfterViewInit {
ngAfterViewInit(): void {
Calendly.initInlineWidget({
url: 'https://calendly.com/YOUR_LINK',
parentElement: document.getElementById('calendly-embed'),
});
}
}Asegúrate de que el script de Calendly está en index.html: