myContactCenterHandbuch

WebCallback in eine Website einbinden

Einen telefonischen Rückruf über ein Website-Formular anfordern und die Grenzen der Annahmebestätigung berücksichtigen.

Bereiten Sie zuerst die Verbindung und Rückrufverteilung vor. Der Rückruf wird in myContactCenter verarbeitet; die Website muss für das spätere Telefonat nicht als Chat geöffnet bleiben.

Dieses Grundbeispiel fordert einen Rückruf zum aktuellen Serverzeitpunkt an. Es setzt einen lokal bereitgestellten ASP.NET-Core-SignalR-Client voraus. Ersetzen Sie die Hub-Adresse, das Wissensgebiet und die Sprache.

<form id="callbackForm">
    <label>Name <input id="callbackName" maxlength="120" required></label>
    <label>Telefonnummer <input id="callbackNumber" type="tel" required></label>
    <label><input id="recordingPermission" type="checkbox">
        Aufzeichnung des Rückrufs erlauben</label>
    <button id="requestCallback" type="submit">Rückruf anfordern</button>
</form>
<p id="callbackStatus" role="status"></p>
<script src="/js/signalr.min.js"></script>
<script type="module">
const form = document.getElementById("callbackForm");
const button = document.getElementById("requestCallback");
const status = document.getElementById("callbackStatus");
const callback = new signalR.HubConnectionBuilder()
    .withUrl("https://kontakt.example.org/callbackHub")
    .build();
callback.on("OnStateChangedAsync", (oldState, newState) => {
    console.log("Rückrufanforderung", oldState, newState);
});
callback.on("OnPositionChangedAsync", (position) => {
    console.log("Mitgeteilte Position", position);
});
form.addEventListener("submit", async (event) => {
    event.preventDefault();
    if (button.disabled || !form.reportValidity()) return;
    button.disabled = true;
    let connected = false;
    try {
        await callback.start();
        connected = true;
        const accepted = await callback.invoke("RegisterAsync",
            document.getElementById("callbackNumber").value.trim(),
            document.getElementById("callbackName").value.trim(),
            "Support", "de-DE",
            document.getElementById("recordingPermission").checked,
            null);
        status.textContent = accepted
            ? "Rückrufanforderung übermittelt. Die Verarbeitung erfolgt im Contact Center."
            : "Der Dienst hat die Anforderung nicht bestätigt. Bitte kontaktieren Sie uns.";
    } catch (error) {
        status.textContent = connected
            ? "Die Übermittlung konnte nicht bestätigt werden. Bitte kontaktieren Sie uns, bevor Sie erneut anfordern."
            : "Keine Verbindung zum Rückrufdienst. Bitte versuchen Sie es später erneut.";
        if (!connected) button.disabled = false;
    }
});
</script>

Das Formular verhindert wiederholtes Senden nach einer Übermittlung. Bei einem Verbindungsabbruch während des Aufrufs ist unklar, ob die Anforderung bereits verarbeitet wurde. Wiederholen Sie sie deshalb nicht automatisch.

Einen Zeitpunkt anbieten

Für einen späteren Rückruf ersetzen Sie das letzte Argument null durch einen geprüften ISO-Zeitwert, beispielsweise 2026-10-15T14:30:00+02:00. Legen Sie in der Website eindeutig fest, in welcher Zeitzone der Kunde den Termin wählt. Eine Eingabe vom Typ datetime-local enthält selbst keinen Zeitzonenoffset. Prüfen Sie das Datum, bevor Sie es konvertieren und senden.

Beachten Sie die callbackHub-Referenz: Die Hub-Antwort ist keine Bestätigung eines ausgeführten Rückrufs. Prüfen Sie vor der Freigabe der Website, dass die Anforderung im Contact Center tatsächlich ankommt.

Produktinformationen: Chat und WebCallback

    ↑ ↓ auswählen · Eingabe öffnen · Esc schließen