Aller au contenu principal

Bouton "Envoyer à Inciflex"

Si votre système de gestion est un système fermé (logiciel propriétaire, application web interne, portail) et que vous ne pouvez pas facilement exporter des fichiers ou intégrer des APIs, vous pouvez utiliser le bouton "Envoyer à Inciflex".

Il s'agit d'un composant web prêt à l'emploi qui :

  • Affiche un bouton dans votre système de gestion
  • Au clic, envoie les données de la commande à DARC Bridge
  • Confirme le résultat à l'utilisateur

Il peut être inséré dans n'importe quelle page web via iframe ou web component.

Web Component​

La méthode recommandée. Ajoutez le script et utilisez la balise HTML <inciflex-order-button>.

1. Incluez le script​

<script src="https://bridge.inciflex.it/widget/inciflex-order-button.js"></script>

2. Insérez le bouton​

<inciflex-order-button
  api-key="VOTRE_CLE_API"
  codice-cliente="CLI001"
  riferimento-ordine="ORD-2025-001234"
  data-ordine="2025-10-15"
  righe='[
    {"codice_articolo":"ART-500","quantita":100,"unita_misura":"PZ"},
    {"codice_articolo":"ART-601","quantita":100,"unita_misura":"PZ"}
  ]'
></inciflex-order-button>

Le composant affiche un bouton "Envoyer à Inciflex". Au clic, il effectue l'appel API et montre le résultat directement dans l'interface.

3. Attributs disponibles​

AttributObligatoireDescription
api-key✅Votre clé API Inciflex
codice-cliente✅Votre code client
riferimento-ordine✅Numéro de commande dans votre système de gestion
data-ordine✅Date de commande (AAAA-MM-JJ)
data-consegnaDate de livraison demandée (AAAA-MM-JJ)
noteNotes sur la commande
righe✅Tableau JSON avec les lignes de commande
labelTexte du bouton (défaut : "Envoyer à Inciflex")
langLangue de l'interface : it, en, fr, de (défaut : it)

4. Remplir les données dynamiquement​

Dans un vrai système de gestion, les données de commande ne sont pas statiques. Vous pouvez les définir via JavaScript :

<inciflex-order-button id="btnInciflex" api-key="VOTRE_CLE_API"></inciflex-order-button>

<script>
  const btn = document.getElementById('btnInciflex');

  // Remplir avec les données de la commande courante de votre système
  btn.setAttribute('codice-cliente', votreSysteme.codeClient);
  btn.setAttribute('riferimento-ordine', votreSysteme.numeroCommande);
  btn.setAttribute('data-ordine', votreSysteme.dateCommande);
  btn.setAttribute('righe', JSON.stringify(votreSysteme.lignesCommande));
</script>

5. Événements​

Le composant émet des événements que vous pouvez écouter :

const btn = document.getElementById('btnInciflex');

btn.addEventListener('ordine-inviato', (e) => {
  console.log('Commande enregistrée :', e.detail.id_ordine);
  // ex. mettre à jour le statut dans votre système
});

btn.addEventListener('ordine-errore', (e) => {
  console.error('Erreur :', e.detail.errori);
  // ex. afficher un message à l'utilisateur
});

Iframe​

Si vous ne pouvez pas insérer de scripts externes (politiques de sécurité, CSP restrictives), vous pouvez utiliser un iframe.

<iframe
  src="https://bridge.inciflex.it/widget/ordine?api_key=VOTRE_CLE_API&codice_cliente=CLI001&riferimento_ordine=ORD-2025-001234&data_ordine=2025-10-15&righe=%5B%7B%22codice_articolo%22%3A%22ART-500%22%2C%22quantita%22%3A100%7D%5D"
  width="300"
  height="80"
  frameborder="0"
></iframe>

L'iframe affiche le bouton et gère tout en interne, y compris la confirmation à l'utilisateur.

Paramètres dans l'URL

Les paramètres sont les mêmes que pour le web component, passés en query string. Le paramètre righe doit être encodé en URL.

Communication iframe ↔ page parente​

Si vous souhaitez recevoir le résultat dans votre page, vous pouvez écouter les messages postMessage :

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://bridge.inciflex.it') return;

  if (event.data.tipo === 'ordine-inviato') {
    console.log('Commande enregistrée :', event.data.id_ordine);
  }
  if (event.data.tipo === 'ordine-errore') {
    console.error('Erreur :', event.data.errori);
  }
});

Que se passe-t-il au clic ?​

Quelle que soit la méthode (web component ou iframe), au clic le bouton :

  1. Collecte les paramètres de la commande
  2. Effectue un appel POST vers https://bridge.inciflex.it/api/v1/ordini
  3. Montre le résultat à l'utilisateur (succès ou erreur)

C'est la même API REST décrite dans la section Méthodes d'Envoi, mais encapsulée dans un composant prêt à l'emploi.

Exemple complet​

Un système de gestion web affichant les détails de la commande et permettant l'envoi en un clic :

<!DOCTYPE html>
<html>
<head>
  <title>Détail Commande - Système Exemple</title>
  <script src="https://bridge.inciflex.it/widget/inciflex-order-button.js"></script>
</head>
<body>
  <h1>Commande #ORD-2025-001234</h1>
  <table>
    <tr><td>Article</td><td>Quantité</td></tr>
    <tr><td>ART-500 - Bride DN50</td><td>100 PZ</td></tr>
    <tr><td>ART-601 - Joint DN50</td><td>100 PZ</td></tr>
  </table>

  <inciflex-order-button
    id="btnInciflex"
    api-key="VOTRE_CLE_API"
    codice-cliente="CLI001"
    riferimento-ordine="ORD-2025-001234"
    data-ordine="2025-10-15"
    righe='[
      {"codice_articolo":"ART-500","quantita":100,"unita_misura":"PZ"},
      {"codice_articolo":"ART-601","quantita":100,"unita_misura":"PZ"}
    ]'
  ></inciflex-order-button>

  <script>
    document.getElementById('btnInciflex')
      .addEventListener('ordine-inviato', (e) => {
        alert('Commande envoyée ! ID : ' + e.detail.id_ordine);
      });
  </script>
</body>
</html>

Prochaines Étapes​