New to Kendo UI for jQuery? Start a free 30-day trial

SpeechToText

configuration

Configures speech-to-text functionality in the message input. The button is always visible. When null or not configured, the button is enabled by default. Use { enable: false } to disable it.

speechToText

Boolean|Object

Default: true

<div id="chat"></div>
<script>
let messagesData = [
    {
        id: 1,
        text: "Speech-to-text functionality has been disabled in this chat. The microphone button is still visible but disabled.",
        authorId: "admin",
        authorName: "Chat Admin",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg",
        timestamp: new Date(2026, 0, 1, 9, 0)
    },
    {
        id: 2,
        text: "That's fine, I can type my messages manually.",
        authorId: "user",
        authorName: "User",
        authorImageUrl: "https://demos.telerik.com/kendo-ui/content/web/Customers/LONEP.jpg",
        timestamp: new Date(2026, 0, 1, 9, 5)
    }
];

$("#chat").kendoChat({
    speechToText: {
        enable: false
    },
    authorId: "user",
    dataSource: messagesData
});
</script>

speechToText.continuous

Boolean

Enables continuous speech recognition mode. When true, recognition continues until explicitly stopped.

Default: false

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    speechToText: {
        continuous: true
    },
    authorId: "user"
});
</script>

speechToText.enable

Boolean

Enables or disables the speech-to-text button.

Default: true

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    speechToText: {
        enable: false
    },
    authorId: "user"
});
</script>

speechToText.fillMode

String

The fill mode for the button (e.g., "flat", "solid", "outline").

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    speechToText: {
        fillMode: "solid"
    },
    authorId: "user"
});
</script>

speechToText.icon

String

The icon name for the speech-to-text button.

Default: "microphone"

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    speechToText: {
        icon: "volume-up"
    },
    authorId: "user"
});
</script>

speechToText.interimResults

Boolean

Whether to return interim (partial) results during speech recognition.

Default: false

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    speechToText: {
        interimResults: true
    },
    authorId: "user"
});
</script>

speechToText.lang

String

The language for speech recognition (BCP 47 language tag).

Default: "en-US"

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    speechToText: {
        lang: "es-ES"
    },
    authorId: "user"
});
</script>

speechToText.maxAlternatives

Number

Maximum number of alternative transcriptions to return.

Default: 1

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    speechToText: {
        maxAlternatives: 3
    },
    authorId: "user"
});
</script>

speechToText.rounded

String

The border radius for the button (e.g., "small", "medium", "large", "full").

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    speechToText: {
        rounded: "full"
    },
    authorId: "user"
});
</script>

speechToText.size

String

The size of the button (e.g., "small", "medium", "large").

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    speechToText: {
        size: "medium"
    },
    authorId: "user"
});
</script>

speechToText.themeColor

String

The theme color for the button (e.g., "base", "primary", "secondary").

<div id="chat"></div>
<script>
$("#chat").kendoChat({
    speechToText: {
        themeColor: "primary"
    },
    authorId: "user"
});
</script>