Zum Hauptinhalt springen

"An Inciflex senden" Button

Wenn Ihr Verwaltungssystem ein geschlossenes System ist (proprietäre Software, interne Webanwendung, Portal) und Sie nicht einfach Dateien exportieren oder APIs integrieren können, können Sie den "An Inciflex senden" Button verwenden.

Es handelt sich um eine einsatzbereite Web-Komponente, die:

  • Einen Button in Ihrem Verwaltungssystem anzeigt
  • Beim Klick die Auftragsdaten an DARC Bridge sendet
  • Das Ergebnis dem Benutzer bestätigt

Er kann in jede Webseite über iframe oder Web Component eingebettet werden.

Web Component​

Die empfohlene Methode. Fügen Sie das Script hinzu und verwenden Sie das HTML-Tag <inciflex-order-button>.

1. Script einbinden​

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

2. Button einfügen​

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

Die Komponente rendert einen "An Inciflex senden" Button. Beim Klick führt sie den API-Aufruf durch und zeigt das Ergebnis direkt in der Oberfläche an.

3. Verfügbare Attribute​

AttributPflichtBeschreibung
api-key✅Ihr Inciflex-API-Schlüssel
codice-cliente✅Ihr Kundencode
riferimento-ordine✅Auftragsnummer in Ihrem Verwaltungssystem
data-ordine✅Auftragsdatum (JJJJ-MM-TT)
data-consegnaGewünschtes Lieferdatum (JJJJ-MM-TT)
noteAuftragsnotizen
righe✅JSON-Array mit Auftragszeilen
labelButton-Text (Standard: "An Inciflex senden")
langOberflächensprache: it, en, fr, de (Standard: it)

4. Daten dynamisch befüllen​

In einem realen Verwaltungssystem sind die Auftragsdaten nicht statisch. Sie können sie per JavaScript setzen:

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

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

  // Mit aktuellen Auftragsdaten aus Ihrem Verwaltungssystem befüllen
  btn.setAttribute('codice-cliente', ihrSystem.kundenCode);
  btn.setAttribute('riferimento-ordine', ihrSystem.auftragsNummer);
  btn.setAttribute('data-ordine', ihrSystem.auftragsDatum);
  btn.setAttribute('righe', JSON.stringify(ihrSystem.auftragsZeilen));
</script>

5. Ereignisse​

Die Komponente löst Ereignisse aus, die Sie abfangen können:

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

btn.addEventListener('ordine-inviato', (e) => {
  console.log('Auftrag registriert:', e.detail.id_ordine);
  // z.B. Status in Ihrem Verwaltungssystem aktualisieren
});

btn.addEventListener('ordine-errore', (e) => {
  console.error('Fehler:', e.detail.errori);
  // z.B. Nachricht an den Benutzer anzeigen
});

Iframe​

Wenn Sie keine externen Scripts einfügen können (Sicherheitsrichtlinien, restriktive CSP), können Sie einen Iframe verwenden.

<iframe
  src="https://bridge.inciflex.it/widget/ordine?api_key=IHR_API_SCHLUESSEL&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>

Der Iframe zeigt den Button an und verwaltet alles intern, einschließlich der Bestätigung an den Benutzer.

URL-Parameter

Die Parameter sind die gleichen wie beim Web Component, übergeben als Query-String. Der Parameter righe muss URL-kodiert werden.

Kommunikation Iframe ↔ übergeordnete Seite​

Wenn Sie das Ergebnis in Ihrer Seite erhalten möchten, können Sie postMessage-Nachrichten abhören:

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

  if (event.data.tipo === 'ordine-inviato') {
    console.log('Auftrag registriert:', event.data.id_ordine);
  }
  if (event.data.tipo === 'ordine-errore') {
    console.error('Fehler:', event.data.errori);
  }
});

Was passiert beim Klick?​

Unabhängig von der Methode (Web Component oder Iframe), beim Klick führt der Button folgendes aus:

  1. Sammelt die Auftragsparameter
  2. Führt einen POST-Aufruf an https://bridge.inciflex.it/api/v1/ordini durch
  3. Zeigt das Ergebnis dem Benutzer an (Erfolg oder Fehler)

Es ist die gleiche REST API, die im Abschnitt Versandmethoden beschrieben wird, aber in einer einsatzbereiten Komponente verpackt.

Vollständiges Beispiel​

Ein Web-Verwaltungssystem, das Auftragsdetails anzeigt und das Absenden mit einem Klick ermöglicht:

<!DOCTYPE html>
<html>
<head>
  <title>Auftragsdetail - Beispielsystem</title>
  <script src="https://bridge.inciflex.it/widget/inciflex-order-button.js"></script>
</head>
<body>
  <h1>Auftrag #ORD-2025-001234</h1>
  <table>
    <tr><td>Artikel</td><td>Menge</td></tr>
    <tr><td>ART-500 - Flansch DN50</td><td>100 PZ</td></tr>
    <tr><td>ART-601 - Dichtung DN50</td><td>100 PZ</td></tr>
  </table>

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

Nächste Schritte​