Einbindung und Installation
Script-Code für die Installation
Dieses Script muss im HTML-Dokument inkludiert werden, im Head-Bereich. Das Script lädt die benötigten Styles und die Bakehouse-Iconfont automatisch nach. Es müssen keine zusätzlichen CSS-Dateien eingebunden werden.
HTML
<script type="module" src="https://resource.bakehouse.at/widget/pdfviewer/bh-pdf-viewer.js" async></script>
HTML-Code für Template Integration
Der Viewer wird über das Custom Element `<bh-pdf-viewer>` an genau der Stelle im Template eingebaut, an der er erscheinen soll.
HTML
<bh-pdf-viewer
pdf="https://example.com/dokument.pdf"
title="Geschäftsbericht 2025"
spread="true"
download="true"
fullscreen="true"
language="de"
></bh-pdf-viewer>
Optische Anpassung und Positionierung
Die Variablen wirken durch die Shadow-DOM-Grenze hindurch. Sie können auf dem Element selbst, auf einem beliebigen Eltern-Element oder global auf `:root` gesetzt werden — jede Instanz auf der Seite lässt sich damit auch einzeln gestalten.
Alle übrigen Farben (weißer Hintergrund, Kopfzeilen-Verlauf, Rahmen, Schatten) sind fest hinterlegt und werden nicht über Variablen gesteuert. .
HTML
bh-pdf-viewer {
--bh-pdf-accent-color: #3b82f6;
--bh-pdf-font-color: #111827;
--bh-pdf-font: "Inter", sans-serif;
--bh-pdf-border-radius: 12px;
--bh-pdf-body-background: linear-gradient(to bottom, #f8fafc, #e2e8f0);
--bh-pdf-aspect-ratio: 16 / 9;
--bh-pdf-max-height: 80vh;
}
Achtung
Branding
Der Bakehouse-Hinweis am unteren Rand des Viewers ist Bestandteil der Nutzungsbedingungen und darf nicht entfernt oder verdeckt werden.