Como criar um link clicável para abrir o widget de chat do Shopify: Um guia passo a passo

Aquela bolha de chat padrão do Shopify Inbox é aceitável, mas nem sempre combina com o visual que tanto se esforçou para criar na sua loja. Ela simplesmente fica ali a flutuar, por vezes a cobrir informações importantes ou a entrar em conflito com a sua marca. Talvez queira um design mais limpo, ou queira colocar um link "Fale connosco" diretamente na sua página de contacto, no rodapé ou numa página de produto onde sabe que os clientes terão perguntas.

E se já pesquisou no Google como resolver isto, provavelmente encontrou uma série de posts de fórum antigos com truques que simplesmente já não funcionam. Métodos como adicionar "/?chat" ao final de um URL estão desatualizados e não são fiáveis atualmente.

É para isso que serve este guia. Vamos guiá-lo através de um processo simples, passo a passo, utilizando um pequeno trecho de JavaScript moderno. É a forma mais fiável de criar um link clicável para abrir o seu widget de chat do Shopify a partir de qualquer lugar no seu site, devolvendo-lhe o controlo do design da sua loja.

O que vai precisar antes de começar

Antes de começarmos, vamos garantir que tem tudo preparado. Não se preocupe, a lista é curta:

• Uma loja Shopify com a aplicação Shopify Inbox instalada e a funcionar.

• Acesso de administrador à sua conta Shopify para poder aceder ao código do seu tema.

• Cerca de 10-15 minutos do seu tempo.

Porque é que os métodos antigos já não funcionam

O Shopify está sempre a atualizar a sua plataforma, o que é ótimo, mas também significa que truques e soluções alternativas não oficiais podem deixar de funcionar de repente. Aqueles parâmetros de URL antigos como "?show_chat" eram hacks inteligentes que funcionaram durante algum tempo, mas desde então o Shopify mudou a forma como as aplicações como o Inbox são carregadas na sua loja. Tentar usá-los hoje em dia geralmente resulta em links quebrados e clientes confusos.

A razão técnica é que o widget de chat agora carrega frequentemente no que é chamado de shadow DOM ou um iframe. Pode pensar nisso como uma pequena caixa segura na sua página web que é mantida separada de tudo o resto. Esta configuração torna difícil para um simples URL chegar dentro dessa caixa e dizer ao widget para abrir.

É por isso que precisamos de uma abordagem moderna com JavaScript. O método que vamos mostrar é muito mais estável. Em vez de tentar um truque de URL, ele encontra o botão de chat real na página, onde quer que ele esteja escondido, e simula um clique. Funciona exatamente como uma pessoa real a abrir o chat, o que o torna uma solução muito mais fiável a longo prazo.

Como criar um link de chat clicável do Shopify em 4 passos

Todo o processo resume-se a duas coisas: adicionar um link à sua página e, em seguida, inserir um pequeno script no seu tema para que funcione. Não é necessária experiência de programação, vou guiá-lo em cada clique.

Passo 1: Faça uma cópia de segurança do seu tema

Muito bem, antes de tocar em qualquer código, vamos fazer o que é sensato: fazer uma cópia de segurança do seu tema. Esta é a sua rede de segurança. Se algo correr mal, pode restaurar a cópia de segurança com um único clique e fingir que nunca aconteceu.

• No seu painel de administração do Shopify, vá a Loja Online > Temas.

• Encontre o seu tema atual (aquele que diz "Ativo"). Clique no ícone de três pontos (...) ao lado do botão de personalizar.

• Escolha Duplicar no menu.

O Shopify fará uma cópia exata. Agora pode editar o original sem se preocupar, sabendo que tem uma versão segura pronta a usar se precisar.

Painel de administração do Shopify onde pode encontrar a secção de temas para fazer uma cópia de segurança do seu tema.

Passo 2: Adicione o seu link ou botão personalizado

