🛠️ Integração avançada do Koalendar para desenvolvedores

Incorpore sua página do Koalendar para que os visitantes possam agendar horários sem precisar sair do seu site.

Este guia irá ensinar-lhe como instalar nosso script de incorporação e as várias maneiras de fazer com que os links de agendamento apareçam.

🎨 Quer ver uma prévia de cada estilo?

Veja exemplos das nossas opções de incorporação →

💡 Precisa da maneira mais rápida de incorporar um vídeo com apenas copiar e colar?

Siga nosso guia simples para adicionar ao site aqui →

Instalando o script de incorporação

Copie e cole o seguinte código JavaScript logo antes da tag de fechamento </body>  tag:

<script>window.Koalendar=window.Koalendar||function(){(Koalendar.props=Koalendar.props||[]).push(arguments)};</script>
<script async src="https://koalendar.com/assets/widget.js"></script>
<script>Koalendar('init');</script>

Oferecemos quatro modos diferentes para a incorporação do Koalendar:

1. Exibir janela pop-up por meio de um hiperlink
2. Exibir um botão pop-up flutuante
3. Abrir uma janela pop-up usando JavaScript
4. Exibir uma interface de reservas integrada

Continue lendo para saber como fazer isso!

1. Exibir janela pop-up por meio de um hiperlink

Para abrir uma página de reserva quando alguém clicar em um hiperlink, adicione um data-koalendar-widget  atribuir ao link.

<a data-koalendar-widget href="https://koalendar.com/e/demo">Schedule a meeting</a>

Exibiremos o link a partir do href  em uma janela pop-up:

2. Exibir um botão pop-up flutuante

Para exibir um widget flutuante no seu site, chame Koalendar('widget') e definir o url  atribua a URL do seu Koalendar.

<script>
  Koalendar('widget', {
    "url": "https://koalendar.com/e/demo",
    "text": "Schedule a meeting",
    "shape": "rounded-full",
    "backgroundColor": "#5145CD",
    "textColor": "#FFFFFF",
    "position": "bottom-right",
    "icon": "calendar"
  });
</script>

Isso irá inserir um botão flutuante na parte inferior do seu site:

A configuração do widget aceita as seguintes propriedades:

3. Abrir uma janela pop-up usando JavaScript

Você pode usar o abrir  Toque para abrir o widget Koalendar a qualquer momento:

<script>
  Koalendar('open', { url: 'https://koalendar.com/e/demo' });
</script>

4. Exibir uma interface de reserva integrada

Esta opção permite que você insira a interface de agendamento do Koalendar diretamente no corpo do conteúdo do seu site:

Para exibir seu link no texto, crie um em linha  uma ligação atrás da outra inicializar  :

<div id="booking-page">
  <!-- this is where we will inject the booking page embed -->
</div>

<script>
  Koalendar('inline', {
     "url": "https://koalendar.com/e/demo",
     "selector": "#booking-page"
  });
</script>

O em linha  O comando aceita as seguintes opções: