Docs

Widget em um site

Como inserir widgets em sites como canal de atendimento

O selfless.chat permite adicionar um widget de atendimento direto ao seu site como um dos canais de atendimento.

Isso permite que os visitantes do site iniciem conversas com o seu chatbot de forma instantânea, através de uma interface leve, discreta e totalmente personalizável o que possibilita captar leads, responder dúvidas frequentes e oferecer suporte em tempo real, sem depender de plataformas externas.

Como adicionar o widget ao seu site?

Siga os passos abaixo para ativar e configurar o canal de widget:

Passo 1: Acesse sua conta no selfless.chat e selecione o chatbot que deseja utilizar no seu site.

Passo 2: No canto inferior esquerdo da página inicial do painel, ao lado do nome do seu usuário, clique no ícone de engrenagem ⚙.

Passo 3: No menu que se abre, clique em Canais.

Passo 4: Localize a opção Widget (é a o primeiro quadro da página) e clique em Ativar.

Após ativar, a tela será atualizada com as informações de configuração do widget.

Personalização do widget

Com o canal ativado, você poderá personalizar a aparência do widget antes de adicioná-lo ao seu site.

As opções disponíveis incluem:

Cor do ícone do widget
Tema do fundo da conversa (claro ou escuro)

Essas alterações são feitas diretamente na tela de configuração do widget. Depois de alteradas a cor principal e do fundo, copie o código que aparece abaixo clicando no ícone à direita. Esse código deve ser colado o mais alto possível no <head> do seu website.

Caso deseje desativar o canal a qualquer momento, basta clicar no botão Desativar widget na mesma tela.

Como instalar o script no seu site

Após configurar a aparência do widget, siga os passos abaixo para adicioná-lo ao seu site:

Passo 6: Copie o código do script que aparece na tela de configuração.

Passo 7: Acesse o código-fonte do seu site.

Passo 8: Cole o script o mais alto possível no <head>, em todas as páginas em que deseja que o widget apareça.

É necessário ter acesso ao código do site ou utilizar uma plataforma que permita inserir scripts personalizados no cabeçalho, como WordPress, Wix (via código), Webflow ou editores HTML próprios.

Após inserir e salvar o script no site, o widget será exibido automaticamente e ficará disponível para todos os visitantes.

Boas práticas para o uso do widget

Para garantir uma boa experiência do usuário e melhorar a performance do seu chatbot no site, siga estas boas práticas:

Utilize cores que contrastem com o layout do site, mas que ainda respeitem sua identidade visual.
Ative o modo escuro ou claro com base na estética geral do seu site para manter a harmonia visual.
Teste o widget em diferentes dispositivos (mobile e desktop) para garantir que o comportamento esteja adequado.

Exemplos de uso por tipo de site

O widget do selfless.chat pode ser aplicado de maneiras diferentes conforme o tipo de site. Veja abaixo algumas sugestões de uso:

Sites institucionais

Captação de leads com um formulário inicial no chatbot.
Atendimento a dúvidas frequentes sobre serviços, localização, horários e contato.
Encaminhamento direto para a equipe de atendimento humano.

E-commerce

Atendimento automatizado com informações sobre frete, prazos e status de pedidos.
Suporte no processo de compra e carrinho abandonado.
Cross-sell e upsell com sugestões baseadas em respostas do cliente.

Landing pages

Qualificação de leads com perguntas objetivas (nome, e-mail, área de interesse).
Agendamento de reuniões ou demonstrações de produto.
Reforço de call-to-action com mensagens automáticas e personalizadas.

Inserção de widget em plataformas populares

A plataforma selfless.chat permite a integração de um widget de atendimento diretamente em sites, lojas virtuais e sistemas de gerenciamento de conteúdo.

Este widget pode ser inserido em diversas plataformas populares como WordPress, Shopify, Wix, RD Station, entre outras, com o objetivo de disponibilizar o chatbot em páginas estratégicas do seu negócio — seja para tirar dúvidas, capturar leads ou oferecer suporte em tempo real.

Você encontrará instruções passo a passo para inserir o widget do selfless.chat nas principais plataformas do mercado. As instruções são adaptadas às especificidades de cada ferramenta, garantindo uma instalação simples, rápida e funcional, mesmo sem conhecimento técnico avançado.

RD Station

Inserir o widget do selfless.chat nas landing pages do RD Station amplia a capacidade de captação e qualificação de contatos, permitindo interações automatizadas durante a visita. Neste tutorial, explicamos como integrar o script do widget ao cabeçalho da sua landing page no RD Station.

Passo 1. Acesse sua conta no RD Station e vá até a aba "Landing Pages".

Passo 2. Crie ou edite uma landing page existente.

Passo 3. Na etapa de configuração, localize o campo de "Código HTML do cabeçalho" (geralmente disponível nas configurações avançadas).

Passo 4. Cole o script do selfless.chat nesse campo.

Passo 5. Salve e publique a landing page.

Shopify

Adicionar o widget do selfless.chat à sua loja virtual permite oferecer suporte imediato ao cliente, tirar dúvidas durante a navegação e aumentar a conversão de vendas com a ajuda do atendimento automatizado. Neste passo a passo, você aprenderá como inserir o script do widget diretamente no tema da sua loja, de forma rápida e eficiente.

Passo 1. Acesse o painel de administração da sua loja Shopify.

Passo 2. Vá até "Loja Virtual" > "Temas" e clique em "Ações" > "Editar Código".

Passo 3. No editor de arquivos, localize e edite o arquivo theme.liquid.

Passo 4. Cole o script do selfless.chat logo antes da tag de fechamento </head>.

Passo 5. Salve as alterações. O widget será carregado em todas as páginas que utilizam esse layout.

Wix

O Wix, com a ativação do Velo (modo desenvolvedor), permite personalizações mais avançadas por meio de JavaScript. Se você utiliza o editor clássico do Wix com o Velo ativado, é possível integrar o widget do selfless.chat diretamente no carregamento do site, ativando o atendimento automatizado com inteligência artificial. Neste guia, mostramos como inserir o script corretamente para que o widget funcione conforme esperado.

Passo 1. Acesse o editor do Wix e ative o modo desenvolvedor: "Dev Mode" > "Turn on Velo".

Passo 2. No painel lateral, acesse "Public" > "site.js".

Passo 3. Insira o script do selfless.chat dentro da função export function wixWindow_onReady().

Passo 4. Salve e publique seu site para aplicar as alterações.

Wordpress

Integrar o widget do selfless.chat ao seu site WordPress permite transformar visitantes em leads qualificados e automatizar o primeiro contato com clientes, diretamente na interface do seu site. Nesta página, você aprenderá como inserir o script do widget de forma simples, utilizando o editor de temas ou plugins especializados.

Passo 1. Acesse o painel de administração do WordPress com uma conta de administrador.

Passo 2. Vá até "Aparência" > "Editor de Temas". Como alternativa, utilize um plugin como Insert Headers and Footers para inserir o script de forma segura.

Passo 3. Cole o script do selfless.chat antes da tag de fechamento </head> no arquivo header.php ou no campo correspondente do plugin.

Passo 4. Salve as alterações e teste o site para garantir que o widget esteja funcionando corretamente.