# SQUEEZE Frontend einbetten

Wie man das Squeeze Frontend in eine andere Anwendung einbettet.

# Einbettung des Frontends

Das Frontend kann über ein HTML iframe-Element eingebettet werden. Dies erfolgt nach dem folgenden Schema:

```HTML
<iframe 
	id="Frontend"
	class="frontend-iframe"
	allow="clipboard-read; clipboard-write"
	style="width:100%; height: 100%"
	src="http://<SQZ URL>/ui/index.html?apiKey=<APIKEY>&lang=<LANGUAGE>&page=/app/squeeze/<PAGE>&parameter=<PARAMETER>"
></iframe>
```

<table border="1" id="bkmrk-squeeze-url-die-url-" style="border-collapse: collapse; width: 100%; height: 145px;"><tbody><tr style="height: 29px;"><td style="width: 14.6913%; height: 29px;">**Squeeze URL**</td><td style="width: 85.3087%; height: 29px;">Die URL zur Squeeze Installation</td></tr><tr style="height: 29px;"><td style="width: 14.6913%; height: 29px;">**API-Key**</td><td style="width: 85.3087%; height: 29px;">Kann aus dem Frontend abgerufen werden (unter *'Meine API Keys'* in den Benutzereinstellungen)</td></tr><tr style="height: 29px;"><td style="width: 14.6913%; height: 29px;">**Language**</td><td style="width: 85.3087%; height: 29px;">Wenn erforderlich, kann über den Parameter `'lang'` eine Sprache angegeben werden.

`<span style="background-color: #f5f5f5; font-family: 'Lucida Console', 'DejaVu Sans Mono', 'Ubuntu Mono', Monaco, monospace; font-size: 12px;">Mögliche Werte: "de", "en", "pl", "it", "nl", "dk", "fr", "es", "us", "ch"</span>`

Die jeweilige Sprache muss im Frontend aktiviert sein, außer `<span style="background-color: #f5f5f5; font-family: 'Lucida Console', 'DejaVu Sans Mono', 'Ubuntu Mono', Monaco, monospace; font-size: 12px;">"de"</span>` und `<span style="background-color: #f5f5f5; font-family: 'Lucida Console', 'DejaVu Sans Mono', 'Ubuntu Mono', Monaco, monospace; font-size: 12px;">"en"</span>`, da diese zum Standard gehören.

</td></tr><tr style="height: 29px;"><td style="width: 14.6913%; height: 29px;">**Page**</td><td style="width: 85.3087%; height: 29px;">Die Angabe der jeweiligen Seite erfolgt über den URL-Pfad wie im Frontend. Als Basis muss immer `/app` angeben werden.

Beispiel: `/app/squeeze/embeddableReports`

</td></tr><tr style="height: 29px;"><td style="width: 14.6913%; height: 29px;">**Parameter**</td><td style="width: 85.3087%; height: 29px;">(Optionale) seitenabhängige Parameter.

Folgende Parameter stehen aktuell zur Auswahl für folgende URL-Pfade:

<table border="1" style="border-collapse: collapse; width: 100%; height: 87px;"><tbody><tr style="height: 29px;"><td style="width: 50%; height: 29px;">**Page**</td><td style="width: 50%; height: 29px;">**Parameter**</td></tr><tr style="height: 29px;"><td style="width: 50%; height: 29px;">`/app/squeeze/embeddableReports`</td><td style="width: 50%; height: 29px;">- showReportAutovalidation 
    - Anzeige des Autovalidation-Reports
- showReportFieldSelectionQuality 
    - Anzeige des Felderauslesequalität-Reports
    - Das Feature Flag `reportValidatedDocuments` muss aktiviert sein.

</td></tr><tr><td style="width: 50%;">`/app/squeeze/reports`</td><td style="width: 50%;">-</td></tr></tbody></table>

</td></tr></tbody></table>

<p class="callout info">**Demo Integration für das Squeeze Frontend (V2)**  
  
Dies kann auch getestet werden mittels der Datei im Squeeze Frontend Git-Projekt.   
Der Pfad zu der Datei: `/public/integration/index.html`</p>