Modo embedded: o chat em um container ou em tela cheia

Quando usar

Use o modo embedded quando o chat é o conteúdo de uma tela, e não um botão em cima dela:

• Uma WebView no seu app para celular, por exemplo atrás de um item Falar com o suporte. O app Deskwoot para celular usa o modo embedded na própria tela de suporte.
• Uma página de contato em página inteira no seu site.
• Um modal ou um painel com moldura própria.

Se você só quer esconder o balão e abrir o chat flutuante normal pelo seu próprio botão, não precisa do modo embedded. Abrir o widget de chat pelo seu próprio botão mostra como.

O que muda no modo embedded

• O chat abre assim que a página carrega e preenche o container, ou a tela inteira quando não há container.
• O balão redondo do chat, as mensagens que aparecem pelos seus gatilhos de chat e o botão de fechar do chat ficam ocultos. A sua página ou o seu app decide como as pessoas chegam ao chat e como saem dele.
• O chat não tem sombra, nem cantos arredondados, nem o recuo de 20px até a borda.
• As cores, o tema claro ou escuro e os textos de boas-vindas continuam vindo das configurações da sua caixa de entrada, igual ao chat flutuante.
• A API JavaScript continua funcionando: window.deskwoot.close() esconde o chat, e open() ou toggle() mostra de novo.

Configurar

1. Acesse Configurações > Caixas de entrada, abra a sua caixa de entrada de chat ao vivo e clique em No seu site. Em Como colocar o chat, clique em Copiar.
2. No código, adicione embedded: true a window.deskwootSettings, ao lado do seu widgetToken.
3. Para preencher só uma parte da página, adicione também container. Ele aceita um seletor CSS como "#support-pane" ou o próprio elemento. Dê uma altura a esse elemento.
4. Cole o código na página onde o chat deve aparecer, de preferência logo antes da tag de fechamento </body>. Coloque o elemento do container antes do código, para que ele já esteja na página quando o widget iniciar.

Exemplos

Tela inteira, para uma página de contato ou uma WebView de app

<script>
  window.deskwootSettings = {
    widgetToken: "YOUR_WIDGET_TOKEN",
    embedded: true
  };
  (function (d, t) {
    var g = d.createElement(t);
    var s = d.getElementsByTagName(t)[0];
    g.src = "https://deskwoot.com/widget/deskwoot-loader.js";
    g.async = true;
    g.defer = true;
    s.parentNode.insertBefore(g, s);
  })(document, "script");
</script>

Sem container, o chat cobre a janela inteira do navegador.

Dentro de um container na sua página

<div id="support-pane" style="height: 600px"></div>

<script>
  window.deskwootSettings = {
    widgetToken: "YOUR_WIDGET_TOKEN",
    embedded: true,
    container: "#support-pane"   // leave out to fill the whole viewport
  };
  (function (d, t) {
    var g = d.createElement(t);
    var s = d.getElementsByTagName(t)[0];
    g.src = "https://deskwoot.com/widget/deskwoot-loader.js";
    g.async = true;
    g.defer = true;
    s.parentNode.insertBefore(g, s);
  })(document, "script");
</script>

O chat preenche toda a largura e a altura do elemento, então o elemento precisa ter uma altura própria.

O seu próprio botão para mostrar e esconder o chat

<button onclick="window.deskwoot.toggle()">Contact Support</button>

O modo embedded não tem botão de fechar, então um botão como esse deixa as pessoas esconderem o chat e trazerem de volta. Use open() em vez de toggle() se o botão só deve mostrar o chat. window.__deskwootUnread guarda o número de novas respostas da sua equipe ou do seu bot de IA que chegaram enquanto o chat estava escondido, para você mostrar um contador no seu botão.

Bons lugares para o botão: um item Falar com o suporte na sua navegação, ao lado de Configurações ou Ajuda (é assim que o Deskwoot faz), uma linha Conversar com o suporte no topo do seu menu de Ajuda ou de Conta, ou um pequeno botão flutuante no canto quando o seu app não tem uma barra de navegação sempre visível. Coloque o botão no mesmo lugar em todas as páginas depois do login, para que as pessoas sempre saibam onde fica o suporte.

Perguntas frequentes

Posso ativar o modo embedded no painel?

Não. O modo embedded é definido só no código do widget da sua página. A aparência do chat, como cores, tema e textos de boas-vindas, você continua ajustando nas configurações da sua caixa de entrada. Mais sobre isso em Personalizar seu widget de chat.

O chat não aparece no meu container. O que devo verificar?

O elemento precisa estar na página quando o widget inicia. Se o Deskwoot não o encontrar, o chat não carrega (ele não passa para tela inteira no lugar), e o console do navegador mostra [deskwoot] embedded container not found. Confira também se o elemento tem uma altura, porque o chat ocupa 100% dela.

Os visitantes podem fechar o chat?

O modo embedded não tem botão de fechar. A sua página decide: window.deskwoot.close() esconde o chat, e open() ou toggle() mostra de novo.

O modo embedded funciona com a verificação de identidade?

Sim. Coloque o objeto user no mesmo window.deskwootSettings, ao lado de embedded: true. Como assinar está em Verificação de identidade de clientes conectados.

Posso mostrar o balão em algumas páginas e o chat embedded em outras?

Sim. O modo embedded é definido no código de cada página. As páginas com embedded: true mostram o chat dentro da página, e as páginas sem essa opção mostram o chat como sempre.

Onde leio mais sobre as opções?

Todas as opções do widget e a API JavaScript estão na documentação do widget.