Le bouton d'action

Avec le bouton d'action, votre client conclut la configuration : il demande un devis par e-mail, télécharge un PDF ou envoie la configuration à votre propre système. Le bouton d'action est une caractéristique dotée de ses propres paramètres. Cet article explique toutes les actions, les variables pour l'e-mail et le PDF, ainsi que les mesures à prendre contre le spam.

Créer un bouton d'action

1. Ouvrez le composant et cliquez dans l'arborescence, sur le groupe souhaité, sur + (info-bulle Ajouter une caractéristique).
2. Sous Paramètres de base, réglez la Catégorie de données sur Frontend et le Type de donnée sur Bouton d'action.
3. Saisissez sous Étiquette le libellé du bouton, p. ex. « Demander un devis » – pour chaque langue du contenu.
4. Dans la section Paramètres de bouton, choisissez l'Action et remplissez les champs correspondants (voir ci-dessous).
5. Enregistrez et publiez le composant.

Le bouton porte l'Étiquette. Si elle est vide, V3 affiche le nom interne. Dans Legacy, les Information de la caractéristique apparaissent en plus sous le bouton ; dans V3, seul le bouton s'affiche.

Les autres champs comme Visibilité, Ordre et Classe CSS fonctionnent comme pour toute caractéristique – voir Ajouter des caractéristiques & valeurs.

Les actions

Avant chaque action, le configurateur vérifie les saisies : s'il manque un champ obligatoire, le message apparaît sur la caractéristique et rien n'est envoyé. Dans V3, une règle de type Erreur bloque aussi le bouton – voir Créer un jeu de règles.

URL personnalisée

Sous URL POST personnalisée, saisissez l'adresse à laquelle la configuration doit être envoyée, p. ex. https://www.maboutique.fr/demande.php.

Avec {$baseurl}/chemin, l'adresse est complétée par le domaine de la page sur laquelle le configurateur tourne. Le même bouton fonctionne ainsi sur plusieurs domaines.

Voici comment la configuration arrive (V3) : configento.app l'envoie en JSON à votre URL. Pour chaque caractéristique, il y a une entrée sous son nom interne avec notamment label (étiquette), value (valeur ou saisie), valueLabel (étiquette de la valeur), choiceSku (référence article de la valeur), valueQty (quantité) et visibility. S'y ajoute _combined_sku avec la référence combinée du produit configuré (voir Paramètres du composant). Si votre URL répond avec un PDF, le navigateur du client le télécharge.

Réponse de votre URL (V3) : un statut HTTP 2xx est considéré comme un succès. Le client est ensuite dirigé vers la page indiquée sous Redirection après action ; sans elle, « Envoi réussi. » s'affiche sous le bouton. Si votre URL répond avec un PDF (Content-Type: application/pdf), le navigateur du client le télécharge. Le configurateur n'évalue pas le reste de la réponse, pas même des champs comme message ou redirect. Tout autre statut s'affiche sous le bouton sous la forme « Échec de l’envoi : HTTP … » avec le statut. Pour exploiter vous-même la réponse, p. ex. afficher votre propre message ou masquer le formulaire, utilisez l'événement action – voir Interface JavaScript.

Vérifier l'origine (V3) : configento.app envoie la configuration à votre URL depuis son serveur, et non depuis le navigateur. Chaque requête est signée avec la clé de sécurité de votre service. Vous la trouvez dans le portail de service, sur la page Services. Votre URL reconnaît ainsi les requêtes qui ne proviennent pas de configento.app et les refuse. Si le composant contient un Captcha, configento.app ne transmet que les requêtes dont le Captcha a été résolu. Une signature valide signifie donc aussi : le Captcha a été résolu.

Vérifiez la signature sur le corps de la requête non modifié et refusez les requêtes de plus de cinq minutes. Exemple en PHP :

$body      = file_get_contents('php://input');
$timestamp = $_SERVER['HTTP_X_CONFIGENTO_TIMESTAMP'] ?? '';
$signature = $_SERVER['HTTP_X_CONFIGENTO_SIGNATURE'] ?? '';
$expected  = 'sha256=' . hash_hmac('sha256', $timestamp . '.' . $body, 'VOTRE-CLE-DE-SECURITE');

