Como incorporar o Calendly em um aplicativo móvel

Adicione o Calendly ao seu aplicativo móvel usando nossas opções de incorporação. Isso permite que os usuários agendem com você diretamente—sem sair do seu aplicativo.

Exibir o Calendly usando uma WebView

As incorporações do Calendly são projetadas para serem executadas em um navegador. Para usá-los em um aplicativo móvel, a maioria dos desenvolvedores carrega o código de incorporação em uma WebView.

Uma WebView é uma janela do navegador que abre dentro do seu aplicativo. Ele mostra a página de agendamento do Calendly como uma página da web normal, mas dentro do layout do seu aplicativo.

Tipos de incorporação suportados

Você pode usar qualquer incorporação padrão ou avançada do Calendly em uma WebView:

• Incorporação direta
• Widget pop-up
• Texto pop-up

As incorporações do Calendly usam HTML e JavaScript. Se a sua estrutura móvel suportar o WebView e essas tecnologias, funcionará.

Selecione a incorporação certa para o seu aplicativo

O Calendly oferece dois níveis de controle de incorporação:

Carregar o Calendly em uma WebView

Use o componente WebView do seu framework móvel para carregar o Calendly. Aqui está um exemplo básico usando um iframe:

<iframe src="https://calendly.com/YOUR_LINK"
style="width: 100%; min-width: 320px; height: 700px;" 
frameborder="0">
</iframe>

<div id="calendly-embed" style="min-width:320px;height:700px;"></div>
<script src="https://assets.calendly.com/assets/external/widget.js"></script>
<script>
Calendly.initInlineWidget({
url: 'https://calendly.com/YOUR_LINK',
parentElement: document.getElementById('calendly-embed')
});
</script>

Solucione problemas com sua incorporação

• Teste em dispositivos reais—o comportamento pode ser diferente do dos emuladores
• Comece com uma incorporação padrão para verificar a compatibilidade
• Confirme que o JavaScript está ativado na sua WebView para recursos avançados
• Para iOS, fique atento ao excesso de conteúdo e redimensionamento de layout em WebViews baseados no Safari
• Use opções de desenvolvedor para pré-preencher formulários ou rastrear eventos de agendamento

Desbloqueie recursos avançados

Com as opções avançadas do Calendly, você pode:

• Pré-preencha o formulário de agendamento com os dados do usuário do seu aplicativo
• Acompanhe eventos de agendamento usando window.postMessage
• Redimensionar dinamicamente a incorporação com base nas ações do usuário
• Adicionar acompanhamento de campanha com parâmetros UTM

Para saber mais, consulte Incorporação avançada do Calendly para desenvolvedores.