Imagine que você tem um estúdio de yoga. O site está no ar há dois anos — um amigo montou na época — e você mal lembra o login. Mas alguém te disse que adicionar um botão "Agende sua aula" é só colar um trecho de código.
Essa pessoa está certa. E você consegue fazer isso em uns 20 minutos.
Resumo rápido:
- Qualquer site — WordPress, Wix, Squarespace, HTML puro — pode ter um botão "Agende Agora" funcionando ainda hoje
- Setmore, Cal.com e Calendly têm planos gratuitos de verdade, sem prazo de validade
- Existem três estilos de widget; o botão flutuante é a melhor opção padrão para quem acessa pelo celular
- Você não precisa do seu desenvolvedor, de plugin nenhum, nem saber programar
Neste Artigo
- Por Que Agendamento Incorporado Bate o Link Solto
- Três Formas de Adicionar: Inline, Popup ou Flutuante
- Melhores Ferramentas Gratuitas: Comparação Rápida
- Como Pegar o Código de Incorporação
- Como Colar em 7 Plataformas
- Antes de Publicar: Checklist de 3 Minutos no Celular
- Quando Algo Quebra: Soluções Rápidas
- Perguntas Frequentes
Try this prompt⌘+Enterto launch
Por Que Agendamento Incorporado Bate o Link Solto
A maioria dos pequenos negócios começa da mesma forma: coloca o link do WhatsApp Business ou do Calendly na bio do Instagram e vai levando. Funciona — até o dia em que para de funcionar.
O problema é simples: toda vez que o cliente precisa sair do seu site para agendar, você perde uma parte deles no caminho. A notificação do WhatsApp aparece, a outra aba trava, a pessoa pensa "depois eu volto" — e não volta. No Brasil, onde a maioria das pessoas acessa tudo pelo celular e alterna entre apps o tempo todo, esse atrito é ainda maior.
Plataformas de agendamento publicaram dados mostrando aumento de 2 a 3 vezes nos agendamentos concluídos quando o calendário fica incorporado direto no site, em vez de levar o cliente para uma página externa. Depois que você cola o snippet que a ferramenta gera pra você, tudo acontece dentro do seu site — sem redirecionamentos, sem fricção.
Isso é especialmente crítico no Brasil, onde a maioria do tráfego de negócios locais — salões, estúdios, clínicas — vem de celular. Um toque a mais fora do seu site são agendamentos que você está deixando na mesa.
Três Formas de Adicionar: Inline, Popup ou Flutuante
Antes de pegar o código de incorporação, decida qual estilo faz mais sentido para o seu site:
Widget inline — O calendário completo fica exibido direto na página. O visitante já vê tudo sem precisar clicar em nada. Ideal para: negócios em que agendar É o motivo principal da visita (massoterapeuta, personal trainer, estúdio de tatuagem). Normalmente vai em uma página dedicada "Agende sua consulta" ou "Marque sua aula".
Widget popup — Um botão fica na página; ao clicar, o calendário abre em uma janela sobreposta. Deixa o layout limpo. Ideal para: negócios que querem mostrar conteúdo primeiro — um restaurante exibindo o cardápio, uma fotógrafa mostrando o portfólio — e só depois a opção de agendamento.
Botão flutuante — Um chip "Agende Agora" fica fixo no canto inferior da tela em todas as páginas do site. Mesmo que o visitante esteja lendo a página "Sobre" ou rolando a galeria de fotos, o botão está sempre visível. É a melhor opção padrão para qualquer público que acessa majoritariamente pelo celular — que é a realidade da maior parte dos negócios de serviço no Brasil.
Escolha um. Colocar os três na mesma página só gera bagunça e confunde o visitante.
Melhores Ferramentas Gratuitas: Comparação Rápida
Todas as ferramentas abaixo têm planos gratuitos de verdade — não é trial, não pede cartão de crédito.
| Ferramenta | O que o plano grátis inclui | Tipos de widget | Melhor para |
|---|---|---|---|
| Setmore | Agendamentos ilimitados, até 4 funcionários, lembretes por e-mail | Inline, popup, flutuante | Salões, spas, personal trainers, professores particulares |
| Cal.com | Tipos de evento ilimitados, sincronização com calendário, pagamentos via Stripe | Inline, popup, flutuante | Donos que gostam de tecnologia e querem controle total (código aberto) |
| Calendly | 1 tipo de evento, agendamentos ilimitados | Inline, popup | Consultores, coaches, profissionais solo |
| TidyCal | Agendamentos ilimitados, 1 conexão de calendário | Inline (iframe) | Freelancers, atendimentos simples 1 a 1 |
| Square Appointments | 1 local, 1 funcionário | Inline, popup | Disponível principalmente nos EUA; usuários no Brasil devem checar disponibilidade antes |
Minha recomendação honesta para quem está começando do zero: Setmore. O plano gratuito deles é o mais generoso em 2026 — agendamentos ilimitados, até quatro funcionários, lembretes por e-mail e funciona sem dor de cabeça em qualquer construtor de sites. Nada escondido.
Cal.com é uma boa segunda opção se você quer controle total e não se incomoda com uma configuração um pouco mais demorada. É open source, então não tem surpresas de preço no futuro. Calendly é o nome mais conhecido, mas frustra rápido no plano gratuito — um tipo de evento só significa que um salão não consegue listar corte, coloração e hidratação separadamente sem pagar.
Como Pegar o Código de Incorporação
Todas as ferramentas geram um snippet HTML curto pra você. Veja onde encontrar nas três mais populares:
Setmore:
- Entre na conta → Settings → Website Integration
- Escolha o estilo do widget (inline, popup ou botão flutuante)
- Personalize a cor do botão para combinar com o seu site
- Clique em Copy Code — você recebe um snippet curtinho
Calendly:
- Abra o tipo de evento → Share → Add to Website
- Escolha Inline, Popup Text ou Popup Widget
- Copie o snippet
Cal.com:
- Abra o tipo de evento → Share → Embed
- Escolha o estilo, ajuste as cores → Copie o snippet
O snippet vai parecer um bloco de caracteres estranhos. Não deixa isso te intimidar — é só texto, e você vai colar ele em um lugar específico.
Como Colar em 7 Plataformas
Try this prompt⌘+Enterto launch
WordPress — Edite a página, troque para o editor de Código (ou adicione um bloco HTML personalizado no Gutenberg) e cole. Para o botão flutuante, vá em Aparência → Editor de Arquivos do Tema → footer.php e cole logo antes de </body>.
Wix — Arraste um elemento "Embeds" para a página, escolha "HTML iframe" e cole dentro. Para o botão flutuante: Configurações → Código personalizado → Adicionar código às páginas → Corpo – fim.
Squarespace — Adicione um Bloco de Código a qualquer página e cole o snippet. Para o botão flutuante: Configurações → Avançado → Injeção de Código → Rodapé.
Webflow — Arraste um elemento HTML Embed e cole dentro. Para o botão flutuante: Configurações do Projeto → Código personalizado → Código do Rodapé.
Site em HTML puro (aquele que seu amigo montou lá em 2019) — Abra o arquivo .html em qualquer editor de texto e cole o snippet onde quer que ele apareça. Para o botão flutuante, cole logo antes de </body> em cada arquivo de página. Um editor gratuito como VS Code resolve.
Shopify / Nuvemshop — No Shopify: Temas → Editar código → Abra theme.liquid → cole o snippet do botão flutuante logo antes de </body>. Para widget inline em uma página, adicione uma seção HTML personalizada no conteúdo. Na Nuvemshop (alternativa brasileira ao Shopify): Layout → Editar HTML/CSS → cole no rodapé do tema.
Google Sites — Inserir → Embed → "Por código." Atenção: o Google Sites restringe parte do JavaScript, então a opção de iframe do Cal.com funciona melhor do que embeds baseados em JS.
Se o seu site está em uma plataforma não listada aqui, a lógica é a mesma: encontre onde adicionar HTML personalizado ou um bloco de código, cole o snippet, salve. Toda plataforma grande tem isso.
Antes de Publicar: Checklist de 3 Minutos no Celular
Pegue o celular e passe por esses três pontos antes de avisar os clientes que o botão está no ar:
1. O calendário carrega de verdade no celular? Abra a página no navegador do telefone. Se não aparecer em 3 segundos, tente trocar para a versão iframe da ferramenta em vez do embed JavaScript — costuma ser mais compatível com telefones mais antigos, que ainda são maioria no Brasil.
2. O botão está visível sem precisar rolar a tela? O botão flutuante resolve isso automaticamente. Se você usou um widget inline, confirme que ele aparece na parte de cima da página no celular (o visitante não deveria precisar rolar para descobrir que pode agendar). Suba ele na página se necessário.
3. Você consegue completar um agendamento de teste do início ao fim? Faça o caminho completo pelo celular — selecione o serviço, escolha um horário, preencha o nome, confirme. Se algo quebrar, verifique se as configurações de visualização mobile da ferramenta estão ativadas. A maioria tem um toggle de visualização otimizada para celular nas configurações de exibição.
Três minutos. Faça isso antes de mandar mensagem no WhatsApp dos clientes dizendo que o botão está no ar.
Quando Algo Quebra: Soluções Rápidas
Caixa branca em branco onde deveria estar o widget — As configurações de segurança do seu site estão bloqueando o embed. Tente trocar da versão iframe para o embed JavaScript (ou o contrário). Se você estiver em um plano de hospedagem gerenciada, fale com o suporte e peça para liberarem embeds do domínio da ferramenta de agendamento.
A cor do botão não combina com o site — Volte nas configurações de embed da ferramenta (Setmore e Calendly têm seletores de cor visuais) e ajuste antes de copiar o código de novo. Você não precisa mexer em CSS.
Funciona no computador, invisível no celular — Alguns temas do WordPress ou construtores de páginas desativam o código personalizado no mobile separado do desktop. Verifique as configurações mobile do seu tema, ou use a página hospedada da ferramenta como link direto do botão no celular.
Agendamentos não aparecem no seu calendário — Provavelmente você pulou a etapa de sincronização de calendário durante a configuração. Vá em Configurações → Integrações na ferramenta de agendamento e conecte seu Google Calendar ou Outlook. Setmore e Calendly guiam você por esse processo em uns 60 segundos.
Se você preferir pular o quebra-cabeça de "adicionar ao site existente", o Fardino constrói seu site com o agendamento já configurado — descreva o seu negócio e ele entrega um site completo com a seção de agendamento pronta.
Para uma visão mais completa de como montar o site de um pequeno negócio, o Guia Completo de Site para Pequenas Empresas cobre tudo, de templates até publicação. E se você está construindo especificamente para um negócio de serviços, nossos guias sobre sites para salões de beleza com agendamento e sites para personal trainers e estúdios de yoga entram fundo na configuração de agendamento nesses contextos.
Quer um caminho mais direto para colocar seu primeiro widget de agendamento no ar? Comece com Agendamento Online em 15 Minutos — ele cobre a escolha da ferramenta e a configuração básica em uma tacada só.
Perguntas Frequentes
Como adiciono um widget de agendamento online no meu site de graça?
Crie uma conta no Setmore, Calendly, Cal.com ou TidyCal — todos têm planos gratuitos sem prazo de validade. Vá nas configurações de embed ou widget da sua conta, copie o snippet de código e cole no HTML ou editor de páginas do seu site. A maioria dos construtores de site tem um elemento "HTML personalizado" ou "Bloco de código" que torna isso uma simples colagem.
Posso adicionar um widget de agendamento em um site que eu não construí?
Sim. Desde que você tenha acesso ao back-end — mesmo que seja só para editar uma página — você consegue colar o snippet do widget. Quem construiu não importa. A única exceção são plataformas completamente fechadas, como Linktree ou páginas do Facebook, onde você não pode adicionar código personalizado; nesses casos, link direto para a sua página de agendamento.
Qual é o widget de agendamento gratuito mais fácil de incorporar em 2026?
O Setmore é o mais fácil para quem não tem perfil técnico: configuração visual, cópia com um clique e funciona em qualquer construtor de sites. O Calendly é mais conhecido, mas o limite de um tipo de evento no plano gratuito frustra a maioria dos negócios de serviço rapidinho — um salão não consegue listar corte, coloração e hidratação sem pagar.
Qual é a diferença entre widget de agendamento inline e popup?
O inline mostra o calendário completo direto na página — sem precisar clicar em nada. O popup deixa a página mais limpa e só mostra o calendário quando alguém clica no botão "Agende Agora". O botão flutuante é um terceiro estilo: um chip que fica visível no canto enquanto os visitantes rolam qualquer página do site. Para a maioria dos negócios de serviço com público mobile-first — que é praticamente todo mundo no Brasil — o flutuante é a melhor opção padrão.
Como adiciono um widget de agendamento em um site HTML puro?
Abra o arquivo .html em qualquer editor de texto e cole o snippet da ferramenta de agendamento onde quiser que ele apareça. Para um botão flutuante, cole logo antes da tag </body>. Não precisa de framework, plugin ou habilidade especial — é só uma colagem de texto.
Escrito pelo time da 0xMinds — testamos ferramentas de IA para você não precisar. Crie um site com IA →
