Skip to main content

"Send to Inciflex" Button

If your management system is a closed system (proprietary software, internal web application, portal) and you can't easily export files or integrate APIs, you can use the "Send to Inciflex" button.

It's a ready-to-use web component that:

  • Displays a button in your management system
  • On click, sends the order data to DARC Bridge
  • Confirms the result to the user

It can be embedded in any web page via iframe or web component.

Web Component​

The recommended method. Add the script and use the <inciflex-order-button> HTML tag.

1. Include the script​

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

2. Insert the button​

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

The component renders a "Send to Inciflex" button. On click, it makes the API call and shows the result directly in the interface.

3. Available attributes​

AttributeRequiredDescription
api-key✅Your Inciflex API Key
codice-cliente✅Your customer code
riferimento-ordine✅Order number in your management system
data-ordine✅Order date (YYYY-MM-DD)
data-consegnaRequested delivery date (YYYY-MM-DD)
noteOrder notes
righe✅JSON array with order lines
labelButton text (default: "Send to Inciflex")
langInterface language: it, en, fr, de (default: it)

4. Populating data dynamically​

In a real management system, order data isn't static. You can set it via JavaScript:

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

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

  // Populate with current order data from your management system
  btn.setAttribute('codice-cliente', yourSystem.customerCode);
  btn.setAttribute('riferimento-ordine', yourSystem.orderNumber);
  btn.setAttribute('data-ordine', yourSystem.orderDate);
  btn.setAttribute('righe', JSON.stringify(yourSystem.orderLines));
</script>

5. Events​

The component emits events you can listen to:

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

btn.addEventListener('ordine-inviato', (e) => {
  console.log('Order registered:', e.detail.id_ordine);
  // e.g. update the status in your management system
});

btn.addEventListener('ordine-errore', (e) => {
  console.error('Error:', e.detail.errori);
  // e.g. show a message to the user
});

Iframe​

If you can't insert external scripts (security policies, restrictive CSP), you can use an iframe.

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

The iframe displays the button and handles everything internally, including user confirmation.

URL Parameters

The parameters are the same as the web component, passed as query string. The righe parameter must be URL-encoded.

Iframe ↔ parent page communication​

If you want to receive the result in your page, you can listen for postMessage messages:

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

  if (event.data.tipo === 'ordine-inviato') {
    console.log('Order registered:', event.data.id_ordine);
  }
  if (event.data.tipo === 'ordine-errore') {
    console.error('Error:', event.data.errori);
  }
});

What happens on click?​

Regardless of the method (web component or iframe), on click the button:

  1. Collects the order parameters
  2. Makes a POST call to https://bridge.inciflex.it/api/v1/ordini
  3. Shows the result to the user (success or error)

It's the same REST API described in the Sending Methods section, but wrapped in a ready-to-use component.

Complete example​

A web management system showing order details and allowing one-click submission:

<!DOCTYPE html>
<html>
<head>
  <title>Order Detail - Example System</title>
  <script src="https://bridge.inciflex.it/widget/inciflex-order-button.js"></script>
</head>
<body>
  <h1>Order #ORD-2025-001234</h1>
  <table>
    <tr><td>Article</td><td>Quantity</td></tr>
    <tr><td>ART-500 - Flange DN50</td><td>100 PZ</td></tr>
    <tr><td>ART-601 - Gasket DN50</td><td>100 PZ</td></tr>
  </table>

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

Next Steps​