if (!hash_equals($expected, $signature) || abs(time() - (int) $timestamp) > 300) {
    http_response_code(403);
    exit;
}
$configuration = json_decode($body, true);

Si votre service n'a pas de clé de sécurité, X-Configento-Timestamp et X-Configento-Signature sont absents.

Dans Legacy, le navigateur du client envoie la configuration directement à votre URL. Votre serveur doit autoriser les requêtes provenant du domaine de votre boutique (CORS).

Transmettre à la page

Avec cette action, ce n'est pas configento.app qui envoie la configuration, mais votre page : le bouton vérifie les saisies et transmet la configuration à votre JavaScript, qui l'envoie à votre propre serveur. C'est utile si vous disposez déjà de votre propre point de terminaison ou si vous réagissez différemment selon la boutique ou la langue, p. ex. avec vos propres destinataires. Les règles et la visibilité du bouton s'appliquent comme pour toute autre action.

L'action nécessite le moteur V3 ; un composant doté de ce bouton tourne donc toujours avec V3. La manière dont votre JavaScript reçoit la configuration et vérifie le Captcha sur votre serveur est décrite dans Interface JavaScript.

Générer un PDF

Vous modifiez le Contenu du PDF en cliquant sur l'aperçu (Cliquer pour modifier). Sous CSS du corps (optionnel), vous pouvez définir vos propres règles CSS pour le PDF. L'en-tête et le pied de page, le logo et la police proviennent de la Charte graphique.

Le téléchargement ne fonctionne que dans V3. Dans Legacy, le PDF est bien généré, mais pas transmis au client – utilisez-y Envoyer un e-mail avec PDF.

Envoyer un e-mail

Préparer le champ destinataire : seules les caractéristiques de type Champ de saisie court avec Saisie autorisée = E-mail sont proposées. S'il n'y en a aucune, l'éditeur affiche « Créez une caractéristique texte avec validation e-mail à utiliser comme destinataire. » Créez-la et réglez Champ obligatoire sur Oui. La liste affiche les noms internes des caractéristiques.

Expéditeur et envoi : l'e-mail part via votre propre serveur SMTP. L'adresse et le nom de l'expéditeur proviennent de Paramètres → Envoi d'e-mails. Sans paramètres complets à cet endroit, aucun e-mail n'est envoyé – voir Paramètres globaux.

Langues : vous renseignez l'objet et le contenu pour chaque langue du contenu. L'éditeur affiche un avertissement tant qu'une partie manque dans la langue sélectionnée. L'envoi se fait dans la langue dans laquelle le client utilise le configurateur ; s'il manque un texte pour celle-ci, configento.app prend la langue standard du composant. Legacy décide selon la langue du navigateur : allemand, sinon anglais.

Envoyer un e-mail avec PDF affiche ensemble les champs de l'e-mail et du PDF.

Redirection après action

Sous Redirection après action, vous pouvez indiquer une page vers laquelle le client est dirigé après une action réussie, p. ex. une page de remerciement. Sans redirection, V3 affiche sous le bouton « Envoi réussi. » Legacy n'affiche aucun message sans redirection – indiquez-y une page de remerciement afin que le client voie que sa demande est bien arrivée.

Variables

Les variables fonctionnent dans l'Objet, le Contenu de l'e-mail, le Contenu du PDF et le Nom de fichier.

Dans {{characteristic:NAME.FELD}}, NAME est le nom interne de la caractéristique et FELD l'un des champs suivants :

Exemple : Bonjour {{characteristic:nom.value}}, votre couleur : {{characteristic:couleur.valueLabel}}.

Pour les cases à cocher et la sélection multiple, plusieurs valeurs sont reliées par une virgule. Un nom inconnu donne un texte vide.

{{configuration_table}} n'affiche que les caractéristiques dont la Visibilité est Oui (visible) ou Backend uniquement et qui ont une valeur. Les en-têtes de colonnes sont toujours en allemand : « Merkmal », « Auswahl », « Artikel-Nr. » et « Menge ».

Protection anti-spam avec Captcha

