{"_id":"@accountdesk/widget","_rev":"2-be11ba83dbd7f73ad02d57fe6e55ec18","name":"@accountdesk/widget","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@accountdesk/widget","version":"1.0.0","keywords":["accountdesk","support","widget","kontaktformular","web-component","helpdesk","ticket"],"license":"MIT","_id":"@accountdesk/widget@1.0.0","maintainers":[{"name":"mathe42","email":"npm@skrueger.dev"}],"homepage":"https://github.com/accountdesk/widget#readme","bugs":{"url":"https://github.com/accountdesk/widget/issues"},"dist":{"shasum":"4ad0786d79b22d3c050656bada80ee130a62223c","tarball":"https://registry.npmjs.org/@accountdesk/widget/-/widget-1.0.0.tgz","fileCount":7,"integrity":"sha512-WAtvEtb59nCvUl11WmI0ioLTg0TLkVpUE4XKByF0HqLjw3ggc+AjGRdx+lh8qXUx5Fy8qxhPGSZqu8+EPIqDuA==","signatures":[{"sig":"MEYCIQCrte4MgB2xCAsFlXVlZyuJkn3ZF3p0bQ3rW1lWXgEDvgIhAMC/JL55Ik50bA6VRL3jdaSxSVHG2AVm+r82FwmFeyc6","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":81708},"main":"dist/accountdesk-widget.js","type":"module","scripts":{"dev":"vite","build":"tsc && vite build","preview":"vite preview","build:nuxt":"node scripts/build-nuxt.mjs","prepublishOnly":"npm run build"},"_npmUser":{"name":"mathe42","email":"npm@skrueger.dev"},"repository":{"url":"git+https://github.com/accountdesk/widget.git","type":"git"},"_npmVersion":"11.6.2","description":"Support-Widget von accountdesk: Kontaktformular als dependency-freie Web Component (Shadow DOM) — Tickets, Anhänge, Bildschirmfoto-Aufnahme, Wiki-Artikelvorschläge.","directories":{},"_nodeVersion":"24.13.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.0","typescript":"^5.7.0"},"_npmOperationalInternal":{"tmp":"tmp/widget_1.0.0_1783540460980_0.13631532477644126","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@accountdesk/widget","version":"1.1.0","description":"Support-Widget von accountdesk: Kontaktformular als dependency-freie Web Component (Shadow DOM) — Tickets, Anhänge, Bildschirmfoto-Aufnahme, Wiki-Artikelvorschläge.","license":"MIT","repository":{"type":"git","url":"git+https://github.com/accountdesk/widget.git"},"homepage":"https://github.com/accountdesk/widget#readme","keywords":["accountdesk","support","widget","kontaktformular","web-component","helpdesk","ticket"],"type":"module","main":"dist/accountdesk-widget.js","scripts":{"dev":"vite","build":"tsc && vite build","build:nuxt":"node scripts/build-nuxt.mjs","preview":"vite preview","prepublishOnly":"npm run build"},"devDependencies":{"typescript":"^5.7.0","vite":"^6.0.0"},"_id":"@accountdesk/widget@1.1.0","bugs":{"url":"https://github.com/accountdesk/widget/issues"},"_nodeVersion":"24.13.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-Wua9gdH8sojrqgRKoZbsjkQB3dhGyZZYFGz6vD2VcDFmUYlBbUi8Q7tmkexpwXYrFvwdLi1ZT+QZlqMTVsU/0w==","shasum":"e6e4dd87ce0a7da5386dac53bc4caaea7ecab732","tarball":"https://registry.npmjs.org/@accountdesk/widget/-/widget-1.1.0.tgz","fileCount":7,"unpackedSize":82956,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHtKAagKztwhF0u/O9UvrpaSLjqsN7MCYT7buhGg6z1DAiB+b2D+BENYIj+JVTd8VG65p4sYWmHFkqkIimy8nfTFJg=="}]},"_npmUser":{"name":"mathe42","email":"npm@skrueger.dev"},"directories":{},"maintainers":[{"name":"mathe42","email":"npm@skrueger.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/widget_1.1.0_1783586952893_0.6060418665013967"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-08T19:54:20.782Z","modified":"2026-07-09T08:49:13.169Z","1.0.0":"2026-07-08T19:54:21.117Z","1.1.0":"2026-07-09T08:49:13.034Z"},"bugs":{"url":"https://github.com/accountdesk/widget/issues"},"license":"MIT","homepage":"https://github.com/accountdesk/widget#readme","keywords":["accountdesk","support","widget","kontaktformular","web-component","helpdesk","ticket"],"repository":{"type":"git","url":"git+https://github.com/accountdesk/widget.git"},"description":"Support-Widget von accountdesk: Kontaktformular als dependency-freie Web Component (Shadow DOM) — Tickets, Anhänge, Bildschirmfoto-Aufnahme, Wiki-Artikelvorschläge.","maintainers":[{"name":"mathe42","email":"npm@skrueger.dev"}],"readme":"# accountdesk Support-Widget\n\nEin schlankes Kontaktformular-Widget für die eigene Website: Besucher:innen\nfüllen es aus, und in [accountdesk](https://www.accountdesk.de) entsteht daraus\nautomatisch ein Ticket — inklusive Anhängen und optionalem Bildschirmfoto.\n\n- **Eine Datei, keine Abhängigkeiten** — Web Component (`<accountdesk-widget>`)\n  als selbstständiges IIFE-Bundle (~9 kB gzipped), Styles isoliert im Shadow DOM\n- **Drei Modi**: schwebender Button (`floating`), fest eingebettet (`inline`),\n  per JavaScript geöffnetes Overlay (`modal`)\n- **Datei-Anhänge & Bildschirmfoto**: Drag & Drop-Upload und optional ein\n  „Bildschirmfoto aufnehmen\"-Knopf über die Screen-Capture-API des Browsers\n- **Artikel-Vorschläge**: schlägt beim Tippen passende Artikel aus dem\n  öffentlichen Wiki des Workspace vor\n- **Anpassbar**: Farben, Texte, Position, Sprache (de/en, auto), Vorbefüllung,\n  Custom Fields\n\n## Schnellstart\n\nWidget-Token in accountdesk erstellen (Einstellungen → API-Tokens → Typ\n„Widget\", erlaubte Domains eintragen), dann:\n\n```html\n<script src=\"https://my.accountdesk.de/widget/accountdesk-widget.js\" defer></script>\n\n<accountdesk-widget token=\"euer-widget-token\"></accountdesk-widget>\n```\n\n## Installation über npm / CDN\n\nDas Widget ist als [`@accountdesk/widget`](https://www.npmjs.com/package/@accountdesk/widget)\nauf npm veröffentlicht.\n\n**Als Script von einem npm-CDN** (versioniert, ohne eigenen Build):\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@accountdesk/widget@1/dist/accountdesk-widget.js\" defer></script>\n```\n\n**In eigener Build-Pipeline** (registriert das Custom Element als Side-Effect):\n\n```bash\nnpm install @accountdesk/widget\n```\n\n```js\nimport \"@accountdesk/widget\"\n```\n\n## Selbst hosten — ausdrücklich erlaubt und empfohlen\n\nIhr müsst das Script nicht von `my.accountdesk.de` laden. Baut es selbst (siehe\nunten), installiert es über npm oder kopiert die ausgelieferte Datei und legt\nsie zu euren eigenen Assets. Vorteile: keine Third-Party-Anfrage beim\nSeitenaufruf, volle Kontrolle über Caching und Versionierung, CSP ohne\nFremd-Host.\n\nGenauso ausdrücklich erlaubt: **den Code beliebig an eure Bedürfnisse\nanpassen** — eigenes Design-System, zusätzliche Felder, andere Validierung\n(MIT-Lizenz, auch kommerziell, ohne Rückfrage). Tickets erstellt eure\nangepasste Version weiterhin über den dokumentierten Endpoint\n(`POST /v1/widget/ticket` mit eurem Widget-Token als Bearer); die\nDomain-Whitelist des Tokens gilt unverändert.\n\n## Attribut-Referenz\n\n| Attribut | Standard | Wirkung |\n|---|---|---|\n| `token` | — | **Pflicht.** Widget-Token (JWT) |\n| `api-url` | `https://my.accountdesk.de/api` | API-Basis-URL |\n| `mode` | `floating` | `floating`, `inline` oder `modal` (per `open()`/`close()`) |\n| `position` | `bottom-right` | `bottom-right` oder `bottom-left` (nur `floating`) |\n| `offset-x` / `offset-y` | `20px` | Abstand des Buttons vom Seitenrand |\n| `primary-color` | `#1976D2` | Akzentfarbe |\n| `primary-color-hover` | wie primary | Hover-Farbe |\n| `button-text` / `title` | „Support\" / „Kontaktieren Sie uns\" | Beschriftungen |\n| `language` | _(leer = automatisch)_ | `de` oder `en`. Ohne Angabe wird die Browsersprache (`navigator.language`) genutzt, mit Fallback auf Deutsch |\n| `show-subject` | `true` | Betreff-Feld anzeigen |\n| `show-attachments` | `true` | Datei-Upload anzeigen |\n| `screenshot` | `false` | „Bildschirmfoto aufnehmen\"-Knopf (nur auf Browsern mit Screen-Capture-API; auf Mobilgeräten automatisch ausgeblendet) |\n| `show-email` / `show-name` | `true` | Felder ausblenden (nur sinnvoll mit `prefill-*`) |\n| `show-header` | `true` | Formular-Kopfzeile anzeigen |\n| `suggest-articles` | `false` | Wiki-Artikelvorschläge beim Tippen |\n| `prefill-email` / `prefill-name` | — | Felder vorbefüllen |\n| `external-customer-nr` | — | Ticket einer externen Kundennummer zuordnen |\n| `custom-fields` | — | JSON-Objekt mit Custom-Field-Werten |\n| `max-files` / `max-file-size` | `5` / `10` (MB) | Anhang-Limits |\n| `allowed-file-types` | `.pdf,.jpg,.jpeg,.png,.gif,.doc,.docx,.txt,.zip` | Erlaubte Datei-Endungen |\n| `z-index` | `9999` | Stapelreihenfolge |\n\n### JavaScript-API\n\n```js\ndocument.querySelector(\"accountdesk-widget\").open()  // Formular öffnen (v.a. mode=\"modal\")\ndocument.querySelector(\"accountdesk-widget\").close() // wieder schließen\n```\n\n## Entwicklung\n\n```bash\nnpm install\nnpm run dev      # Demo-Seite mit Live-Vorschau auf http://localhost:5180\nnpm run build    # tsc + Vite → dist/accountdesk-widget.js\n```\n\n`npm run build:nuxt` ist ein interner Build-Schritt des accountdesk-Monorepos\n(schreibt in ein Nachbarverzeichnis) und für externe Nutzung nicht relevant.\n\n## Lizenz\n\n[MIT](LICENSE) — Verbesserungen, die für alle nützlich sind, nehmen wir gern\nals Pull Request entgegen; Fehlerberichte jederzeit als Issue.\n","readmeFilename":"README.md"}