Étape 1 : Obtenez votre clé widget Photta
Connectez-vous au tableau de bord Photta Business à l'adresse business.photta.app. Allez dans Paramètres → Clés API et copiez votre clé publique, qui commence par pk_live_. C'est le seul identifiant dont vous avez besoin. Avant que la clé ne fonctionne, ajoutez le domaine de votre boutique WooCommerce (ex: maboutique.com) dans Paramètres → Domaines autorisés. La vérification du domaine s'exécute à chaque demande d'essai, la liste d'autorisation doit donc être configurée avant la mise en ligne.
Si vous effectuez des tests localement sur un sous-domaine comme localhost ou une URL de préproduction, ajoutez ce domaine séparément à la liste d'autorisation. Vous pouvez ajouter jusqu'à 10 domaines sur n'importe quel forfait payant. Le compte d'essai permet un seul domaine. Une fois votre domaine répertorié, les requêtes provenant de cette origine seront acceptées immédiatement — il n'y a pas de délai de propagation.
Étape 2 : Choisissez entre shortcode et balise script
WooCommerce vous offre deux voies d'intégration propres. L'approche par shortcode ([photta_widget pk="pk_live_..."]) vous permet de coller le widget à un endroit spécifique dans votre modèle de page produit ou un hook WooCommerce personnalisé — idéal si vous souhaitez que le bouton apparaisse exactement entre la galerie de produits et le bouton Ajouter au panier. Pour utiliser le shortcode, collez-le directement dans le fichier de modèle de produit WooCommerce single-product/add-to-cart/simple.php, ou utilisez un bloc de constructeur de page.
L'approche par balise script insère le SDK globalement via le fichier functions.php de votre thème en utilisant wp_enqueue_script. Ajoutez ce qui suit au fichier functions.php de votre thème enfant : add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); Cela génère automatiquement le bouton du widget sur chaque page produit, sans modification par modèle. La plupart des marchands préfèrent l'approche par balise script pour sa simplicité.
Étape 3 : Collez et enregistrez l'extrait choisi
Pour le chemin via shortcode : ouvrez la surcharge du modèle WooCommerce de votre thème enfant pour la page produit unique. Collez [photta_widget pk="pk_live_..."] à la position verticale exacte où vous souhaitez que le bouton apparaisse. Enregistrez le fichier. Le moteur de rendu du shortcode est enregistré par l'assistant léger de Photta — aucun fichier de plugin n'est nécessaire, car le SDK lui-même enregistre le gestionnaire de shortcode lors du chargement.
Pour le chemin via balise script : ouvrez Apparence → Éditeur de fichiers de thème dans votre administration WordPress, naviguez vers le fichier functions.php de votre thème enfant, et ajoutez l'extrait d'action wp_footer présenté à l'étape 2. Cliquez sur Mettre à jour le fichier pour enregistrer. Vérifiez que l'extrait a été enregistré en actualisant l'éditeur et en confirmant la présence du code. Si vous utilisez un plugin de cache (WP Rocket, W3 Total Cache), videz le cache maintenant pour que le nouveau script de pied de page soit servi.
Étape 4 : Vérifiez que le widget apparaît sur votre boutique
Naviguez vers une page produit de votre boutique WooCommerce dans une fenêtre de navigation privée. Vous devriez voir un bouton « Essayer » près de la section Ajouter au panier. Cliquez sur le bouton, téléchargez une photo de test et vérifiez que le résultat de l'essai s'affiche. Si le bouton n'apparaît pas, ouvrez la console du navigateur (F12) et recherchez les erreurs photta. Une erreur de domaine 403 signifie que votre domaine n'est pas encore dans la liste des domaines autorisés.
Vérifiez également que la balise script du SDK apparaît dans le code source HTML de la page en appuyant sur Ctrl+U (Afficher le code source) et en recherchant photta. Si la balise est absente alors que vous avez ajouté le hook wp_footer, vérifiez que votre thème appelle bien wp_footer() dans son modèle de pied de page — certains thèmes anciens ou fortement personnalisés omettent cet appel. L'ajout de <?php wp_footer(); ?> avant la fermeture de la balise </body> dans votre fichier footer.php corrige cela.
Étape 5 : Configurer la visibilité par catégorie
Par défaut, le bouton du widget apparaît sur toutes les pages produits. Pour le restreindre à des catégories spécifiques, ajoutez l'attribut data-categories à votre balise script avec une liste de slugs de catégories WooCommerce séparés par des virgules : <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-categories="vetements-femmes,vetements-hommes,maillots-de-bain" defer></script>. Le SDK lit les données de catégorie WooCommerce de la page actuelle et masque automatiquement le bouton sur les pages ne correspondant pas.
Pour les utilisateurs de shortcodes, placez le shortcode uniquement dans les modèles associés aux catégories cibles, ou enveloppez le shortcode dans une conditionnelle WooCommerce : utilisez la fonction PHP has_term() pour vérifier si le produit actuel appartient à la catégorie cible avant d'afficher le shortcode. Ce schéma vous donne un contrôle chirurgical sur les types de produits affichant l'option d'essai sans dupliquer les modèles.