Gerador de incorporação do Calendly

Cole a sua ligação do Calendly e obtenha um código de incorporação gratuito que coloca o seu calendário de marcações no seu site — com a sua cor e os detalhes que quiser mostrar. Sem registo.
Gerador de incorporação do Calendly
A sua página de agendamento ou a ligação de um evento, p. ex. https://calendly.com/your-name/30min
Pelo menos 630 px, para o calendário não ter scroll interno.

Incorpore a página de marcações

<div class="calendly-inline-widget" data-url="https://calendly.com/calendly-demo" style="min-width:320px;height:700px;"></div>
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
<p style="margin:4px auto 0;text-align:center;font:11px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#a3a7b0;">Criado com <a href="https://elfsight.pt/tools/calendly-embed-generator/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Elfsight</a></p>

  1. Clique em Copiar código acima para o copiar.
  2. Abra o ficheiro HTML ou o modelo da página.
  3. Cole o código dentro de <body>, onde o conteúdo deve aparecer.
  4. Guarde e carregue a página e abra-a num navegador para verificar.
Widget Appointment Booking

Receba marcações diretamente no seu site

Mostre a disponibilidade em tempo real e aceite marcações sem chamadas, e-mails ou coordenação manual. Serviços, preços e durações ficam num só cartão, para que os clientes marquem em segundos.

  • Marcações a toda a hora

  • Serviços com preços e durações

  • Sincronização bidirecional com o Google Calendar

Criar widget grátis
Sem cartão de crédito
Conheça o Appointment Booking

Gerador vs. «Share → Add to website» do Calendly

Ambos produzem o código de incorporação oficial do Calendly com o mesmo script. A diferença está em onde o cria e em que opções pode definir sem editar código à mão.
«Share → Add to website» do Calendly
Este gerador
Onde cria o código
Dentro da sua conta Calendly
Aqui, a partir de qualquer ligação de agendamento pública, sem iniciar sessão
Tipos de incorporação
Incorporação integrada, widget popup, texto popup
Os mesmos três: integrado, popup num botão ou ligação, selo flutuante
Ocultar os detalhes do evento e o banner de cookies
Caixas de seleção antes de copiar o código
Interruptores que adicionam hide_event_type_details=1 e hide_gdpr_banner=1
Preencher nome e e-mail
Edite a ligação à mão ou use a opção prefill do JavaScript do Calendly
Campos que adicionam name=, email= e a1= à ligação
Cores
Cores de fundo, texto e botão nos planos pagos
Escreve os mesmos parâmetros de cor; o Calendly só os aplica nos planos pagos

Onde cria o código

«Share → Add to website» do Calendly

Dentro da sua conta Calendly

Este gerador

Aqui, a partir de qualquer ligação de agendamento pública, sem iniciar sessão

Tipos de incorporação

«Share → Add to website» do Calendly

Incorporação integrada, widget popup, texto popup

Este gerador

Os mesmos três: integrado, popup num botão ou ligação, selo flutuante

Ocultar os detalhes do evento e o banner de cookies

«Share → Add to website» do Calendly

Caixas de seleção antes de copiar o código

Este gerador

Interruptores que adicionam hide_event_type_details=1 e hide_gdpr_banner=1

Preencher nome e e-mail

«Share → Add to website» do Calendly

Edite a ligação à mão ou use a opção prefill do JavaScript do Calendly

Este gerador

Campos que adicionam name=, email= e a1= à ligação

Cores

«Share → Add to website» do Calendly

Cores de fundo, texto e botão nos planos pagos

Este gerador

Escreve os mesmos parâmetros de cor; o Calendly só os aplica nos planos pagos

Parâmetros da ligação do Calendly

