Filarr Drop · Entwickler

Filarr Drop in Ihre Website einbinden.

Ein Skript und ein HTML-Element. Das Formular erscheint in einem Rahmen, den drop.filarr.eu ausliefert; Ihre Seite sieht weder Dateien noch Antworten.

← Filarr Drop

Das minimale Snippet

Die App erstellt es für Sie, mit der richtigen Formular-ID und dem richtigen Schlüssel (Collection › Website forms › Embed). Der innere Link erscheint, wenn JavaScript ausgeschaltet ist.

<script src="https://drop.filarr.eu/v1/drop.js" defer></script>
<filarr-drop form="frm_8KQ2M7WZ4D1X" pk="<öffentlicher Schlüssel>" lang="de">
  <a href="https://drop.filarr.eu/f/frm_8KQ2M7WZ4D1X#pk=<öffentlicher Schlüssel>">Dokumente senden</a>
</filarr-drop>

Schlüssel, Aktenzeichen, Sprache, Thema und die Herkunft Ihrer Seite erreichen den Rahmen im Fragment seiner Adresse (nach #): Sie werden nie an einen Server gesendet.

Attribute

Attribute des Elements filarr-drop
Attribut	Regel
`form`	Pflicht. Die Formular-ID, frm_ gefolgt von 12 Zeichen.
`pk`	Pflicht. Der öffentliche Schlüssel des Formulars. Ohne ihn zeigt das Element nur seinen inneren Link. Der Rahmen verschlüsselt nur mit diesem Schlüssel: Liefert der Server einen anderen, wird er nicht angezeigt.
`lang`	Optional. fr, en, de, es oder it. Standard ist die im Editor gewählte Sprache.
`mode`	Optional. inline (Standard) zeigt das Formular; button zeigt eine Schaltfläche, die das Formular beim Klick lädt.
`theme`	Optional. light, dark oder auto.
`reference`	Optional, höchstens 200 Zeichen. Ein Aktenzeichen, das der Einsendung beigefügt und mit ihr verschlüsselt wird.

Die Attribute werden gelesen, wenn das Element in die Seite kommt, und nur dann. Um Formular, Schlüssel oder Aktenzeichen zu wechseln, ersetzen Sie das Element.

Ereignisse

Der Rahmen spricht zu Ihrer Seite, nie umgekehrt. drop.js gibt seine Nachrichten als DOM-Ereignisse am Element weiter. Sie steigen in der Seite auf: Ein Listener an einem übergeordneten Element empfängt sie auch.

Ereignisse des Elements filarr-drop
Ereignis	detail
`filarr:ready`	`{}`	Das Formular wird angezeigt.
`filarr:submitted`	`{ receipt, files }`	Eine Einsendung ist abgeschlossen. receipt ist der zwölfstellige Empfangscode ohne Bindestriche: Zeigen Sie ihn als XXXX-XXXX-XXXX an, wie der Rahmen. files ist die Anzahl der gesendeten Dateien.
`filarr:error`	`{ code }`	Eine Einsendung ist fehlgeschlagen. code ist ein kurzer Code, zum Beispiel form_paused, rate oder 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);
});

Nie ein Dateiname, eine Antwort oder ein Aktenzeichen in einem Ereignis.

Ereignisse gehen nur an eine Seite, deren Herkunft unter den zugelassenen Websites des Formulars steht.

Zugelassene Websites

Listen Sie im Editor des Formulars die Herkünfte auf, auf denen es erscheinen darf. Der Rahmen erscheint nur dort; überall sonst blockiert ihn der Browser. Eine Änderung wirkt spätestens nach einer Minute.

https://host oder https://host:port, genau so: kein Platzhalter, kein Pfad.
Zum Ausprobieren auf Ihrem Rechner: http://localhost:port oder http://127.0.0.1:port, mit Port.
Eine leere Liste: Das Formular erscheint auf keiner Website. Seine Seite auf drop.filarr.eu bleibt offen.

Content Security Policy

Hat Ihre Website eine CSP, fügen Sie drop.filarr.eu diesen beiden Direktiven hinzu. drop.js stellt außer dem Rahmen keine Anfrage und setzt kein Cookie.

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

Feste Version

/v1/drop.js folgt den Korrekturen der v1. Für Code, der sich nie ändert, laden Sie die feste Version mit ihrem Integritäts-Hash:

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

React

Laden Sie das Skript nur einmal. Geben Sie dem Element einen key, der sich mit Formular, Schlüssel oder Aktenzeichen ändert: React ersetzt es, und das neue Element liest seine Attribute erneut.

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}`}>Dokumente senden</a>
    </filarr-drop>
  );
}

Next.js

Die Komponente greift auf das DOM zu: Sie ist eine Client-Komponente. next/script lädt drop.js nur einmal, auch wenn die Komponente auf mehreren Seiten vorkommt.

'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}`}>Dokumente senden</a>
      </filarr-drop>
    </>
  );
}

WordPress

Ein WordPress-Plugin ist in Vorbereitung. Bis dahin fügen Sie das minimale Snippet in einen Block „Individuelles HTML“ ein.

Und auf der Serverseite?

In dieser Version gibt es weder API noch Webhook: Die Einsendungen kommen verschlüsselt im Filarr dessen an, der das Formular erstellt hat.