Como utilizar um deep link para abrir a janela de chat (sem editar o código do tema)

Pode abrir a janela de chat utilizando um deep link, sem modificar o código do seu tema. No editor de temas do Shopify, basta adicionar a hashtag #shoply-ai-chatbot a qualquer botão, ícone ou elemento de texto. Quando os clientes clicarem nesses elementos, a janela de chat abrir-se-á automaticamente.

Exemplo em funcionamento: demo.shoplyai.ai

Passos:

Edite o botão, texto ou ícone pretendido no editor de temas.
Defina a ligação ou o URL como #shoply-ai-chatbot.

Exemplos:

Utilizar um botão para abrir a janela de chat:

Utilizar um texto com ligação para abrir a janela de chat:

Abrir o chat com uma pergunta pré-preenchida

Quer abrir a janela de chat e enviar automaticamente uma pergunta? Pode fazê-lo utilizando um fragmento hash (recomendado) ou um parâmetro de consulta do URL.

Isto é perfeito para criar ligações diretas para temas comuns, como a política de envio, a política de devoluções ou perguntas sobre produtos.

Recomendado: fragmento hash (sem recarregar a página)

Utilize o fragmento hash #shoply_question=. Como o hash é processado inteiramente no navegador, clicar nesta ligação não recarregará a página e qualquer histórico de chat existente será preservado.

Formato:

plaintext


https://your-store.com#shoply_question=your question here

Exemplos:

Política de envio: https://your-store.com#shoply_question=What is your shipping policy?
Devoluções: https://your-store.com#shoply_question=How do I return an item?
Estado da encomenda: https://your-store.com#shoply_question=Where is my order?
Descoberta de produtos: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Pode combinar esta opção com qualquer página da sua loja. Por exemplo, para abrir o chatbot com uma pergunta numa página de produto específica:

plaintext


https://your-store.com/products/blue-jacket#shoply_question=What sizes are available?

Legado: parâmetro de consulta do URL

O parâmetro de consulta ?shoply_question= continua a ser suportado para garantir a compatibilidade com versões anteriores. Tenha em atenção que adicionar um parâmetro de consulta a um URL em que o cliente já se encontra provocará um recarregamento da página.

Formato:

plaintext


https://your-store.com?shoply_question=your question here

Nota: Lembre-se de codificar o URL da sua pergunta quando utilizar caracteres especiais ou espaços. A maioria dos navegadores fará isso automaticamente, mas, se estiver a adicionar ligações programaticamente, utilize uma codificação de URL adequada (por exemplo, os espaços tornam-se %20).

Quando um cliente clicar em qualquer um dos tipos de ligação, a janela de chat abrir-se-á automaticamente e a pergunta será enviada para o chatbot de IA, fornecendo uma resposta imediata.

Casos de utilização:

Adicionar uma ligação “Perguntar sobre o envio” no rodapé
Criar códigos QR que abram o chatbot com perguntas específicas
Incluir ligações úteis nas suas campanhas de e-mail ou confirmações de encomenda
Adicionar ligações de ajuda contextuais nas páginas de produtos (por exemplo, “Perguntar sobre os tamanhos”)

Como utilizar um deep link para abrir a janela de chat (é necessário editar o código no modelo do tema)

Na secção anterior, explicámos como utilizar a hashtag (deep link) para acionar a janela de chat, adicionando-a diretamente a qualquer botão, ícone ou texto no editor de temas, sem editar o código do seu tema.

No entanto, se quiser ter total flexibilidade para adicionar o deep link em qualquer parte da sua loja (por exemplo, criar um novo ícone no cabeçalho), terá de editar o código do modelo.

Seguem-se exemplos simples de código HTML que pode utilizar para criar novos ícones no modelo do seu tema:

Exemplos de código

1. Ícone de chat

O código abaixo adiciona um ícone de chat:

plaintext


