logo

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)
      });
    }
  });
});