Getting Started โ
๐ง CLOSED BETA
Sibilance is currently in closed beta. This documentation is provided as a reference to showcase how the implementation will work upon release.
The @sibilance.is/client package is not yet publicly available. If you're interested in early access, please visit sibilance.is to join the waitlist.
Welcome to Sibilance! This guide will help you add AI voice surveys to your web application in minutes.
What is Sibilance? โ
Sibilance is a SaaS platform that enables websites to collect survey data, specifications, and other information through interactive AI voice workflows. The client library (@sibilance.is/client) provides:
- ๐ค AI Voice Surveys - Natural, conversational voice interactions
- ๐ Survey Builder - Visual flowchart editor for creating surveys
- ๐ Markdown Workflows - Define surveys using simple markdown syntax
- ๐งช Interactive Testing - Test surveys with real-time YAML output
- ๐ Secure - Domain validation and encrypted API key storage
Prerequisites โ
Before you begin, ensure you have:
- Node.js 18+ or Bun
- A modern browser with microphone support
- HTTPS (required for microphone access)
- A Sibilance account (sign up at sibilance.is)
- A Survey Key from the Sibilance platform
Installation โ
Install the package using your preferred package manager:
# npm
npm install @sibilance.is/client
# yarn
yarn add @sibilance.is/client
# pnpm
pnpm add @sibilance.is/client
# bun
bun add @sibilance.is/clientQuick Start โ
Here's a minimal example to get you started:
React Example โ
import { useSibilance, FloatingMicButton } from '@sibilance.is/client/react';
function VoiceSurvey() {
const { voiceState, surveyState, toggleSession } = useSibilance({
surveyKey: "sibilance_your_key_here",
}, {
onComplete: (yaml) => {
console.log('Survey completed!', yaml);
// Submit to your backend
}
});
return (
<FloatingMicButton
isConnected={voiceState.isConnected}
onClick={toggleSession}
/>
);
}Vanilla JavaScript Example โ
import { SibilanceClient } from '@sibilance.is/client';
const client = new SibilanceClient({
surveyKey: "sibilance_your_key_here",
}, {
onComplete: (yaml) => {
console.log('Survey completed!', yaml);
}
});
// Start voice session
await client.connect();Getting Your Survey Key โ
- Visit sibilance.is
- Sign up for an account
- Create a new survey using the Survey Builder
- Generate a Survey Key for your survey
- Copy the key (starts with
sibilance_)
How It Works โ
- Create Survey - Use the Sibilance platform to create a voice survey with markdown and Mermaid diagrams
- Get Survey Key - Generate a survey key from the platform
- Embed Widget - Add the Sibilance client library to your website
- Collect Data - Users interact with your survey via voice, and results are collected as YAML
Next Steps โ
Now that you have Sibilance installed, explore these topics:
- Installation - Detailed installation instructions
- Quick Start - Complete quick start guide
- React Integration - Using Sibilance with React
- Vanilla JavaScript - Using Sibilance without a framework
- Web Components - Using Sibilance as a web component
Need Help? โ
- ๐ง Email: support@sibilance.is
- ๐ Website: sibilance.is
- ๐ Platform: Platform Dashboard
- ๐ Documentation: docs.sibilance.is