Instale o widget de chat do ZapClaw em uma loja Shopify

Em resumo: na Shopify você adiciona o trecho de código do widget ao código do tema, ou a um app embed que aceite código personalizado. O chat aparece nas páginas da vitrine.

O que você precisa

• Uma conta Shopify que possa editar o código do tema (o dono, ou um colaborador com permissão para editar temas).
• O trecho de código do widget, na área Agents do painel do ZapClaw.
• A Shopify restringe scripts nas páginas de checkout, então espere o chat só nas páginas da vitrine.
• Copie o snippet exato do seu widget na área Agents do painel. O id acima é um exemplo: o seu é diferente.
• Sites permitidos. No painel, inclua o endereço do seu site nos sites permitidos do widget, exatamente como os visitantes o veem. https://www.example.com e https://example.com são dois endereços diferentes. Um site que não está na lista não mostra o balão.

<script async src="https://chat.zapclaw.app/loader.js" data-widget-id="YOUR_WIDGET_ID"></script>

As plataformas mudam o nome dos menus de tempos em tempos. Se um rótulo abaixo for diferente na sua tela, procure nas configurações da plataforma o nome entre aspas.

Opção 1: o código do tema

1. No painel do ZapClaw, abra o seu widget em Agents e copie o trecho de código com o botão de copiar.
2. No admin da Shopify, abra Loja virtual (Online Store) e depois Temas. No tema ativo escolha Editar código.
3. Abra layout/theme.liquid e cole o trecho de código logo acima da tag de fechamento </body>.
4. Clique em Salvar e abra a sua loja em uma janela anônima.

Opção 2: um app embed

O ZapClaw não tem um app próprio na Shopify. Se você já usa um app que adiciona código personalizado à loja, ative-o em Loja virtual, Temas, Personalizar, App embeds, e cole o trecho de código no campo de código desse app.

Um tema para o qual você mudar depois não leva o trecho de código junto: adicione de novo no tema novo.

Confira se funciona

Abra o seu site publicado em uma janela anônima e procure o balão no canto que você escolheu. Sem balão? Confira se o agente está publicado, se o widget está ativo, se o seu endereço está nos sites permitidos e se nenhum bloqueador de conteúdo ou Content Security Policy o está impedindo.

Se o seu site tem uma Content Security Policy

A maioria dos sites não precisa de nada aqui. Um site com Content Security Policy rígida acrescenta duas entradas à política, e nada mais:

script-src https://chat.zapclaw.app
frame-src https://chat.zapclaw.app

Só se a sua política também restringe connect-src (ou não tem connect-src mas restringe default-src), acrescente também connect-src https://chat.zapclaw.app. O loader lê dali o visual do seu balão antes de desenhá-lo.

Nenhuma entrada de style-src é necessária: o loader aplica os estilos pela API de estilos do navegador, nunca por uma tag de estilo inline.

Modo anônimo

Nesta plataforma o widget funciona no modo anônimo. Ele responde com as bases de conhecimento que você marcou como públicas, coleta um contato e passa o caso para uma pessoa. O que significa o modo anônimo.

Uma frase para a sua política de privacidade

O widget trata o que seus visitantes digitam, em seu nome, então a sua política de privacidade deve dizer isso. Você pode adaptar esta frase:

O assistente de chat deste site é fornecido pelo ZapClaw, que trata as mensagens digitadas pelos visitantes em nosso nome, como nosso operador. O chat não grava cookies neste site, e as conversas são mantidas por 90 dias.

Outros guias de instalação

• Visão geral, com as linhas da Content Security Policy e a frase de privacidade.
• WordPress, para um site hospedado por você.
• WordPress.com, nos planos que permitem plugins.
• Google Tag Manager, com uma tag de HTML personalizado.
• Wix, com o Custom Code em um plano pago.
• Webflow, no código personalizado das configurações do site.
• Squarespace, no Code Injection.