Adicionar o AI-Estimator à experiência do seu cliente pode ser feito de duas maneiras: incorporando uma ferramenta de autoestimativa diretamente no seu site ou convidando os clientes a fazer login e obter cotações personalizadas através do GelatoConnect. Este guia explica ambas as opções passo a passo.

Adicionando Funcionalidade de Autocotar ao Seu Site

Você pode integrar o AI-Estimator para que quando os usuários clicarem no seu botão "Obter Orçamento", um iframe incorporado seja aberto e exiba a ferramenta de orçamento. Uma implementação de exemplo está disponível para referência.

Etapas de implementação

Detecção de botão
Adicione ouvintes de eventos de clique ao seu botão "Solicitar Orçamento" existente. Estes devem impedir a navegação padrão e, em vez disso, acionar o modo iframe.
Substituição de conteúdo
Quando o iframe abrir, oculte o conteúdo da página principal e o rodapé mantendo o cabeçalho visível. Isso pode ser feito com as propriedades CSS display ou visibility.
Integração de Iframe
Insira um iframe de largura total que carregue a URL de cotação fornecida pela Gelato (https://printconnect.gelato.com/XX_XXX).
- Use height: calc(100vh - 80px) para deixar espaço para o cabeçalho (ajuste 80px com base na altura real do seu cabeçalho).
- Defina width: 100% para garantir que o iframe cubra toda a largura da página.
Botão fechar
Coloque um botão flutuante "Fechar" no canto superior esquerdo da área do iframe.
```
 Close 
```
Configure-o para ocultar o iframe, restaurar o conteúdo original e reativar a rolagem quando clicado.
Prevenção de rolagem
Desabilite a rolagem com document.body.style.overflow = 'hidden' quando o iframe estiver ativo. Redefina para auto uma vez fechado.
Gerenciamento de estado
Use uma flag booleana para rastrear se o iframe está aberto ou fechado. Isso permite alternar entre a visualização incorporada e o layout normal do seu site.

Estilos CSS principais

height: calc(100vh - [header-height]px) para dimensionamento adequado do iframe
width: 100% para layout de largura total
position: fixed para o botão fechar
overflow: hidden aplicado ao body quando o iframe está ativo
Ocultação e exibição condicional do conteúdo principal

Convidando clientes para obter orçamentos personalizados

Você também pode convidar clientes para que eles obtenham um login para fazer cotações próprias. Isso garante que eles recebam preços personalizados de acordo com as regras de preços que você definiu para eles. Isso também elimina a necessidade de eles inserirem manualmente detalhes como nome ou e-mail, e separa solicitações de clientes verificados

Veja a demonstração em vídeo para instruções (24:28 – 29:28)

Como funciona

Clientes logados precisarão usar a página diretamente (não como um iframe), pois isso é necessário para uma experiência segura.
Eles receberão esse link por e-mail quando convidados, e também podem acessá-lo em https://printconnect.gelato.com/XX_XXX/login.

[GC - AI Estimator] Configurando a Autocotação do AI-Estimator (Site + Login do Cliente)