Estes vão depois de ? na sua ligação de agendamento, unidos com &. O gerador adiciona-os por si; também os pode escrever em qualquer ligação do Calendly.
Opção
O que faz
Valores
Notas
hide_event_type_details
Oculta a sua fotografia, nome, duração do evento, local e descrição
1
Para uma ligação a um só tipo de evento. Todos os planos.
hide_landing_page_details
Oculta os mesmos detalhes numa página que lista todos os seus eventos
1
Para uma página de destino pessoal ou de equipa. Com ambos os parâmetros, a descrição do evento pode continuar visível.
hide_gdpr_banner
Oculta o banner de cookies do Calendly
1
Só se o seu próprio site gerir o consentimento de cookies (RGPD, CCPA).
background_color, text_color, primary_color
Cor de fundo, de texto e dos botões e ligações da página de agendamento
Hexadecimal sem #, p. ex. 0069ff
Apenas nos planos pagos do Calendly. A etiqueta do botão muda para preto ou branco para dar contraste.
name, first_name, last_name, email
Preenche o formulário de marcação
Texto; espaços como %20
Use first_name e last_name se o seu formulário os pedir em separado.
a1, a2 …
Respostas às suas próprias perguntas de marcação
Texto; para caixas de seleção e botões de opção, o número da opção, p. ex. a3=2,3
O número é a posição da pergunta no formulário. Os campos «Outro» e os números para lembretes por SMS não podem ser preenchidos previamente.
text, color e textColor do botão
Etiqueta e cores do selo flutuante
Texto; hexadecimal com #, p. ex. #0069ff
Opções de Calendly.initBadgeWidget, não parâmetros da ligação. O Calendly indica as alterações de cor e do texto do botão como funcionalidades dos planos pagos.
branding
Adiciona uma linha «powered by Calendly» ao selo
true ou false
Apenas no selo.
Tamanho integrado
A caixa onde o agendador integrado fica
min-width:320px, altura de cerca de 700px
Aumente a altura se aparecer uma barra de scroll ou adicione data-resize="true" para a deixar crescer.

hide_event_type_details

O que faz

Oculta a sua fotografia, nome, duração do evento, local e descrição

Valores

1

Notas

Para uma ligação a um só tipo de evento. Todos os planos.

hide_landing_page_details

O que faz

Oculta os mesmos detalhes numa página que lista todos os seus eventos

Valores

1

Notas

Para uma página de destino pessoal ou de equipa. Com ambos os parâmetros, a descrição do evento pode continuar visível.

hide_gdpr_banner

O que faz

Oculta o banner de cookies do Calendly

Valores

1

Notas

Só se o seu próprio site gerir o consentimento de cookies (RGPD, CCPA).

background_color, text_color, primary_color

O que faz

Cor de fundo, de texto e dos botões e ligações da página de agendamento

Valores

Hexadecimal sem #, p. ex. 0069ff

Notas

Apenas nos planos pagos do Calendly. A etiqueta do botão muda para preto ou branco para dar contraste.

name, first_name, last_name, email

O que faz

Preenche o formulário de marcação

Valores

Texto; espaços como %20

Notas

Use first_name e last_name se o seu formulário os pedir em separado.

a1, a2 …

O que faz

Respostas às suas próprias perguntas de marcação

Valores

Texto; para caixas de seleção e botões de opção, o número da opção, p. ex. a3=2,3

Notas

O número é a posição da pergunta no formulário. Os campos «Outro» e os números para lembretes por SMS não podem ser preenchidos previamente.

text, color e textColor do botão

O que faz

Etiqueta e cores do selo flutuante

Valores

Texto; hexadecimal com #, p. ex. #0069ff

Notas

Opções de Calendly.initBadgeWidget, não parâmetros da ligação. O Calendly indica as alterações de cor e do texto do botão como funcionalidades dos planos pagos.

branding

O que faz

Adiciona uma linha «powered by Calendly» ao selo

Valores

true ou false

Notas

Apenas no selo.

Tamanho integrado

O que faz

A caixa onde o agendador integrado fica

Valores

min-width:320px, altura de cerca de 700px

Notas

Aumente a altura se aparecer uma barra de scroll ou adicione data-resize="true" para a deixar crescer.

