Integrate WebCallback into a website

First prepare the connection and callback distribution. The callback is processed in myContactCenter; the website does not need to remain open as a chat for the later telephone call.

This basic example requests a callback at the current server time. It requires a locally hosted ASP.NET Core SignalR client. Replace the hub address, skill and language.

<form id="callbackForm">
    <label>Name <input id="callbackName" maxlength="120" required></label>
    <label>Telephone number <input id="callbackNumber" type="tel" required></label>
    <label><input id="recordingPermission" type="checkbox">
        Allow recording of the callback</label>
    <button id="requestCallback" type="submit">Request callback</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("Callback request", oldState, newState);
});
callback.on("OnPositionChangedAsync", (position) => {
    console.log("Reported 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
            ? "Callback request submitted. Processing takes place in the Contact Center."
            : "The service has not confirmed the request. Please contact us.";
    } catch (error) {
        status.textContent = connected
            ? "Submission could not be confirmed. Please contact us before requesting again."
            : "No connection to the callback service. Please try again later.";
        if (!connected) button.disabled = false;
    }
});
</script>

The form prevents repeated sending after submission. If the connection fails during invocation, it is unclear whether the request has already been processed. Do not repeat it automatically.

Offer a callback time

For a later callback, replace the final null argument with a validated ISO time, such as 2026-10-15T14:30:00+02:00. Clearly define the time zone in which customers select the time. A datetime-local input does not contain a time zone offset itself. Validate the date before converting and sending it.

Note the callbackHub reference: the hub response does not confirm a completed callback. Before releasing the website, verify that the request actually arrives in the Contact Center.

Product information: Chat and WebCallback