07. Incorporando o Web Chat em um site sem o widget

Você pode incorporar o Web Chat em um site sem criar o botão flutuante (widget) de 2 formas:

Em um elemento do site
Pelo Javascript

Para isso, adicione o método .embedded('buttonless') no script do chat.

1
2
3
4
5
6
7
8
<!-- Início do código do chat -->
<script src="https://static.zenvia.com/embed/js/zenvia-chat.min.js"></script>
<script>
    var zchat = new ZenviaChat('id_webchat')
      .embedded('buttonless')
      .build();
</script>
<!-- Fim do código do chat -->

Incorporar a janela do chat em um elemento do site

Para incorporar a janela do chat logo de início, e sem ser flutuante, de forma inline, você vai precisar:

Criar um elemento <div> e setar um ID único para ele;
Adicionar, no script do chat, o método .embedded('room').

1
2
3
4
5
6
7
8
<!-- Início do código do chat -->
<script src="https://static.zenvia.com/embed/js/zenvia-chat.min.js"></script>
<script>
    var zchat = new ZenviaChat('id_webchat')
      .embedded('room')
      .build('elemento-html');
</script>
<!-- Fim do código do chat -->

Modelo de página HTML com o script do chat incorporado:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Início do código do chat -->
<script src="https://static.zenvia.com/embed/js/zenvia-chat.min.js"></script>
<script>
    var zchat = new ZenviaChat('id_webchat')
      .embedded('room')
      .build('elemento-html');
</script>
<!-- Fim do código do chat -->

<section class="hero is-white">
  <div class="hero-body">
    <div class="container">
        <p>conteúdo do site</p>    
      <div id="elemento-html"></div>
    </div>
  </div>
</section>

Métodos de controle da janela de conversa

Alguns métodos são disponibilizados para permitir o controle e o uso do Web Chat por elementos do site, tornando o uso do widget opcional.

Os seguintes métodos estão disponível para uso:

open(): abre a janela do Web Chat.
close(): fecha a janela do Web Chat.
toggle(): abre ou fecha a janela do Web Chat de acordo com seu estado atual.
destroy(): fecha (caso aberta) a janela do Web Chat e remove da página de todos os elementos criados pelo Web Chat.

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- Início do código do chat -->
<script src="https://static.zenvia.com/embed/js/zenvia-chat.min.js"></script>
<script>
    var zchat = new ZenviaChat('85b287488b82d36ca599382fd36c2695')
      .embedded('buttonless')
      .build();
</script>
<!-- Fim do código do chat -->
<div class="example">
  <input type="button" value="open()" onclick="zchat.open()" />
  <input type="button" value="close()" onclick="zchat.close()" />
  <input type="button" value="toggle()" onclick="zchat.toggle()" />
</div>

Veja uma página de demonstração: http://zenvia.github.io/html/chat-embedded/type-buttonless.html.

Como podemos ajudar?

Incorporar a janela do chat em um elemento do site

Métodos de controle da janela de conversa