FAQ

The most commonly asked questions about Search

Voice Search #

This code is meant to be a starting point that can be tailored to your needs.

Many browsers support voice search natively, making it fairly straightforward for developers to implement into Clerk.io’s search features.

Below is an example script that can be used to transcribe text using a microphone. Specifically, it will insert text into Clerk.io’s Omnisearch input field.

It adds a button that, when clicked, triggers the browser’s voice recognition API and inserts the text into the input field.

You can add this script as a code block to a design editor design for an Instant Search or directly in a code design for Instant Search or Omnisearch.


<button class="mic-button" onclick="startVoiceSearch()">🎙️</button>

<script>
function startVoiceSearch() {
    if (!('webkitSpeechRecognition' in window)) {
        alert("Your browser does not support voice recognition.");
        return;
    }

    let recognition = new webkitSpeechRecognition();
    recognition.lang = "en-US";
    recognition.interimResults = false;
    recognition.maxAlternatives = 1;
    recognition.onstart = () => console.log("Listening...");
    recognition.onerror = (event) => console.error("Speech Recognition Error:", event);
    recognition.onend = () => console.log("Speech recognition ended.");
    recognition.onresult = function(event) {
        let transcript = event.results[0][0].transcript;
        updateSearchInput(transcript);
    };
    recognition.start();
}

function updateSearchInput(text) {
    let input = document.getElementById("clerk-omnisearch-input");
    input.value = text;
    // Trigger events for search to update properly
    ['input', 'change', 'keydown', 'keyup'].forEach(eventType => {
        let event = new Event(eventType, { bubbles: true });
        input.dispatchEvent(event);
    });
    console.log("Voice input added:", text);
}
</script>