Passaggio 1: Ottieni la tua chiave widget Photta
Accedi alla Dashboard di Photta Business su business.photta.app. Vai su Impostazioni → API Keys e copia la tua chiave pubblica (publishable key), che inizia con pk_live_. Questa è l'unica credenziale necessaria. Prima che la chiave funzioni, aggiungi il dominio del tuo store WooCommerce (es. miostore.com) in Impostazioni → Domini Consentiti. Il controllo del dominio viene eseguito su ogni richiesta di prova virtuale, quindi la lista dei domini consentiti deve essere configurata prima di andare online.
Se stai effettuando test in locale su un sottodominio come localhost o un URL di staging, aggiungi separatamente quel dominio all'elenco. Puoi aggiungere fino a 10 domini con qualsiasi piano a pagamento. L'account di prova consente un solo dominio. Una volta che il tuo dominio è in elenco, le richieste provenienti da quell'origine saranno accettate immediatamente: non c'è alcun ritardo di propagazione.
Passaggio 2: Scegli tra shortcode e script tag
WooCommerce ti offre due percorsi di integrazione puliti. L'approccio tramite shortcode ([photta_widget pk="pk_live_..."]) ti permette di incollare il widget in una posizione specifica all'interno del template della tua pagina prodotto o in un hook WooCommerce personalizzato; ideale se vuoi che il pulsante appaia esattamente tra la galleria prodotto e il pulsante Aggiungi al carrello. Per usare lo shortcode, incollalo direttamente nel file template del prodotto WooCommerce single-product/add-to-cart/simple.php, o usa un blocco del page builder.
L'approccio via script tag inserisce l'SDK globalmente tramite il file functions.php del tuo tema usando wp_enqueue_script. Aggiungi quanto segue al file functions.php del tuo tema child: add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); Questo renderizza automaticamente il pulsante del widget su ogni pagina prodotto, senza modifiche ai singoli template. La maggior parte dei commercianti preferisce l'approccio via script tag per la sua semplicità.
Passaggio 3: Incolla e salva lo snippet scelto
Per il percorso tramite shortcode: apri l'override del template WooCommerce del tuo tema child per la pagina del singolo prodotto. Incolla [photta_widget pk="pk_live_..."] nell'esatta posizione verticale in cui vuoi che appaia il pulsante. Salva il file. Il renderer dello shortcode è registrato dall'helper leggero di Photta: non è necessario alcun file plugin, poiché l'SDK stesso registra l'handler dello shortcode una volta caricato.
Per il percorso via script tag: apri Aspetto → Editor del file del tema nel tuo pannello admin di WordPress, vai su functions.php del tuo tema child e aggiungi lo snippet dell'azione wp_footer mostrato nel Passaggio 2. Clicca su Aggiorna file per salvare. Verifica che lo snippet sia stato salvato aggiornando l'editor e confermando la presenza del codice. Se usi un plugin di cache (WP Rocket, W3 Total Cache), svuota la cache ora in modo che venga servito il nuovo script nel footer.
Passaggio 4: Verifica che il widget appaia nel tuo store
Naviga su una pagina prodotto nel tuo store WooCommerce usando una finestra di navigazione in incognito. Dovresti vedere un pulsante 'Prova virtuale' vicino alla sezione Aggiungi al carrello. Clicca sul pulsante, carica una foto di test e verifica che il risultato della prova venga renderizzato. Se il pulsante non appare, apri la console del browser (F12) e cerca eventuali errori photta. Un errore di dominio 403 significa che il tuo dominio non è ancora nell'elenco dei Domini Consentiti.
Controlla inoltre che lo script tag dell'SDK appaia nel codice sorgente HTML della pagina premendo Ctrl+U (Visualizza sorgente) e cercando photta. Se il tag è assente ma hai aggiunto l'hook wp_footer, ricontrolla che il tuo tema chiami effettivamente wp_footer() nel suo template del footer: alcuni temi più vecchi o pesantemente personalizzati omettono questa chiamata. Aggiungere <?php wp_footer(); ?> prima della chiusura del tag </body> nel tuo file footer.php risolverà il problema.
Passaggio 5: Configura la visibilità per categoria
Per impostazione predefinita, il pulsante del widget appare su tutte le pagine prodotto. Per limitarlo a categorie specifiche, aggiungi l'attributo data-categories al tuo script tag con un elenco separato da virgole degli slug delle categorie WooCommerce: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-categories="abbigliamento-donna,abbigliamento-uomo,costumi-da-bagno" defer></script>. L'SDK legge i dati della categoria WooCommerce della pagina corrente e nasconde automaticamente il pulsante sulle pagine non corrispondenti.
Per gli utenti dello shortcode, inserisci lo shortcode solo nei template associati alle categorie target, oppure avvolgi lo shortcode in una condizionale WooCommerce: usa la funzione PHP has_term() per controllare se il prodotto corrente appartiene alla categoria target prima di generare lo shortcode. Questo pattern ti offre un controllo chirurgico su quali tipi di prodotto mostrano l'opzione di prova senza dover duplicare i template.