Einbindung

https://bc-auskunft.de/widget.js

Für die Produktion binden Sie das Widget von dieser URL ein. Eine lokale Einbindung (z.B. ./widget.js) ist für Entwicklung möglich.

HTML-Struktur

Minimale Einbindung:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine Seite mit Auskunft Widget</title>

    <!-- Widget einbinden -->
    <script type="module" src="https://bc-auskunft.de/widget.js" defer></script>
</head>
<body>
    <!-- Widget Container -->
    <bc-auskunft></bc-auskunft>
</body>
</html>

Wichtig

Script als ES-Modul laden (type="module")
defer wird empfohlen
Mehrere Widgets auf einer Seite sind möglich

Widget-Bereitschaft

Das Widget lädt asynchron. Für setConfiguration() oder andere Methoden nutzen Sie DOMContentLoaded oder warten Sie, bis das Widget-Element im DOM ist. Dann ist das Widget bereit.

Konfiguration per HTML-Attribut

Konfiguration direkt im Element mit widget-config:

<bc-auskunft
  widget-config='{
    "ui": { "theme": "db-theme" },
    "api": {
      "locationAutocomplete": "https://sv-luebeck.bc-testsystem.de/api/v1/ext-search",
      "apiKey": "YOUR_API_KEY",
      "useMockData": false,
      "timeout": 8000
    },
    "search": {
      "baseUrl": "https://netzplan.swhl.de/initialize/journeys",
      "urlFormat": "path-segments",
      "additionalParams": {}
    }
  }'
></bc-auskunft>

API-Key

Wenn api.apiKey gesetzt ist, wird er beim Autocomplete-Request als HTTP-Header x-api-key mitgeschickt.

Konfiguration per JavaScript

Konfiguration nach dem Laden setzen:

document.addEventListener('DOMContentLoaded', function() {
  const config = {
    api: {
      locationAutocomplete: "/api/autocomplete",
      apiKey: "YOUR_API_KEY",  // Optional: wird als Header "x-api-key" gesendet
      useMockData: true,
      maxResults: 25
    },
    ui: {
      theme: "db-theme",
      language: "de"
    },
    labels: {
      startPlaceholder: "Von wo?",
      destinationPlaceholder: "Wohin?",
      showMoreResults: "Weitere Ergebnisse anzeigen"
    }
  };

  const widget = document.querySelector('bc-auskunft');
  if (widget) {
    widget.setConfiguration(config);
  }
});

Vorteil: Konfiguration aus Backend/CMS laden, Umgebungsvariablen nutzen oder dynamisch anpassen.

Einbindung

Widget-URL

HTML-Struktur

Konfiguration per HTML-Attribut

Konfiguration per JavaScript