Passo 1: Obtenha sua chave de widget Photta
Faça login no Painel Photta Business em business.photta.app. Vá para Configurações → Chaves de API e copie sua chave publicável, que começa com pk_live_. Esta é a única credencial que você precisa. Antes que a chave funcione, adicione o domínio da sua loja WooCommerce (ex: minhaloja.com) em Configurações → Domínios Permitidos. A verificação de domínio ocorre em cada solicitação de prova, portanto, a lista de permissões deve ser configurada antes de você entrar no ar.
Se você estiver testando localmente em um subdomínio como localhost ou uma URL de homologação, adicione esse domínio à lista de permissões separadamente. Você pode adicionar até 10 domínios em qualquer plano pago. A conta de teste permite um domínio. Assim que seu domínio estiver listado, as solicitações dessa origem serão aceitas imediatamente — não há atraso de propagação.
Passo 2: Escolha entre shortcode ou tag de script
O WooCommerce oferece dois caminhos de integração limpos. A abordagem de shortcode ([photta_widget pk="pk_live_..."]) permite colar o widget em um local específico dentro do template da página do produto ou em um hook WooCommerce personalizado — ideal se você quiser que o botão apareça exatamente entre a galeria de produtos e o botão Adicionar ao Carrinho. Para usar o shortcode, cole-o diretamente no arquivo de template de produto WooCommerce single-product/add-to-cart/simple.php, ou use um bloco de construtor de páginas.
A abordagem de tag de script insere o SDK globalmente através do arquivo functions.php do seu tema usando wp_enqueue_script. Adicione o seguinte ao functions.php do seu tema filho: add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); Isso renderiza o botão do widget em cada página de produto automaticamente, sem alterações por template. A maioria dos lojistas prefere a abordagem de tag de script pela sua simplicidade.
Passo 3: Cole e salve o snippet escolhido
Para o caminho do shortcode: abra a sobreposição de template WooCommerce do seu tema filho para a página de produto individual. Cole [photta_widget pk="pk_live_..."] na posição vertical exata onde deseja que o botão apareça. Salve o arquivo. O renderizador de shortcode é registrado pelo auxiliar leve do Photta — nenhum arquivo de plugin é necessário, já que o próprio SDK registra o manipulador de shortcode quando carregado.
Para o caminho da tag de script: abra Aparência → Editor de Arquivo do Tema no seu painel WordPress, navegue até o functions.php do seu tema filho e adicione o snippet da ação wp_footer mostrado no Passo 2. Clique em Atualizar Arquivo para salvar. Verifique se o snippet foi salvo atualizando o editor e confirmando se o código está presente. Se você usa um plugin de cache (WP Rocket, W3 Total Cache), limpe o cache agora para que o novo script de rodapé seja servido.
Passo 4: Verifique se o widget aparece na sua loja
Navegue até uma página de produto na sua loja WooCommerce em uma janela de navegação anônima. Você deverá ver um botão 'Experimentar' próximo à seção Adicionar ao Carrinho. Clique no botão, envie uma foto de teste e verifique se o resultado da prova é renderizado. Se o botão não aparecer, abra o console do navegador (F12) e procure por erros do photta. Um erro de domínio 403 significa que seu domínio ainda não está na lista de Domínios Permitidos.
Verifique também se a tag de script do SDK aparece no código-fonte HTML da página pressionando Ctrl+U (Ver Código Fonte) e pesquisando por photta. Se a tag estiver ausente mas você adicionou o hook wp_footer, verifique se o seu tema está chamando wp_footer() em seu template de rodapé — alguns temas antigos ou altamente personalizados omitem essa chamada. Adicionar <?php wp_footer(); ?> antes do fechamento </body> no seu footer.php corrige isso.
Passo 5: Configurar visibilidade por categoria
Por padrão, o botão do widget aparece em todas as páginas de produtos. Para restringi-lo a categorias específicas, adicione o atributo data-categories à sua tag de script com uma lista separada por vírgulas de slugs de categoria WooCommerce: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-categories="roupas-femininas,roupas-masculinas,moda-praia" defer></script>. O SDK lê os dados da categoria WooCommerce da página atual e oculta o botão em páginas que não correspondem automaticamente.
Para usuários de shortcode, coloque o shortcode apenas nos templates associados às categorias-alvo, ou envolva o shortcode em uma condicional WooCommerce: use a função PHP has_term() para verificar se o produto atual pertence à categoria-alvo antes de exibir o shortcode. Este padrão oferece controle cirúrgico sobre quais tipos de produtos exibem a opção de prova sem duplicar templates.