Como personalizar sua incorporação

Personalize sua incorporação do Calendly para combinar com seu site—esconda detalhes do evento, remova o banner de cookies, altere cores e ajuste o posicionamento do widget.

Ocultar detalhes do evento

Você pode ocultar informações pessoais ou de eventos para evitar exibições duplicadas em seu site.

O que está oculto:

• Sua foto
• Seu nome
• Duração do evento
• Local do evento
• Descrição do evento

Para ocultar detalhes do evento ao criar sua incorporação:

1. Antes de copiar seu código de incorporação, selecione Ocultar detalhes do evento
• Funciona para incorporações diretas e pop-up
2. Selecione Copiar código.
3. Cole o código no HTML do seu site.

Se você já incorporou o Calendly: adicione estes parâmetros de consulta ao seu link do Calendly:

Observação: se você usar ambos, a descrição do tipo de evento ainda pode ser exibida.

Exemplo:

https​:​//calendl​y.com/<YOUR_LINK>?hide_event_type_details=1

Ocultar o banner de cookies

O Calendly mostra um banner de cookies por padrão. Caso o oculte, certifique-se de que seu site gerencie a legislação de cookies como RGPD ou CCPA.

Para ocultar o banner de cookies:

• Selecione Ocultar Banner de Cookies antes de copiar seu código de incorporação.

Se você já incorporou o Calendly:

• Adicione ?hide_gdpr_banner=1 ao seu link do Calendly

Exemplo de código de incorporação:

<div class="calendly-inline-widget"
data-url="https​:​//calendl​y.com/YOUR​_EVENT?hid​e_event_ty​pe_details​=1&hide_gd​pr_banner=​1"
style="min-width:320px;height:630px;"></div>
<script src="https​:​//assets.​calendly.c​om/assets/​external/w​idget.js"></script>

Alterar cores e texto de botões

Se você estiver em um plano pago, pode atualizar a aparência do seu conteúdo alterando a cor de fundo, cor do texto, cor do botão ou rótulo do botão (disponível apenas para incorporação de pop-up). Você pode fazer isso ao copiar seu código ou editar seu código de incorporação existente.

Opções disponíveis:

• background_color — Define o plano de fundo por trás da incorporação
• text_color — Altera a cor do texto
• primary_color — Atualiza a cor do botão e do link
• button_text — Substitui o rótulo padrão do botão "Agendar"

Exemplo:

<!-- O widget do selo do Calendly começa -->
<link href="https​:​//assets.​calendly.c​om/assets/​external/w​idget.css" rel="stylesheet">
<script src="https​:​//assets.​calendly.c​om/assets/​external/w​idget.js" type="text/javascript"
async>
</script>
<script type="text/javascript">
window.onload = function() {
Calendly.initBadgeWidget({
url: 'https​:​//calendl​y.com/<YOUR LINK>',
text: 'Seu botão de texto aqui',
color: '#0069ff',
textColor: '#ffffff'
});
}
</script>
<!-- Fim do widget do selo do Calendly -->

Precisa de ajuda para escolher cores? Experimente um verificador de contraste para garantir que suas opções estejam acessíveis.

Alterar a posição do widget

Ao usar nosso código de incorporação de widget pop-up, o posicionamento padrão do widget será a parte inferior da página da web alinhada com o canto direito. Para alterar o alinhamento para a esquerda ou centro da sua página, adicione um dos códigos CSS abaixo. Em seguida, ajuste as entradas esquerda e direita até chegar ao espaçamento desejado.

Esquerda:

<!-- alinhar à esquerda o widget de badge -->
<style type="text/css"> 
.calendly-badge-widget { 
right: auto ! important; 
left: 20px ! important; 
} 
</style> 
<!-- alinhar o widget de badge à esquerda -->

Centro:

<!-- alinhar centralmente o widget de badge-->
<style type="text/css">
.calendly-badge-widget { 
left: 50% ! important; 
margin-left: -100px! important; 
}
</style>
<!--centralizar o widget de badge-->

Visualize e ajuste sua incorporação

• Teste layouts móveis e de desktop
• Use a ferramenta Inspecionar do seu navegador (clique com o botão direito > Inspecionar) para experimentar as alterações
• Ajuste a largura e a altura até que a incorporação se encaixe no seu site