Filarr Drop · Desarrolladores

Integrar Filarr Drop en su sitio web.

Un script y un elemento HTML. El formulario se muestra en un marco servido por drop.filarr.eu; su página no ve pasar ni archivos ni respuestas.

← Filarr Drop

El código mínimo

La aplicación lo genera por usted, con el identificador y la clave correctos (Collection › Website forms › Embed). El enlace interior se muestra si JavaScript está desactivado.

<script src="https://drop.filarr.eu/v1/drop.js" defer></script>
<filarr-drop form="frm_8KQ2M7WZ4D1X" pk="<clave pública>" lang="es">
  <a href="https://drop.filarr.eu/f/frm_8KQ2M7WZ4D1X#pk=<clave pública>">Enviar documentos</a>
</filarr-drop>

La clave, la referencia, el idioma, el tema y el origen de su página llegan al marco en el fragmento de su dirección (tras #): nunca se envían a un servidor.

Atributos

Atributos del elemento filarr-drop
atributoregla
formObligatorio. El identificador del formulario, frm_ seguido de 12 caracteres.
pkObligatorio. La clave pública del formulario. Sin ella, el elemento solo muestra su enlace interior. El marco solo cifra con esta clave: si el servidor da otra, se niega a mostrarse.
langOpcional. fr, en, de, es o it. Por defecto, el idioma elegido en el editor.
modeOpcional. inline (por defecto) muestra el formulario; button muestra un botón que carga el formulario al hacer clic.
themeOpcional. light, dark o auto.
referenceOpcional, 200 caracteres como máximo. Una referencia de expediente, añadida al envío y cifrada con él.

Los atributos se leen cuando el elemento entra en la página, y solo entonces. Para cambiar de formulario, de clave o de referencia, sustituya el elemento.

Eventos

El marco habla a su página, nunca al revés. drop.js transmite sus mensajes como eventos DOM en el elemento. Suben por la página: un oyente en un elemento padre también los recibe.

Eventos emitidos por el elemento filarr-drop
eventodetail
filarr:ready{}El formulario se muestra.
filarr:submitted{ receipt, files }Un envío ha terminado. receipt es el código de recibo de 12 caracteres, sin guiones: muéstrelo con el formato XXXX-XXXX-XXXX, como el marco. files es el número de archivos enviados.
filarr:error{ code }Un envío ha fallado. code es un código corto, por ejemplo form_paused, rate o too_large.
document.addEventListener('filarr:submitted', (event) => {
  const { receipt, files } = event.detail;
  const code = receipt.replace(/(.{4})(?=.)/g, '$1-'); // XXXX-XXXX-XXXX
  console.log(code, files);
});

Nunca un nombre de archivo, una respuesta ni una referencia en un evento.

Los eventos solo se emiten hacia una página cuyo origen figura en los sitios autorizados del formulario.

Sitios autorizados

En el editor del formulario, enumere los orígenes donde puede mostrarse. El marco solo se muestra allí; en cualquier otro sitio, el navegador lo bloquea. Un cambio surte efecto en un minuto como máximo.

  • https://host, o https://host:puerto, exactamente: sin comodín, sin ruta.
  • Para probar en su equipo: http://localhost:puerto o http://127.0.0.1:puerto, con el puerto.
  • Una lista vacía: el formulario no se muestra en ningún sitio. Su página en drop.filarr.eu sigue abierta.

Política de seguridad de contenido

Si su sitio tiene una CSP, añada drop.filarr.eu a estas dos directivas. drop.js no hace ninguna otra petición que el marco y no pone ninguna cookie.

script-src … https://drop.filarr.eu;
frame-src … https://drop.filarr.eu;

Versión fija

/v1/drop.js sigue las correcciones de la v1. Para un código que no cambie nunca, cargue la versión fija con su huella de integridad:

<script src="https://drop.filarr.eu/v1.0.0/drop.js" integrity="sha384-iVPTsGWrlmwF1PZCIEmxKnyKWcVQIZnXG5VnZHWaFx8geCP7G0RbQoy/gguyTibX" crossorigin="anonymous" defer></script>

React

Cargue el script una sola vez. Dé al elemento una key que cambie con el formulario, la clave o la referencia: React lo sustituye, y el nuevo elemento vuelve a leer sus atributos.

import { useEffect, useRef } from 'react';

const LOADER = 'https://drop.filarr.eu/v1/drop.js';

function loadDropOnce() {
  if (document.querySelector(`script[src="${LOADER}"]`)) return;
  const script = document.createElement('script');
  script.src = LOADER;
  script.defer = true;
  document.head.appendChild(script);
}

export function FilarrDrop({ form, pk, reference, onSubmitted }) {
  const ref = useRef(null);
  useEffect(loadDropOnce, []);
  useEffect(() => {
    const el = ref.current;
    if (!el || !onSubmitted) return;
    const handle = (event) => onSubmitted(event.detail);
    el.addEventListener('filarr:submitted', handle);
    return () => el.removeEventListener('filarr:submitted', handle);
  }, [form, pk, reference, onSubmitted]);
  return (
    <filarr-drop
      key={`${form}:${pk}:${reference ?? ''}`}
      ref={ref}
      form={form}
      pk={pk}
      reference={reference}
    >
      <a href={`https://drop.filarr.eu/f/${form}#pk=${pk}`}>Enviar documentos</a>
    </filarr-drop>
  );
}

Next.js

El componente toca el DOM: es un componente de cliente. next/script carga drop.js una sola vez, aunque el componente aparezca en varias páginas.

'use client';

import Script from 'next/script';

export function FilarrDrop({ form, pk }) {
  return (
    <>
      <Script src="https://drop.filarr.eu/v1/drop.js" strategy="afterInteractive" />
      <filarr-drop key={`${form}:${pk}`} form={form} pk={pk}>
        <a href={`https://drop.filarr.eu/f/${form}#pk=${pk}`}>Enviar documentos</a>
      </filarr-drop>
    </>
  );
}

WordPress

Hay una extensión de WordPress en preparación. Mientras tanto, pegue el código mínimo en un bloque «HTML personalizado».

¿Y en el lado del servidor?

En esta versión no hay API ni webhook: los envíos llegan, cifrados, al Filarr de quien creó el formulario.