Theme Editor → theme.liquid → cola antes do . Save. Aparece em cada página da loja.

Incorporando o widget

Q: Posso controlar o widget com JavaScript?

Sim. window.deskwootWidget.open(), .close(), .toggle(). Vê o artigo 'Programmatically open the chat widget' pros detalhes e patterns.

Atualizado em 20 de out. de 20264 min de leitura

Português

Nesta página

Embeda o chat widget no seu site com um snippet de código. Uma linha de JavaScript antes do </body> tag, pronto. Funciona em qualquer site: WordPress, Shopify, Webflow, código próprio, páginas HTML estáticas. Múltiplos widgets possíveis (ex.: widget diferente na página de marketing vs. app). Snippet vem com defaults configurados do setup da inbox.

Adicionar o widget de chat do Deskwoot ao seu site leva apenas uma linha de codigo. O widget carrega de forma assincrona e nao afeta o desempenho de carregamento da sua pagina.

Codigo de incorporacao em JavaScript

Apos criar uma caixa de entrada de site, o Deskwoot gera um snippet em JavaScript. Copie-o em Configuracoes > Caixas de Entrada > sua caixa de entrada > aba Configurações > Instalação do widget. O snippet é um script inline curto: ele define window.deskwootSettings = { widgetToken: "YOUR_WIDGET_TOKEN" } e depois carrega https://deskwoot.com/widget/deskwoot-loader.js de forma assíncrona. Cole este codigo antes da tag de fechamento </body> em todas as paginas onde voce quer que o widget apareca.

O valor widgetToken no codigo de incorporacao e o identificador unico do seu widget. Ele conecta o widget a sua caixa de entrada especifica. Voce pode encontra-lo nas configuracoes da sua caixa de entrada. Mantenha-o no codigo do seu frontend, e seguro expo-lo publicamente, pois ele permite apenas que os visitantes iniciem conversas.

React e Next.js

Para aplicacoes React, adicione a tag de script ao seu index.html ou use um hook useEffect para carrega-lo dinamicamente. No Next.js, use o componente Script de next/script com strategy='afterInteractive' para um carregamento ideal. Coloque-o no seu layout.tsx ou _app.tsx para carregar o widget em todas as paginas.

WordPress

No WordPress, acesse Aparencia > Editor de Temas e abra o arquivo footer.php. Cole o script do widget antes da tag de fechamento </body>. Como alternativa, use um plugin como o 'Insert Headers and Footers' para adicionar o codigo sem editar os arquivos do tema. Se voce usa um construtor de paginas como o Elementor, adicione um widget HTML com o codigo do script.

Aplicacoes de pagina unica

O widget do Deskwoot funciona com todos os frameworks de SPA, incluindo React, Vue, Angular e Svelte. Carregue o script uma vez no shell do seu aplicativo e ele persiste entre as mudancas de rota. Use o objeto global window.deskwootSettings para opções como uma identidade de usuário assinada, e window.deskwoot para abrir, fechar ou alternar o widget pelo seu código.

Perguntas frequentes

Onde acho o código de embed?

Settings → Inboxes → escolhe a inbox de live chat → aba Configurações → 'Instalação do widget'. Copia, cola no seu site, done.

Onde o snippet deve ir?

Logo antes do </body> tag da sua página. No head funciona também, porque o script carrega assíncrono. Antes do </body> é o padrão.

Funciona no WordPress?

Sim. Via footer.php do tema (antes do </body>), ou com bloco 'Custom HTML' no Customizer, ou via plugin tipo 'Insert Headers and Footers'. Três caminhos, todos funcionam.

E no Shopify?

Theme Editor → theme.liquid → cola antes do </body>. Save. Aparece em cada página da loja.

O widget carrega assíncrono?

Sim. O script não bloqueia render da página. Carrega depois dos assets críticos, então performance de page load fica quase não afetada.

Posso mostrar o widget só em algumas páginas?

Sim. Embeda o snippet condicionalmente, ex.: só no template de footer que é carregado em certas páginas. Chat triggers com condição de URL mostram uma mensagem proativa só em certas páginas, mas não escondem o widget.

E se eu tenho várias inboxes?

Um snippet por inbox, cada um com token próprio. Por página roda só um widget. Mais típico: um widget por site/domínio.

O widget funciona em iframes?

Sim, mas contexto de iframe limita algumas features (sem auto-open proativo). Maioria dos times embeda na página parent; iframe é principalmente pra testes.

Posso controlar o widget com JavaScript?

Sim. window.deskwootWidget.open(), .close(), .toggle(). Vê o artigo 'Programmatically open the chat widget' pros detalhes e patterns.

Dados são transferidos GDPR-compliant?

Sim. Widget carrega de deskwoot.com, dados ficam em servers na UE (Holanda). Sem cookie de tracking por padrão; só um token de visitante anônimo no LocalStorage.

Como debugo quando o widget não aparece?

Browser DevTools → Console. Se script carrega mas não aparece, checa se CSS no body não tem conflitos (ex.: overflow:hidden no parent). Se script não carrega, checa posição do snippet e Content Security Policy.

Este guia foi útil?

Perguntar ao Fynn sobre este guia

Receba uma resposta curta deste guia e do resto da Central de Ajuda.