Em seguida, decida onde quer que o seu novo link de chat fique. Pode colocá-lo em praticamente qualquer lugar que aceite HTML, como numa página de contacto, dentro da descrição de um produto ou no rodapé do seu site.

Depois de escolher um local, adicione esta simples linha de HTML:

Fale com a nossa equipa  

Pode alterar "Fale com a nossa equipa" para o que fizer mais sentido para si. A parte realmente importante é href="#open-chat". Este é o gancho único que o nosso script irá procurar para saber quando abrir o chat. Na verdade, não cria um link para outra página; é apenas um identificador para o nosso código.

Passo 3: Adicione o código JavaScript ao seu tema

Ok, esta é a parte central da solução. Precisamos de adicionar um pequeno script ao seu tema que espera que alguém clique no seu novo link. O melhor sítio para isto é o seu ficheiro "theme.liquid", que garante que o código está ativo em todas as páginas do seu site.

1. No seu painel de administração do Shopify, volte a Loja Online > Temas.

2. Clique no ícone de três pontos (...) no seu tema ativo e selecione Editar código.

3. No menu de ficheiros à esquerda, abra a pasta "Layout" e clique em "theme.liquid".

4. Deslize até ao final do ficheiro. Logo antes de ver a tag de fecho ``, cole este trecho de código:

  

document.addEventListener('DOMContentLoaded', function() {  

  const customChatLinks = document.querySelectorAll('a[href="#open-chat"]');  

  if (customChatLinks.length > 0) {  

    const openShopifyChat = function(event) {  

      event.preventDefault();  

      const chatButton = document.querySelector('#ShopifyChat button[aria-controls="chat-ui"], #dummy-chat-button-iframe');  

      if (chatButton) {  

        chatButton.click();  

      } else {  

        // Fallback for when the button is inside an iframe  

        const iframe = document.querySelector('#dummy-chat-button-iframe');  

        if (iframe && iframe.contentWindow) {  

          const buttonInFrame = iframe.contentWindow.document.querySelector('button');  

          if (buttonInFrame) {  

            buttonInFrame.click();  

          } else {  

            console.warn('Shopify Chat button not found inside iframe.');  

          }  

        } else {  

          console.warn('Shopify Chat button not found.');  

        }  

      }  

    };  

    customChatLinks.forEach(link => {  

      link.addEventListener('click', openShopifyChat);  

    });  

  }  

});  

  

Então, o que é que este código faz realmente? Ele apenas espera que a página carregue e depois fica atento a qualquer link com href="#open-chat". Quando alguém clica nele, o script impede a página de saltar e, em vez disso, encontra o botão oficial do Shopify Chat e "clica" nele por si. Simples assim.

Passo 4: Teste o seu novo link

Clique no botão "Guardar" no canto superior direito do editor de código. Agora, vá para a página onde adicionou o seu link personalizado e experimente-o. O widget de chat do Shopify Inbox deve abrir, tal como se tivesse clicado no ícone flutuante.

Faça alguns testes. Feche o widget e clique no seu link novamente para garantir que está a funcionar sem problemas.

Problemas comuns e resolução de problemas

Embora este script seja bastante sólido, trabalhar com código personalizado pode, por vezes, ter as suas particularidades. Aqui ficam algumas coisas a ter em mente.

• E se o link não funcionar? Se o seu link não estiver a funcionar, o culpado mais provável é que o Shopify tenha atualizado o código do widget de chat, alterando o ID do botão. O seletor no nosso script ("#ShopifyChat button...") foi concebido para lidar com variações comuns, mas uma grande alteração na plataforma pode quebrá-lo. Esta é a principal desvantagem de qualquer código personalizado: pode precisar de um pequeno ajuste no futuro.

• A acessibilidade é fundamental: Use sempre texto claro e descritivo para os seus links. "Fale com a nossa equipa de suporte" é muito mais útil para utilizadores com leitores de ecrã do que algo vago como "Clique aqui".

