Neste tutorial, você vai aprender como configurar e incorporar o formulário de agendamento do Minha Agenda Virtual diretamente no seu site por meio de um iframe.

A integração permite personalizar a forma como o formulário será apresentado, definir o domínio em que ele será utilizado, escolher quais agendas ficarão disponíveis e visualizar o resultado em tempo real antes de incorporá-lo ao site.

Dessa forma, seus clientes poderão realizar agendamentos diretamente pelo seu site, sem precisar acessar uma página externa do Minha Agenda Virtual, mantendo a experiência alinhada à identidade visual da sua empresa.

Ao final deste tutorial, você saberá como criar e configurar um iframe de agendamento e como utilizar o código gerado para incorporá-lo ao seu site.

I – Acessando as integrações

Acesse o Minha Agenda Virtual e faça login na sua conta.
No menu lateral, clique em Integrações.
Na tela de integrações, localize o card Sites (Embed).
Clique em Configurar, ou em Gerenciar, caso a integração já esteja configurada.

Ao acessar o Sites (Embed), você será direcionado para a tela Iframes de Agendamento.

II – Criando um novo iframe

Na tela Iframes de Agendamento, clique em Novo Iframe.

Ao criar um novo iframe, um novo card será adicionado à lista de iframes disponíveis no lado esquerdo da tela. Cada card representa uma configuração de iframe que poderá ser utilizada no site. Enquanto as configurações não forem salvas, o card aparece como Não salvo.

Após selecionar um iframe, o painel de configuração será exibido ao lado. É nesse mesmo painel que você poderá configurar as características do iframe selecionado.

No painel de configuração, você encontrará as seguintes opções:

Geral

Na seção Geral, configure as informações principais do iframe:

Nome: informe um nome para identificar o iframe;
Modo: selecione o formato de apresentação do formulário. O Padrão mostra o agendamento em passos: a agenda, o dia e o horário, os dados e a confirmação. O Calendário começa pelo serviço e, depois, mostra um calendário com os horários livres de cada dia;
Título personalizado: defina o título que será apresentado no formulário;
Mostrar logo: escolha se o logo deverá ser exibido;
Mostrar título: escolha se o título deverá ser exibido;
Domínios permitidos: informe os domínios em que o iframe poderá ser utilizado.

Caso o campo Domínios permitidos seja deixado vazio, o iframe poderá ser utilizado em qualquer site. Também é possível informar um domínio por linha e utilizar o formato *.dominio.com para permitir subdomínios.

Cores

Na seção Cores, você poderá personalizar a aparência do formulário de agendamento.

É possível configurar:

Cor Primária;
Cor Secundária;
Cor de Fundo;
Cor do Card;
Cor do Texto.

Essas configurações permitem adaptar o formulário à identidade visual da empresa.

Tamanho e Forma

Na seção Tamanho e Forma, configure as dimensões e o arredondamento do formulário.

Você poderá definir:

Largura;
Altura;
Arredondamento.

III – Criando e gerenciando diferentes iframes

Caso seja necessário criar mais de uma configuração, basta clicar novamente em Novo Iframe.

A cada novo iframe criado, um novo card será adicionado à lista lateral, como Iframe 2, Iframe 3, e assim por diante.

Cada iframe pode possuir suas próprias configurações. Para editar uma configuração, basta selecionar o card correspondente na lista lateral e utilizar o painel de configuração.

Dessa forma, é possível criar diferentes versões do formulário de agendamento para utilizar em diferentes páginas ou sites, mantendo cada configuração organizada separadamente.

IV – Selecionando as agendas

Na seção Agendas, selecione quais agendas ficarão disponíveis no formulário incorporado.

Você poderá escolher uma ou mais agendas para serem apresentadas aos clientes.

Se nenhuma agenda for selecionada, todas as agendas aparecem no formulário.

V – Visualizando o formulário

Enquanto realiza as configurações, o Minha Agenda Virtual apresenta um Preview em Tempo Real.

Utilize essa área para verificar como o formulário ficará apresentado antes de incorporá-lo ao seu site.

Sempre que alterar as configurações, confira a pré-visualização para garantir que o resultado esteja de acordo com o que você deseja.

VI – Copiando o código para incorporar

Depois de finalizar a configuração, clique em Salvar. O iframe fica na lista lateral, com o nome e as agendas escolhidas.

Em seguida, localize a seção Código para incorporar.

Nessa área, será disponibilizado automaticamente o código do iframe selecionado.

Confira se as configurações estão corretas.
Clique em Copiar.
O código será copiado para a área de transferência.

Esse é o código que deverá ser inserido no código-fonte da página do seu site onde o formulário de agendamento deverá aparecer.

Caso você tenha uma equipe ou profissional responsável pela manutenção do site, basta enviar o código copiado e solicitar a inclusão no HTML da página desejada.

Depois de colado, o formulário aparece dentro da página do site, com as cores escolhidas. No modo Padrão, o cliente escolhe a agenda e o serviço e clica em Próximo. Depois, escolhe o dia e o horário e segue para os dados e a confirmação, sem sair do site.

VII – Gerenciando os iframes

Depois de criar os iframes, eles ficarão disponíveis na lista lateral da tela Iframes de Agendamento.

A partir dessa lista, você poderá selecionar o iframe que deseja configurar, editar suas informações ou remover uma configuração quando necessário.

Cada card representa um iframe independente, permitindo manter diferentes configurações de formulário organizadas na mesma tela.

Validação final

Ao concluir este tutorial, confirme se você conseguiu:

Acessar Sites (Embed) em Integrações;
Criar um novo iframe;
Identificar os iframes criados na lista lateral;
Configurar as informações gerais do iframe;
Definir os domínios permitidos;
Personalizar as cores do formulário;
Definir o tamanho e o arredondamento;
Selecionar as agendas que serão disponibilizadas;
Conferir o resultado no Preview em Tempo Real;
Salvar o iframe;
Copiar o código para incorporar o formulário ao site;
Conferir o formulário funcionando na página do site.

Erros comuns

Se o formulário não aparecer no site, confira os Domínios permitidos: quando o campo está preenchido, o endereço do site precisa estar na lista.
Depois de qualquer mudança, clique em Salvar. Enquanto a alteração não for salva, o iframe fica como Não salvo.