Support-Widget · Playground
Konfiguration links anpassen → das Widget rechts unten aktualisiert sich live. Code unten kopieren und einbetten.
Konfiguration links anpassen → das Widget rechts unten aktualisiert sich live. Code unten kopieren und einbetten.
Benannte Ankerpunkte wie am dm-toaster, um die vier Seitenmitten erweitert. Der
Abstand geht als --dm-support-launcher-offset ins CSS – eine Seitenmitte bleibt
beim Resize mittig.
Grösse 40px = featured-size-md der Library, das Icon folgt mit 60 % (24px).
Unter 40px wächst die Trefferfläche auf Touch-Geräten über den sichtbaren Kreis hinaus.
Gehen als --dm-support-launcher-radius bzw.
--dm-support-launcher-border-width/-color an das Dokument – also genau der Weg,
den eine Host-App auch hätte.
Unveränderte Markup-Strings aus
@digitale-menschen/component-library/untitled-icons. Bewusst **freie Glyphen**:
ein Icon mit eigenem Kreis um das Motiv konkurriert mit dem runden Launcher – vergleiche
HelpCircle. Untitled UI hat kein freistehendes Fragezeichen; die Option dafür
ist der Glyph aus HelpCircle ohne dessen Kreis, mit engerem viewBox.
Defaults entsprechen den Grenzen des Backends (10 Dateien à 10 MB).
Bei offenem Host-Modal ist der Launcher inert – dann ist das Kürzel der einzige Einstieg. Zum Ausprobieren unten „Host-Modal öffnen“.
Bei offenem Modal parkt sich das Widget im Dialog und bleibt anklickbar – das Panel bleibt nicht-modal, die Host-App also bedienbar.
Der typische Fall gegen „immer unten rechts“: fährt ein Drawer von rechts herein, liegt der
Launcher über dem Inhalt. Der Knopf ruft setPosition() – ohne Neuaufbau, ein
halb getippter Bericht bleibt also stehen. Zum Ausprobieren erst etwas ins Panel tippen.
Danach kommt das leere Formular zurück, damit ein offen gelassenes Panel beim nächsten Anliegen nicht noch das alte Ticket zeigt.
Passe in der ersten Zeile des Loaders ggf. die URL zu support-widget.js an deinen
Hosting-Ort an. Das Widget rechts ist eine echte Live-Vorschau – klicke den Button, um das Panel zu öffnen.