Passa al contenuto principale

Pulsante "Invia ad Inciflex"

Se il tuo gestionale è un sistema chiuso (software proprietario, applicazione web interna, portale) e non puoi facilmente esportare file o integrare API, puoi usare il pulsante "Invia ad Inciflex".

Si tratta di un componente web pronto all'uso che:

  • Mostra un pulsante nel tuo gestionale
  • Al click, invia i dati dell'ordine a DARC Bridge
  • Conferma l'esito all'utente

Può essere inserito in qualsiasi pagina web tramite iframe o web component.

Web Component​

Il metodo consigliato. Aggiungi lo script e usa il tag HTML <inciflex-order-button>.

1. Includi lo script​

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

2. Inserisci il pulsante​

<inciflex-order-button
  api-key="LA_TUA_API_KEY"
  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>

Il componente renderizza un pulsante "Invia ad Inciflex". Al click, esegue la chiamata API e mostra l'esito direttamente nell'interfaccia.

3. Attributi disponibili​

AttributoObbligatorioDescrizione
api-key✅La tua API Key Inciflex
codice-cliente✅Il tuo codice cliente
riferimento-ordine✅Numero d'ordine nel tuo gestionale
data-ordine✅Data ordine (YYYY-MM-DD)
data-consegnaData consegna richiesta (YYYY-MM-DD)
noteNote sull'ordine
righe✅JSON array con le righe d'ordine
labelTesto del pulsante (default: "Invia ad Inciflex")
langLingua dell'interfaccia: it, en, fr, de (default: it)

4. Popolare i dati dinamicamente​

In un gestionale reale i dati dell'ordine non sono statici. Puoi impostarli via JavaScript:

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

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

  // Popola con i dati dell'ordine corrente dal tuo gestionale
  btn.setAttribute('codice-cliente', tuoGestionale.codiceCliente);
  btn.setAttribute('riferimento-ordine', tuoGestionale.numeroOrdine);
  btn.setAttribute('data-ordine', tuoGestionale.dataOrdine);
  btn.setAttribute('righe', JSON.stringify(tuoGestionale.righeOrdine));
</script>

5. Eventi​

Il componente emette eventi che puoi ascoltare:

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

btn.addEventListener('ordine-inviato', (e) => {
  console.log('Ordine registrato:', e.detail.id_ordine);
  // es. aggiorna lo stato nel tuo gestionale
});

btn.addEventListener('ordine-errore', (e) => {
  console.error('Errore:', e.detail.errori);
  // es. mostra un messaggio all'utente
});

Iframe​

Se non puoi inserire script esterni (politiche di sicurezza, CSP restrittive), puoi usare un iframe.

<iframe
  src="https://bridge.inciflex.it/widget/ordine?api_key=LA_TUA_API_KEY&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 mostra il pulsante e gestisce tutto internamente, inclusa la conferma all'utente.

Parametri nell'URL

I parametri sono gli stessi del web component, passati come query string. Il parametro righe va codificato in URL encoding.

Comunicazione iframe ↔ pagina padre​

Se vuoi ricevere l'esito nella tua pagina, puoi ascoltare i messaggi postMessage:

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

  if (event.data.tipo === 'ordine-inviato') {
    console.log('Ordine registrato:', event.data.id_ordine);
  }
  if (event.data.tipo === 'ordine-errore') {
    console.error('Errore:', event.data.errori);
  }
});

Cosa succede al click?​

Indipendentemente dal metodo (web component o iframe), al click il pulsante:

  1. Raccoglie i parametri dell'ordine
  2. Esegue una chiamata POST a https://bridge.inciflex.it/api/v1/ordini
  3. Mostra il risultato all'utente (successo o errore)

È la stessa API REST descritta nella sezione Metodi di Invio, ma incapsulata in un componente pronto all'uso.

Esempio completo​

Un gestionale web che mostra i dettagli dell'ordine e permette l'invio con un click:

<!DOCTYPE html>
<html>
<head>
  <title>Dettaglio Ordine - Gestionale Esempio</title>
  <script src="https://bridge.inciflex.it/widget/inciflex-order-button.js"></script>
</head>
<body>
  <h1>Ordine #ORD-2025-001234</h1>
  <table>
    <tr><td>Articolo</td><td>Quantità</td></tr>
    <tr><td>ART-500 - Flangia DN50</td><td>100 PZ</td></tr>
    <tr><td>ART-601 - Guarnizione DN50</td><td>100 PZ</td></tr>
  </table>

  <inciflex-order-button
    id="btnInciflex"
    api-key="LA_TUA_API_KEY"
    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('Ordine inviato! ID: ' + e.detail.id_ordine);
      });
  </script>
</body>
</html>

Prossimi Passi​