Como incorporar o Calendly em um aplicativo Angular

Você pode incorporar o Calendly em qualquer aplicativo que suporte HTML e JavaScript, incluindo Angular. Este guia mostra como adicionar o Calendly ao seu aplicativo Angular usando nosso código de incorporação.

Escolha seu método de incorporação

O Calendly usa JavaScript e um iframe para mostrar opções de agendamento. Angular suporta ambos. Você pode escolher entre dois métodos:

• Incorporação inline: HTML simples com o script do Calendly
• Incorporação avançada: usa Calendly.initInlineWidget() para mais controle

Você pode colocar qualquer um deles dentro de um modelo de componente.

Incorporar usando o método padrão direto

Use o código de incorporação padrão do Calendly no template HTML do seu componente:

<!-- Dentro do modelo do seu componente Angular -->
<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
style="min-width:320px;height:700px;">
</div>

Em seguida, adicione o script do Calendly globalmente no arquivo index.html ou angular.json:

<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>

Esse script carrega o widget do Calendly quando seu componente aparece.

Incorporar usando método JavaScript avançado

Precisa de mais controle? Use o método avançado para redimensionar, pré-preencher dados ou rastrear eventos.

Adicione este código ao seu arquivo de componente (por exemplo, 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'),
});
}
}

Certifique-se de que o script do Calendly esteja em seu index.html:

<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>