<a href="#shoply-ai-chatbot"
   style="display:inline-flex;align-items:center;margin-right:13px">
    <svg viewBox="64 64 896 896" style="height:28px;width:28px;fill:orange">
        <path
            d="M868.2 377.4c-18.9-45.1-46.3-85.6-81.2-120.6a377.26 377.26 0 00-120.5-81.2A375.65 375.65 0 00519 145.8c-41.9 0-82.9 6.7-121.9 20C306 123.3 200.8 120 170.6 120c-2.2 0-7.4 0-9.4.2-11.9.4-22.8 6.5-29.2 16.4-6.5 9.9-7.7 22.4-3.4 33.5l64.3 161.6a378.59 378.59 0 00-52.8 193.2c0 51.4 10 101 29.8 147.6 18.9 45 46.2 85.6 81.2 120.5 34.7 34.8 75.4 62.1 120.5 81.2C418.3 894 467.9 904 519 904c51.3 0 100.9-10.1 147.7-29.8 44.9-18.9 85.5-46.3 120.4-81.2 34.7-34.8 62.1-75.4 81.2-120.6a376.5 376.5 0 0029.8-147.6c-.2-51.2-10.1-100.8-29.9-147.4zm-66.4 266.5a307.08 307.08 0 01-65.9 98c-28.4 28.5-61.3 50.7-97.7 65.9h-.1c-38 16-78.3 24.2-119.9 24.2a306.51 306.51 0 01-217.5-90.2c-28.4-28.5-50.6-61.4-65.8-97.8v-.1c-16-37.8-24.1-78.2-24.1-119.9 0-55.4 14.8-109.7 42.8-157l13.2-22.1-9.5-23.9L206 192c14.9.6 35.9 2.1 59.7 5.6 43.8 6.5 82.5 17.5 114.9 32.6l19 8.9 19.9-6.8c31.5-10.8 64.8-16.2 98.9-16.2a306.51 306.51 0 01217.5 90.2c28.4 28.5 50.6 61.4 65.8 97.8l.1.1.1.1c16 37.6 24.1 78 24.2 119.8-.1 41.7-8.3 82-24.3 119.8zM681.1 364.2c-20.4 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.6 37.1 37.1 37.1s37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1zm-175.2 0c-20.5 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.7 37.1 37.1 37.1 20.5 0 37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1z" />
    </svg>
</a>

2. Ícone de estrela de IA

O código abaixo adiciona uma estrela de IA:

plaintext


<a href="#shoply-ai-chatbot" style="display:inline-flex;align-items:center">
    <img style="height:28px;width:28px" src="https://[CFN_PRODUCTION_ASSET]/AIStar.svg" alt="Shoply Chatbot"  />
</a>

3. Método de chamada de função

Além de utilizar hashtags, também pode colocar a chamada de função openShoplyAIChatBot() no atributo onclick de qualquer botão/ícone, para que os clientes vejam a janela de chat quando clicarem no botão/ícone.

plaintext


<button onclick="openShoplyAIChatBot()" style="border-radius:20px;margin:10px;cursor:pointer;background:black">
    <span style="font-size:13px;color:white;margin:5px">Click to Chat</span>
</button>

Precisa de ajuda?

Pode utilizar qualquer um dos exemplos acima e inserir o código junto ao ícone de pesquisa no ficheiro sections/header.liquid, para adicionar o deep link do chat ao cabeçalho da sua loja.

No entanto, se não se sentir totalmente à vontade a editar o código no modelo do seu tema, não se preocupe!

Não hesite em marcar uma reunião connosco e teremos todo o gosto em ajudá-lo a configurar o ícone perfeito no local ideal, de modo a combinar com o estilo único da sua loja.

Como ocultar o ícone flutuante?

Depois de configurar o deep link para abrir a janela de chat, poderá querer ocultar o ícone flutuante. Além disso, os proprietários de lojas mencionam frequentemente que ter demasiados ícones flutuantes nos seus sites pode ser excessivo. Compreendemos as suas preocupações! Foi por isso que introduzimos uma funcionalidade para ocultar o ícone de chat.

Na secção “Personalizar chat de IA” da consola de administração da aplicação, nas definições Selecionar um ícone de chat, pode agora selecionar a opção:

“Ocultar o ícone flutuante e utilizar um deep link para abrir o chat”.

Isto permite-lhe ocultar o ícone flutuante, continuando a permitir que a janela de chat seja aberta através de um deep link.