Neste tutorial, você vai aprender como configurar e incorporar o formulário de agendamento do eAgendas 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 eAgendas, 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 eAgendas e faça login na sua conta.
No menu lateral, clique em Integrações.
Na tela de integrações, localize o card Site Embed.
Clique em Conectar ou Gerenciar, caso a integração já esteja configurada.

Ao acessar o Site Embed, você será direcionado para a tela de configuração dos 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.

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, entre Padrão e Calendário;
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.

Caso seja necessário disponibilizar todas as agendas, utilize a opção correspondente à seleção de todas.

V – Visualizando o formulário

Enquanto realiza as configurações, o eAgendas 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, 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.

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 Integrações → Site Embed;
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;
Copiar o código para incorporar o formulário ao site.