Incorporar o widget em linha (modo página inteira)

Pré-requisitos

Certifique-se de que seu widget esteja configurado no modo Página inteira

No painel do ViaSay, acesse Build > Integrate > Channels, abra seu widget e depois Formato e design > Janela de chat. Selecione Página inteira como formato e clique em Publicar.

Acesse esta página para obter orientações.

Pré-requisitos técnicos

• Acesso ao código-fonte HTML do seu site

• Token do widget na aba Integração no painel do ViaSay

• Conhecimentos básicos de HTML e CSS

• Uma área da página com uma altura explícita (o widget não será renderizado em um contêiner com altura zero)

Instalação

👍 Quando usar o modo Página inteira

Use este padrão para páginas dedicadas de ajuda, páginas de FAQ, páginas de contato ou microsites de finalidade única em que a conversa é o conteúdo principal. Para sites com várias páginas, em que o widget deve acompanhar os usuários pelo site, use a instalação padrão da bolha flutuante.

1. Defina o tipo de exibição como Página inteira

Acesse Build > Integrate > Channels > [Your Widget] > Format & Design. Em Janela de chat, selecione Página inteira e clique em Publicar.

O comportamento de exibição do widget é definido pela configuração do painel, não por um atributo HTML. Não é necessário passar mode="fullpage" ou qualquer propriedade semelhante no elemento personalizado.

2. Adicione um contêiner hospedeiro à sua página

Adicione um contêiner vazio onde deseja que a caixa de chat apareça e atribua-lhe uma altura explícita.

<div id="chat-host" class="chat-host"></div>

<style>
  .chat-host {
    width: 100%;
    min-height: 680px;
    display: flex;
    overflow: hidden;
  }
</style>

Por que uma altura explícita? O widget é renderizado dentro do contêiner e herda o espaço disponível. Sem uma altura definida (min-height ou height), o contêiner colapsa para 0px e o widget fica invisível.

3. Injete o widget no contêiner

Cole o código do widget no final da tag <body> tag, mas, em vez de anexar o elemento personalizado a document.body, anexe-o ao seu contêiner hospedeiro.

<!DOCTYPE html>
<html>
<head>
    <title>Your Website</title>
</head>
<body>
    <!-- Your page content -->
    <div id="chat-host" class="chat-host"></div>

    <!-- ViaSay Widget — inline full-page mode -->
    <script>
        var widget = document.createElement("destygo-webchat");
        widget.setAttribute('id', "destygo_widget");
        widget.setAttribute('class', "destygo_widget");
        widget.setAttribute('token', "YOUR_TOKEN_HERE");
        document.getElementById('chat-host').appendChild(widget);
    </script>
    <script type="text/javascript" src="https://chatbot.viasay.io/widget/destygo-webchat.js"></script>
</body>
</html>

Por que anexar a um contêiner em vez de ao body? Anexar a document.body faz com que o widget seja renderizado como uma sobreposição flutuante, independentemente da configuração do painel. Para renderizá-lo em linha, o elemento personalizado deve ser filho do contêiner de destino antes de o script do SDK inicializá-lo.

4. Controle a altura da caixa de chat

A caixa de chat interna é renderizada dentro de uma div com a classe .cl-chatbox. Para controlar sua altura, direcione esta classe — não o <destygo-webchat> elemento personalizado.

.chat-host .cl-chatbox {
  height: 680px !important;
}

⚠️ Não aplique height, min-height, flex, ou display diretamente em <destygo-webchat> ou #destygo_widget. Essas substituições são ignoradas pelo shadow DOM ou prejudicam a renderização interna da caixa de chat.

5. Implante as alterações

Salve o arquivo HTML e faça a implantação no seu servidor web. A caixa de chat será renderizada em linha em todas as páginas que incluírem este código.

Verificação

Confirme que a caixa de chat está ativa

1. Abra sua página em um navegador servido por HTTP ou HTTPS (não file://)

2. Verifique se a caixa de chat é renderizada dentro do seu contêiner #chat-host

3. Confirme que o campo de entrada está ancorado na parte inferior do contêiner

4. Envie uma mensagem de teste

Padrões comuns de implementação

Aplicativos de página única (SPA)

Para aplicativos React, Vue ou Angular, monte o widget uma vez quando o componente hospedeiro for montado e remova-o ao desmontar, para evitar instâncias duplicadas durante a renderização novamente.

// React example
useEffect(() => {
  const widget = document.createElement("destygo-webchat");
  widget.setAttribute('token', "YOUR_TOKEN_HERE");
  hostRef.current.appendChild(widget);

  return () => {
    hostRef.current?.removeChild(widget);
  };
}, []);

Carregue o script destygo-webchat.js uma vez no seu index.html em vez de reinjetá-lo a cada alteração de rota.

Sites baseados em modelos

Para WordPress, Shopify ou plataformas semelhantes, adicione o contêiner hospedeiro e o script do widget a um único modelo dedicado (por exemplo, um modelo de página "Ajuda") — não ao rodapé global.

Geradores de sites estáticos

Para Next.js, Gatsby ou Hugo, adicione o contêiner hospedeiro ao componente de layout da página de ajuda e carregue o script do SDK por meio do carregador de scripts do framework (por exemplo, next/script com strategy="afterInteractive").

Solução de problemas

📌 Dicas de integração

Garanta a configuração adequada da lista de permissões da Política de Segurança de Conteúdo (CSP):

• https://*.destygo.com

• https://*.mindsight.com

• https://*.laiye.com

• wss://*.mindsight.com

• wss://*.laiye.com

• https://fonts.googleapis.com

• https://fonts.gstatic.com

Carregue o script destygo-webchat.js depois depois que o elemento personalizado tiver sido criado e anexado ao DOM; caso contrário, o elemento será desconhecido quando o SDK tentar atualizá-lo.

Opções avançadas

Altura responsiva: Use unidades baseadas na viewport (por exemplo, min-height: calc(100vh - 120px)) no contêiner hospedeiro para fazer a caixa de chat preencher o restante da viewport em dispositivos móveis.

Várias caixas de chat no mesmo site: Cada instância deve usar um id exclusivo no contêiner hospedeiro e um elemento personalizado exclusivo. Evite montar dois widgets que compartilhem o mesmo token na mesma página.

Estilo personalizado: A maioria das opções de aparência (cores, fontes, saudações) é configurada pela aba Formato e design no seu painel. Use substituições de CSS em .cl-chatbox apenas para questões de layout/tamanho específicas da sua página.