Como abrir a janela de chat com um link

Você pode abrir a janela de chat usando um link profundo sem modificar o código do seu tema. No Editor de Tema da 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 será aberta automaticamente.

Exemplo ao vivo: demo.shoplyai.ai

Passos:

Edite o botão, texto ou ícone desejado no editor do seu tema.
Defina o link ou URL como #shoply-ai-chatbot.

Exemplos:

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

Use um texto com link para abrir a janela de chat:

Abrir o chat com perguntas específicas do produto

Adicione um botão “Question About This Product?” a uma página de produto para ajudar os compradores a fazer perguntas sobre esse item. Defina o link dele como #shoply_product_questions. Ao clicar, o chat será aberto com o nome do produto, um breve destaque do produto e perguntas geradas automaticamente relevantes para aquele produto.

No Editor de Tema da Shopify, abra o template do seu produto e adicione ou edite um botão ou texto com link que aceite uma URL.
Defina o rótulo como “Question About This Product?” e o link como #shoply_product_questions.
Salve, visite uma página de produto e clique no link para verificar as perguntas sobre o produto.

Se o seu tema não oferecer uma configuração adequada de botão ou link, adicione este link no HTML do template do produto:

html


<a href="#shoply_product_questions">Question About This Product?</a>

Use este link em uma página de produto para que o Shoply tenha o contexto do produto. Você também pode compartilhar uma URL completa do produto terminando em #shoply_product_questions.

Teste o chat de perguntas sobre produto para Bent 85 Skis . As sugestões incluem perguntas sobre peso do ski, núcleo, perfil de rocker e arte do topsheet. Os compradores podem selecionar uma sugestão ou digitar sua própria pergunta.

Para exemplos de onde usar esses links, veja perguntas sobre produtos com IA em nosso guia para substituir FAQ.

Essas perguntas sobre produtos são geradas automaticamente. As perguntas iniciais que você configura em Customize AI Chat se aplicam à abertura padrão do chat.

Abrir o chat com uma pergunta pré-preenchida

Quer abrir a janela de chat e enviar automaticamente uma pergunta? Você pode fazer isso usando um fragmento hash (recomendado) ou um parâmetro de consulta de URL.

Isso é perfeito para criar links diretos para tópicos comuns, como política de frete, política de devolução ou perguntas sobre produtos.

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

Use o fragmento hash #shoply_question=. Como o hash é processado inteiramente no navegador, clicar nesse link 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 frete: 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?
Status do pedido: 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?

Você pode combinar isso com qualquer página da sua loja. Por exemplo, para abrir o chatbot com uma pergunta em uma 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 de URL

O parâmetro de consulta ?shoply_question= ainda é compatível para retrocompatibilidade. Observe que adicionar um parâmetro de consulta a uma URL em que o cliente já está causará um recarregamento da página.

Formato:

plaintext


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

Observação: Lembre-se de codificar sua pergunta em URL ao usar caracteres especiais ou espaços. A maioria dos navegadores fará isso automaticamente, mas se você estiver adicionando links de forma programática, use a codificação de URL adequada (por exemplo, espaços se tornam %20).

Quando um cliente clicar em qualquer um dos tipos de link, a janela de chat será aberta automaticamente e a pergunta será enviada ao chatbot de IA, fornecendo uma resposta instantânea.

Casos de uso:

Adicione um link “Ask about shipping” no seu rodapé
Crie códigos QR que abrem o chatbot com perguntas específicas
Inclua links úteis em suas campanhas de e-mail ou confirmações de pedido
Adicione links de ajuda contextual em páginas de produto (por exemplo, “Ask about sizing”)

Como usar um link profundo para abrir a janela de chat (é preciso editar o código no template do tema)

Na seção anterior, discutimos como usar a hashtag (link profundo) para acionar a janela de chat adicionando-a a qualquer botão, ícone ou texto diretamente pelo Editor de Tema, sem editar o código do seu tema.

No entanto, se você quiser ter flexibilidade total para adicionar o link profundo em qualquer lugar da sua loja (por exemplo, criar um novo ícone no cabeçalho), será necessário editar o código do template.

Abaixo estão exemplos simples de código HTML que você pode usar para criar novos ícones no template 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 usar hashtags, você 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?

Você pode usar qualquer um dos exemplos acima e inserir o código ao lado do ícone de busca no arquivo sections/header.liquid para adicionar o link profundo do chat ao cabeçalho da sua loja.

No entanto, se você não se sentir totalmente à vontade para editar o código no template do seu tema, não se preocupe!

Sinta-se à vontade para agendar uma reunião conosco , e teremos prazer em ajudar você a configurar o ícone perfeito no local ideal para combinar com o estilo único da sua loja.

Como ocultar o ícone flutuante?

Depois de configurar o link profundo para abrir a janela de chat, você pode querer ocultar o ícone flutuante. Além disso, os lojistas costumam mencionar que ter muitos ícones flutuantes em seus sites pode ser algo excessivo. Entendemos suas preocupações! É por isso que introduzimos um recurso para ocultar o ícone de chat.

Na seção “Customize AI Chat” do console de administração do app, nas configurações de Select a Chat Icon, agora você pode selecionar a opção:

“Hide floating icon and use deep link to open chat”.

Isso permite ocultar o ícone flutuante e, ao mesmo tempo, continuar permitindo que a janela de chat seja aberta por meio de um link profundo.