Skip to main content

Botón "Enviar a Inciflex"

Si tu sistema de gestión es un sistema cerrado (software propietario, aplicación web interna, portal) y no puedes exportar archivos o integrar APIs fácilmente, puedes usar el botón "Enviar a Inciflex".

Es un componente web listo para usar que:

  • Muestra un botón en tu sistema de gestión
  • Al pulsarlo, envía los datos del pedido a DARC Bridge
  • Muestra el resultado al usuario

Se puede incrustar en cualquier página web mediante iframe o web component.

Web Component​

El método recomendado. Añade el script y usa la etiqueta HTML <inciflex-order-button>.

1. Incluir el script​

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

### 2. Insertar el botón

```html
<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>

El componente renderiza un botón "Enviar a Inciflex". Al pulsarlo, realiza la llamada a la API y muestra el resultado directamente en la interfaz.

3. Atributos disponibles​

AtributoObligatorioDescripción
api-key✅Tu API Key de Inciflex
codice-cliente✅Tu código de cliente
riferimento-ordine✅Número de pedido en tu sistema
data-ordine✅Fecha del pedido (YYYY-MM-DD)
data-consegnaFecha de entrega solicitada (YYYY-MM-DD)
noteObservaciones del pedido
righe✅Array JSON con las líneas del pedido
labelTexto del botón (por defecto: "Enviar a Inciflex")
langIdioma de la interfaz: it, en, fr, de, es (por defecto: it)

4. Rellenar datos dinámicamente​

En un sistema real, los datos del pedido no son estáticos. Puedes establecerlos mediante JavaScript:

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

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

  // Rellena con los datos del pedido del sistema
  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. Eventos​

El componente emite eventos que puedes escuchar:

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

btn.addEventListener('ordine-inviato', (e) => {
  console.log('Pedido registrado:', e.detail.id_ordine);
  // p. ej. actualizar el estado en tu sistema
});

btn.addEventListener('ordine-errore', (e) => {
  console.error('Error:', e.detail.errori);
  // p. ej. mostrar un mensaje al usuario
});

Iframe​

Si no puedes insertar scripts externos (políticas de seguridad, CSP restrictivas), puedes usar un iframe.

<iframe
  src="https://api.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>

El iframe muestra el botón y gestiona todo internamente, incluida la confirmación al usuario.

Parámetros en la URL

Los parámetros son los mismos que en el web component, pasados como query string. El parámetro righe debe estar URL-encoded.

Comunicación iframe ↔ página padre​

Si quieres recibir el resultado en tu página, puedes escuchar postMessage:

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

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

¿Qué ocurre al pulsar el botón?​

Sea cual sea el método (web component o iframe), al pulsar el botón:

  1. Recoge los parámetros del pedido
  2. Realiza un POST a https://api.bridge.inciflex.it/api/v1/ordini
  3. Muestra el resultado al usuario (éxito o error)

Es la misma API REST descrita en Métodos de envío, pero envuelta en un componente listo para usar.

Ejemplo completo​

Ejemplo de una página con detalle de pedido y envío con un solo clic:

<!DOCTYPE html>
<html>
<head>
  <title>Detalle de pedido - Ejemplo</title>
  <script src="https://api.bridge.inciflex.it/widget/inciflex-order-button.js"></script>
</head>
<body>
  <h1>Pedido #ORD-2025-001234</h1>
  <table>
    <tr><td>Artículo</td><td>Cantidad</td></tr>
    <tr><td>ART-500 - Brida DN50</td><td>100 PZ</td></tr>
    <tr><td>ART-601 - Junta 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('Pedido enviado! ID: ' + e.detail.id_ordine);
      });
  </script>
</body>
</html>

Próximos pasos​