Une action e-mail est un formulaire public : quiconque le trouve peut déclencher des e-mails vers n'importe quelle adresse – via votre serveur SMTP. Si le composant ne contient pas de Captcha, l'éditeur avertit : Risque de spam : aucun Captcha dans ce composant.

Voici comment protéger le bouton :

1. Créez dans le même composant une caractéristique de type de donnée Captcha (V3 uniquement), de préférence juste au-dessus du bouton d'action.
2. Passez le composant sur le moteur frontend V3 – voir Moteur frontend : Legacy ou V3.

Dès que le composant contient un Captcha, configento.app n'envoie plus d'e-mails ni de PDF sans Captcha résolu. Le client ne s'en aperçoit guère : son navigateur résout le Captcha en arrière-plan.

En outre, configento.app limite les envois : au maximum 100 e-mails par heure et par bouton d'action, et 10 par minute et par visiteur. Si quelqu'un renvoie la même configuration en moins d'une minute, aucun second e-mail n'est envoyé.

Ce que voit le client

Quand les modifications s'appliquent

Les modifications du bouton d'action – action, textes, champ destinataire – ne s'appliquent dans la boutique qu'après la publication. Les modifications de l'Envoi d'e-mails et de la Charte graphique dans les paramètres s'appliquent en revanche immédiatement.

Plusieurs boutons

Si vous avez besoin de plusieurs actions, créez plusieurs boutons d'action, p. ex. « Télécharger le PDF » et « Devis par e-mail ». Chaque bouton a sa propre action et ses propres textes.

Bouton d'action via l'agent IA

L'agent IA peut configurer un bouton d'action pour vous : « Crée un bouton ‹ Demander un devis › qui envoie un e-mail avec PDF à l'adresse saisie dans le champ E-mail, avec une copie à ventes@maboutique.fr. » Vérifiez ensuite les textes et le champ destinataire dans l'éditeur. Pour en savoir plus : Agent IA : Créer un configurateur via le chat.

Dépannage

1. Sous le bouton s'affiche « Aucun point de terminaison n’est configuré pour cette action. » – avec URL personnalisée, l'URL POST personnalisée manque. Pour les autres actions : enregistrez et publiez le composant.
2. Aucun e-mail n'arrive – sous Paramètres → Envoi d'e-mails, vérifiez la connexion avec Tester la connexion et un e-mail de test. Vérifiez qu'un Champ destinataire est sélectionné et que le client y a saisi une adresse valide.
3. « Échec de l’envoi : HTTP 403 » – la page tourne sur un domaine de boutique qui ne figure pas sous Paramètres → Domaines, ou le Captcha n'a pas été résolu. L'aperçu dans l'admin et les boutiques Shopify ne sont jamais refusés à cause du domaine – vous pouvez donc tester le bouton dans l'aperçu.
4. « Échec de l’envoi : HTTP 429 » – la limite d'envoi est atteinte. Attendez quelques minutes.
5. « Échec de l’envoi : HTTP 500 » – le plus souvent, les paramètres SMTP manquent ou le serveur SMTP refuse l'envoi.
6. Une variable reste vide – vérifiez le nom interne (majuscules/minuscules) et le champ. {{combined_image}} est toujours vide dans Legacy et nécessite en outre une image de produit combinée dans le composant. {{combined_sku}} reste vide si ni les valeurs choisies ni les caractéristiques n'ont de numéro d'article.
7. L'e-mail arrive dans la mauvaise langue – l'objet ou le contenu manquent pour la langue du client. Passez à cette langue dans Langue du contenu : et remplissez les deux.
8. Le bouton ne fait rien, une caractéristique est marquée en rouge – il manque un champ obligatoire ou une règle d'erreur s'applique. Le message figure sur la caractéristique ou sous le prix total.
9. Sous le bouton s'affiche « La page n’a pas de traitement configuré pour ce bouton. » – l'action Transmettre à la page est sélectionnée, mais il manque sur la page le JavaScript qui reçoit la configuration. Voir Interface JavaScript.

Étapes suivantes

• Ajouter des caractéristiques & valeurs
• Paramètres globaux
• Moteur frontend : Legacy ou V3
• Intégration extrait HTML