📅

Einbindung Terminvereinbarung

Anwender

Administratoren

📬Einrichtung BundID 👫CSV-Mitarbeiter-Import 🔌Anbindung Active Directory 🗄️Anbindung d.velop documents 📅Anbindung Exchange Server 🎟️Einrichtung Besucherverwaltung 📝Anbindung Formularserver

Dienstleister

🔍Such- und GraphQL-API 📅Einbindung Terminvereinbarung

Partner

📂Anbindung DMS 📝Anbindung Formularserver 🔑OAuth2.0

Einbindung Terminvereinbarung

Die Terminvereinbarung kann als eigenes Modul über JavaScript eingebunden werden. Dies ist dann sinnvoll wenn nur die Terminvereinbarung und nicht der gesamte Bürgerservice, oder die Terminvereinbarung separat an zusätzlichen Stellen eingebunden werden soll.

Die Integration erfolgt über ein JavaScript-Module. Über die Konfiguration kann gesteuert werden, welcher Modus aufgerufen und dargestellt werden soll.

Implementation

Der folgende Code, definiert einen Container, lädt den Style und das JavaScript-Module und bindet die Terminvereinbarung in dem Standarddesign an.

Der Host muss in dem Style-Tag, des Import-Aufruf und der Konfiguration von beispiel.optigov.app auf den korrekten Host der Kommune geändert werden.

Alle Dienstleistungen

<!-- Container -->
<div id="optigov-app"></div>

<!-- Base-Style -->
<link rel="stylesheet" href="https://beispiel.optigov.app/widget/style.css">

<!-- Einbindung Terminvereinbarung -->
<script type="module">
    import * as optiGov from "https://beispiel.optigov.app/widget/optiGov.mjs"

		// get parameter `dienstleistungId` if available
    const currentUrl = new URL(window.location);
    let dienstleistungId = currentUrl.searchParams.get("dienstleistungId");

    // check if dienstleistungId is numeric
    if(dienstleistungId && !isNaN(dienstleistungId)) {
        dienstleistungId = parseInt(dienstleistungId);
    }else {
        dienstleistungId = undefined;
    }
    
    // render the widget
    optiGov.renderComponent({
        rootContainer: "#optigov-app",
        properties: {
            mode: "meet",
            id: dienstleistungId,
        },
        configuration: {
            installation: "https://beispiel.optigov.app",
            verwaltungId: 1,
            urls: {
                startseite: "/",
                dienstleistung: "/?ansicht=dienstleistung&eintrag=:id",
                einrichtung: "/?ansicht=einrichtung&eintrag=:id",
                mitarbeiter: "/?ansicht=mitarbeiter&eintrag=:id",
                themenfeld: "/?ansicht=themenfeld&eintrag=:id",
                alleDienstleistungen: "/?ansicht=alle-dienstleistungen",
                alleEinrichtungen: "/?ansicht=alle-einrichtungen",
                alleMitarbeiter: "/?ansicht=alle-mitarbeiter",
                meinKontoDetails: "/?ansicht=mein-konto-details",
                meinKontoChats: "/?ansicht=mein-konto-chats",
                meinKontoChat: "/?ansicht=mein-konto-chat&eintrag=:id",
                meinKontoAntraege: "/?ansicht=mein-konto-antraege",
                meinKontoTermine: "/?ansicht=mein-konto-termine",
                terminvereinbarung: "/?ansicht=terminvereinbarung",
                loginRedirect: "/?ansicht=login",
                antragEingereicht: "/?ansicht=antrag-eingereicht",
            },
            services: {
                meet: {
                    enabled: true,
                }
            },
        }
    })
</script>

Alle Dienstleistungen einer Einrichtung

Über die Angabe der Eigenschaft properties.einrichtungId wird mit der ID einer Einrichtung ein Filter auf die Dienstleistungen einer spezifischen Einrichtung durchgeführt.

<!-- Container -->
<div id="optigov-app"></div>

<!-- Base-Style -->
<link rel="stylesheet" href="https://beispiel.optigov.app/widget/style.css">

<!-- Einbindung Terminvereinbarung -->
<script type="module">
    import * as optiGov from "https://beispiel.optigov.app/widget/optiGov.mjs"

    // render the widget
    optiGov.renderComponent({
        rootContainer: "#optigov-app",
        properties: {
            mode: "meet",
            einrichtungId: 1, // Speizifizierung einer Einrichtung
        },
        configuration: {
            installation: "https://beispiel.optigov.app",
            verwaltungId: 1,
            urls: {
                startseite: "/",
                dienstleistung: "/?ansicht=dienstleistung&eintrag=:id",
                einrichtung: "/?ansicht=einrichtung&eintrag=:id",
                mitarbeiter: "/?ansicht=mitarbeiter&eintrag=:id",
                themenfeld: "/?ansicht=themenfeld&eintrag=:id",
                alleDienstleistungen: "/?ansicht=alle-dienstleistungen",
                alleEinrichtungen: "/?ansicht=alle-einrichtungen",
                alleMitarbeiter: "/?ansicht=alle-mitarbeiter",
                meinKontoDetails: "/?ansicht=mein-konto-details",
                meinKontoChats: "/?ansicht=mein-konto-chats",
                meinKontoChat: "/?ansicht=mein-konto-chat&eintrag=:id",
                meinKontoAntraege: "/?ansicht=mein-konto-antraege",
                meinKontoTermine: "/?ansicht=mein-konto-termine",
                terminvereinbarung: "/?ansicht=terminvereinbarung",
                loginRedirect: "/?ansicht=login",
                antragEingereicht: "/?ansicht=antrag-eingereicht",
            },
            services: {
                meet: {
                    enabled: true,
                }
            },
        }
    })
</script>

Style-Anpassungen

Wird das JavaScript direkt eingebunden und nicht das Webseiten-Widget genutzt, sollte über eine kleine Style-Anpassung über folgende CSS-Variablen erfolgen, um das Design an das CD der Kommune anzupassen. Alle Variablen besitzen Standardwerte. Mindestens sollte die Variable --color-accent und --border-radius hinterlegt werden

:root {        
	--color-border: #ececec;        
	--color-accent: #506DE2;        
	--color-link-active: #ff8a58;        
	--color-background-secondary: #ececec;        
	--color-text-on-accent: #ffffff;        
	--color-icon-background: #ececec;        
	--border-radius: 6px;    
}