Passo 1: Obtenha a sua chave de widget Photta
Inicie sessão no Dashboard Photta Business em business.photta.app. Vá a Definições → Chaves API e copie a sua chave publicável, que começa com pk_live_. Esta é a única credencial de que precisa. Antes de a chave funcionar, adicione o domínio da sua loja WooCommerce (ex: minhaloja.com) em Definições → Domínios Permitidos. A verificação do domínio ocorre em cada pedido de prova, pelo que a lista de permissões deve ser definida antes de entrar em direto.
Se estiver a testar localmente num subdomínio como localhost ou num URL de teste, adicione esse domínio à lista de permissões separadamente. Pode adicionar até 10 domínios em qualquer plano pago. A conta de avaliação permite um domínio. Assim que o seu domínio estiver listado, os pedidos dessa origem serão aceites imediatamente — não há atraso de propagação.
Passo 2: Escolha shortcode vs. tag de script
O WooCommerce oferece-lhe dois caminhos de integração limpos. A abordagem por shortcode ([photta_widget pk="pk_live_..."]) permite colar o widget num local específico dentro do template da sua página de produto ou num hook personalizado WooCommerce — ideal se desejar 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 ficheiro de template de produto WooCommerce single-product/add-to-cart/simple.php, ou use um bloco de construtor de páginas.
A abordagem da tag de script insere o SDK globalmente através do ficheiro functions.php do seu tema usando wp_enqueue_script. Adicione o seguinte ao functions.php do seu child theme: add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); Isto renderiza o botão do widget em todas as páginas de produto automaticamente, sem alterações por template. A maioria dos lojistas prefere a abordagem da tag de script pela sua simplicidade.
Passo 3: Cole e guarde o snippet escolhido
Para o caminho do shortcode: abra o override de template WooCommerce do seu child theme para a página de produto único. Cole [photta_widget pk="pk_live_..."] na posição vertical exata onde deseja que o botão apareça. Guarde o ficheiro. O renderizador de shortcode é registado pelo auxiliar leve da Photta — não é necessário nenhum ficheiro de plugin, pois o próprio SDK regista o processador de shortcode quando carregado.
Para o caminho da tag de script: abra Apresentação → Editor de Ficheiros de Temas no seu painel WordPress, navegue até ao functions.php do seu child theme e adicione o snippet da ação wp_footer mostrado no Passo 2. Clique em Atualizar Ficheiro para guardar. Verifique se o snippet foi guardado atualizando o editor e confirmando que o código está presente. Se usar um plugin de cache (WP Rocket, W3 Total Cache), limpe a 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 numa janela de navegação anónima. Deverá ver um botão 'Experimentar' perto da secção Adicionar ao Carrinho. Clique no botão, carregue uma foto de teste e verifique se o resultado da prova é renderizado. Se o botão não aparecer, abra a consola do navegador (F12) e procure erros photta. Um erro de domínio 403 significa que o 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 tiver adicionado o hook wp_footer, verifique se o seu tema está a chamar wp_footer() no seu template de rodapé — alguns temas antigos ou muito personalizados omitem esta chamada. Adicionar <?php wp_footer(); ?> antes do fecho da tag </body> no seu footer.php resolve isto.
Passo 5: Configurar visibilidade por categoria
Por predefinição, o botão do widget aparece em todas as páginas de produto. 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="womens-apparel,mens-apparel,swimwear" defer></script>. O SDK lê os dados da categoria WooCommerce da página atual e oculta o botão automaticamente em páginas que não correspondam.
Para utilizadores de shortcode, coloque o shortcode apenas nos templates associados às categorias-alvo ou envolva o shortcode numa condicional WooCommerce: use a função PHP has_term() para verificar se o produto atual pertence à categoria-alvo antes de imprimir o shortcode. Este padrão oferece-lhe um controlo cirúrgico sobre quais os tipos de produto que exibem a opção de prova sem duplicar templates.