Como incorporar o Calendly em um aplicativo React

Se você está criando um aplicativo React, pode incorporar o Calendly para permitir que os usuários agendem horários sem sair do seu site. Este guia abrange suas opções e oferece dicas para uma implementação tranquila.

Use o pacote react-calendly

A maneira mais fácil de incorporar o Calendly ao React é usar o pacote de terceiros react-calendly. Embora não seja oficialmente mantido pelo Calendly, muitos desenvolvedores o utilizam em produção.

Para começar:

Instale o pacote usando npm ou yarn:

npm install react-calendly
# or 
yarn add react-calendly

Em seguida, importe e use o componente em seu código React:

import { InlineWidget } from "react-calendly";

function BookingPage() {
return (
<InlineWidget url="https://calendly.com/YOUR_LINK" />);

}

Isso adiciona uma incorporação direta à sua página.

Outros componentes disponíveis

O pacote react-calendly também suporta:

• PopupText – renderiza um link de texto que abre uma janela pop-up
• PopupButton – renderiza um botão que abre o agendador
• PopupWidget – adiciona um widget flutuante ao seu aplicativo

Visite o pacote react-calendly para obter exemplos completos e opções de personalização.

Personalize sua incorporação

Você pode passar propriedades para personalizar o widget. Por exemplo, você pode:

• Pré-preencha o formulário de agendamento com os detalhes do convidado
• Monitorar parâmetros UTM
• Controle a altura e o estilo

Exemplo com propriedades:

<InlineWidget
url="https://calendly.com/YOUR_LINK"
styles={{ height: '700px' }}
utm={{ utmSource: 'facebook', utmCampaign: 'spring_sale' }}
prefill={{
name: 'Jane Doe',
email: 'jane@example.com'
}}
/>

Resolver problemas de layout

As incorporações do Calendly utilizam iframes. Alguns layouts do React—especialmente designs voltados para dispositivos móveis—podem causar problemas de dimensionamento ou rolagem.

Se você notar problemas de rolagem (comuns no iOS):

• Certifique-se de que o contêiner tenha pelo menos 700px de altura
• Evite overflow: contêineres automáticos ou de altura fixa
• Teste o layout usando ferramentas de desenvolvimento do navegador

Use o script de incorporação padrão (sem pacote)

Se você preferir não usar o react-calendly, pode incorporar o Calendly com o JavaScript padrão e o hook useEffect .

Exemplo:

import { useEffect } from "react";

function BookingPage() {
useEffect(() => {
const script = document.createElement("script");
script.src = "https://assets.calendly.com/assets/external/widget.js";
script.async = true;
document.body.appendChild(script);

 window.Calendly.initInlineWidget({
url: "https://calendly.com/YOUR_LINK",
parentElement: document.getElementById("calendly-embed")
});


return <div id="calendly-embed" style={{ minWidth: "320px", height: "700px" }} />;
}

Isso dá a você controle total, semelhante à incorporação do Calendly em HTML comum.