Centro de Ajuda do Calendly: como personalizar a sua incorporação ↗

Se o agendador não tiver o aspeto certo

O agendador integrado tem a sua própria barra de scroll ou aparece cortado

Aumente a altura no código, p. ex. para 750px, ou adicione data-resize="true". O Calendly recomenda apenas uma incorporação com redimensionamento automático por página e sem perguntas em lista pendente.

Nada aparece na página

O seu construtor de sites pode remover as tags <script>. Cole o código num bloco HTML ou de código personalizado que mantenha scripts e confirme que a ligação abre num navegador.

O popup abre como uma página simples ou sem estilo

O popup e o selo também precisam da folha de estilos do Calendly: mantenha a linha widget.css do código gerado.

As cores não mudam

As opções de cor só funcionam nos planos pagos do Calendly. Na ligação, escreva os valores hexadecimais sem #: primary_color=0069ff.

O seu nome e os detalhes do evento aparecem duas vezes

Ative Ocultar os detalhes do evento. Use hide_event_type_details=1 para um evento e hide_landing_page_details=1 para uma página com todos os eventos.

Os campos preenchidos previamente ficam vazios

Verifique os nomes dos parâmetros (name, email, a1) e escreva os espaços como %20. As respostas seguem a posição da pergunta no seu formulário de marcação.

O selo flutuante tapa outro botão

O selo fica no canto inferior direito. Mova-o com CSS: .calendly-badge-widget { right: auto !important; left: 20px !important; }

Integrado, popup ou selo — qual escolher

Tipo
O que os visitantes veem
Ideal para
A ter em conta
Integrado
A página de agendamento dentro da sua página
Uma página dedicada de «Marcar uma chamada» ou «Contacto», onde a marcação é a ação principal
Precisa de espaço: pelo menos 320px de largura e cerca de 700px de altura
Popup num botão ou ligação
O seu próprio botão ou ligação de texto; o agendador abre sobre a página
Páginas de preços e de serviços, onde marcar é uma opção entre várias
Coloque o botão onde as pessoas decidem; usa o estilo de botões do seu site
Selo
Um botão flutuante num canto de todas as páginas em que está; o agendador abre sobre a página
Sites onde os visitantes podem querer marcar a partir de qualquer página
Pode sobrepor-se a um botão de chat ou de cookies; mova-o com CSS

Integrado

O que os visitantes veem

A página de agendamento dentro da sua página

Ideal para

Uma página dedicada de «Marcar uma chamada» ou «Contacto», onde a marcação é a ação principal

A ter em conta

Precisa de espaço: pelo menos 320px de largura e cerca de 700px de altura

Popup num botão ou ligação

O que os visitantes veem

O seu próprio botão ou ligação de texto; o agendador abre sobre a página

Ideal para

Páginas de preços e de serviços, onde marcar é uma opção entre várias

A ter em conta

Coloque o botão onde as pessoas decidem; usa o estilo de botões do seu site

Selo

O que os visitantes veem

Um botão flutuante num canto de todas as páginas em que está; o agendador abre sobre a página

Ideal para

Sites onde os visitantes podem querer marcar a partir de qualquer página

A ter em conta

Pode sobrepor-se a um botão de chat ou de cookies; mova-o com CSS

Os três carregam o mesmo script, https://assets.calendly.com/assets/external/widget.js, e mostram a mesma página de marcação com os mesmos parâmetros de ligação.

Como incorporar o Calendly no seu site

  1. Copie a sua ligação do Calendly

    No Calendly, copie a ligação da sua página de agendamento ou de um único evento.

  2. Escolha as opções

    Escolha a cor e o que ocultar.

  3. Cole o código

    Adicione o código a um bloco HTML onde o calendário deve aparecer.

Perguntas frequentes

Mais Geradores de código de incorporação

Gerador de iframe

Crie um iframe responsivo para qualquer página, formulário ou aplicação.Gerador de iframe