Basic Usage Guide
This example demonstrates how to use the Vocale in any JavaScript app to manage voice interactions and form submissions with Vocale.ai.
You can see a fully working example here - StackBlitz/Vocale JS Example
import Vocale from '@vocale/core';
// Initialize Vocale class with your settings
const settings = {
siteId: 'YOUR_SITE_ID',
apiKey: 'YOUR_API_KEY',
};
const vocale = new Vocale(settings);
//Sync the fields, this is an API request to track the from directly from your app
//try to call it as little as possible since its not necessary if the form hasn't changed
vocale.sync({
pathname: '/',
forms: [
{
formId: 'my-form',
type: 'HTML',
schema: [
{
id: 'name',
type: 'text',
fieldType: 'text',
},
{
id: 'email',
type: 'email',
fieldType: 'text',
},
{
id: 'message',
type: 'textarea',
fieldType: 'text',
},
],
},
],
});
//Here is where you send the audio blob, it can be directly from the browser or any other source.
//Pro tip: In the Stackblitz example there is a working version of this
vocale.voice(
blob,
{
trigger: {
formId: 'my-form',
},
pathname: '/',
metadata: {
audioDuration: 1000,//You should track this when recording the audio
},
})
.then((data) => {
data.actions?.forEach((action) => {
if (action.type === 'form') {
action.payload.schema.forEach((field) => {
//Here you can use the completions by field
console.log(field.id, field.value)
});
}
});
});