• Desempenho: Não se preocupe, este script é incrivelmente leve e não terá qualquer impacto percetível na velocidade do seu site. É apenas um bom lembrete de que qualquer código personalizado é mais uma coisa que tem de gerir por si próprio.

Para além do link: O que acontece a seguir?

Resolver a questão do link é uma ótima sensação. Limpou o design do seu site e tornou mais fácil para os clientes entrarem em contacto. Mas... o que acontece a seguir? Assim que eles clicam nesse link, o verdadeiro trabalho começa.

Esta é a parte que um simples trecho de código não consegue resolver. Quem está lá para responder a esses chats? Qual é o plano se uma mensagem chegar tarde da noite? Como é que os seus agentes acompanham as mesmas perguntas repetidamente, como "Onde está a minha encomenda?", sem se esgotarem? Um link personalizado é um excelente primeiro passo, mas a experiência pode rapidamente falhar se não houver uma resposta rápida e útil do outro lado.

É geralmente aqui que o suporte manual atinge um limite, e começa a pensar numa forma melhor.

Uma plataforma de IA como a eesel AI foi concebida para continuar onde o suporte manual para. O Chatbot de IA da eesel AI não ajuda apenas a iniciar uma conversa; muitas vezes, resolve-a instantaneamente.

Um chatbot de IA da eesel a fornecer suporte automatizado e a verificar o estado de entrega de uma encomenda através da sua integração com o Shopify.

Eis como aborda os desafios que um link personalizado por si só não consegue resolver:

• Configure em minutos (a sério): Em vez de se preocupar com o código do tema, a eesel AI conecta-se com o Shopify em poucos cliques. A configuração é totalmente self-service, para que possa ter um agente de IA a trabalhar para si em menos tempo do que leva para fazer um café.

• Dê-lhe todo o seu conhecimento: Pode treinar a sua IA em tudo, desde os artigos do seu centro de ajuda a tickets de suporte passados e até mesmo todo o seu catálogo de produtos do Shopify. Ela pode então responder a perguntas detalhadas sobre produtos, tratar de devoluções e explicar políticas por conta própria.

• Deixe-a fazer o trabalho por si: A eesel AI pode ser configurada com ações personalizadas para consultar informações de encomendas em tempo real diretamente do Shopify. Quando um cliente pergunta, "Onde está a minha encomenda?", recebe uma resposta imediata e em tempo real, a qualquer hora do dia, sem que um humano precise de mexer um dedo.

• Teste-a antes de a lançar: Está a pensar como uma IA se irá realmente comportar com os seus clientes? O modo de simulação da eesel AI permite-lhe testar a sua configuração em milhares de conversas passadas com clientes antes de entrar em funcionamento. Obtém uma previsão clara de quão eficaz será desde o primeiro dia.

Assumir o controlo do chat com os seus clientes

Agora tem uma forma sólida e moderna de criar um link clicável para abrir o seu widget de chat do Shopify, dando-lhe mais controlo sobre a aparência da sua loja. É um ajuste fantástico para um site mais limpo e fácil de usar.

Mas à medida que a sua loja cresce, vai perceber que corrigir o botão de chat é apenas o começo. A verdadeira vitória está em melhorar toda a experiência de chat. O código personalizado precisa de supervisão, e mesmo a equipa de suporte mais dedicada não pode estar em todo o lado ao mesmo tempo.

Para as lojas Shopify que procuram oferecer suporte instantâneo, preciso e alinhado com a marca que possa escalar com o seu negócio, uma solução alimentada por IA é o próximo passo natural. É assim que transforma o serviço ao cliente de uma tarefa diária num verdadeiro ativo para o crescimento.

Pronto para ver como é uma experiência de suporte totalmente automatizada? Experimente a eesel AI gratuitamente e crie o seu primeiro chatbot de IA para o Shopify em apenas alguns minutos.