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>Práticas recomendadas
- Defina uma altura de pelo menos 700px para evitar barras de rolagem.
- Chame Calendly.initInlineWidget() apenas uma vez por renderização.
- Teste se há problemas ao usar o encaminhamento do Angular.
- Não recarregue o script entre as mudanças de rota.
Precisa de um exemplo?
Veja um exemplo prático com uma resposta fornecida por um engenheiro da Calendly.