O Calendly ajusta o layout da agenda para se ajustar ao tamanho de seu contêiner. Você pode alterar o layout e o tamanho para se adequar melhor ao seu site ou aplicativo.
Escolha um layout com base na largura
A incorporação direta do Calendly tem três estilos de layout. O estilo depende da largura do contêiner (chamado de "contêiner pai").
Layout de janela grande
Largura do elemento pai >= 1100px
Exemplo
<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
style="width:1100px;height:700px;"></div>Layout de janela média
Largura do elemento pai < 1100px e >= 650px
Exemplo
<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
style="width:700px;height:700px;"></div>Layout de janela pequena
Largura do elemento principal < 650px
Exemplo
<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
style="width:600px;height:700px;"></div>Remover barras de rolagem
Se você vir uma barra de rolagem dentro da incorporação:
- Aumente a altura no código de incorporação style="min-width:320px;height:750px;"
- Use data-resize="true" para ativar o redimensionamento automático
Exemplo:
<div
class="calendly-inline-widget"
data-url="https://calendly.com/your-link"
style="min-width:320px; height:750px;"
data-resize="true">
</div>
<script
type="text/javascript"
src="https://assets.calendly.com/assets/external/widget.js"
async>
</script>Largura mínima para dispositivos móveis
O Calendly precisa de pelo menos 320px de largura para ser exibido corretamente no celular.
Se a incorporação parecer descentralizada ou cortada:
- Verifique se há espaçamento ou margens extras no celular.
- Certifique-se de que o contêiner tenha pelo menos 320px de largura.
Teste seu layout de incorporação
Depois de adicionar a incorporação:
- Verifique o layout no desktop e no celular.
- Use a ferramenta de inspeção do navegador para visualizar tamanhos diferentes.
- Ajuste o tamanho ou as margens do contêiner conforme necessário