Zum Inhalt

Live-Beispiel

Script laden und Widget einbinden — hier mit echter API (Stadtwerke Lübeck / SWHL).

API-Key

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

HTML-Struktur

<!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>
    <script type="module" src="https://bc-auskunft.de/widget.js" defer></script>
</head>
<body>
    <bc-auskunft
      widget-config='{"ui":{"theme":"db-theme"},"api":{"locationAutocomplete":"https://...","useMockData":false},"search":{"baseUrl":"https://...","urlFormat":"path-segments"}}'
    ></bc-auskunft>
</body>
</html>

Konfiguration via JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const widget = document.querySelector('bc-auskunft');
  if (widget) {
    widget.setConfiguration({
      api: { locationAutocomplete: "/api/autocomplete", useMockData: true },
      ui: { theme: "db-theme" },
      labels: {
        startPlaceholder: "Von wo?",
        destinationPlaceholder: "Wohin?"
      }
    });
  }
});

Methoden

widget.setConfiguration(config);
widget.getConfiguration();
widget.getSearchParams();
widget.clearForm();
widget.setTheme('db-theme');