Web Widget Agent
Complete Setup & Configuration Documentation — a step-by-step guide to creating, configuring, and deploying a Web Widget AI Agent on the platform.
Platform URL: fonada.ai/dashboard/agents
Modules covered
- AI Agents Dashboard
- Create Agent Process
- Web Widget Channel Selection
- Basic Information Setup
- ASR Configuration
- TTS & Voice Configuration
- Language Selection
- Speaker & Voice Profiles
- LLM Provider Configuration
- AI Prompt Configuration
- Knowledge Base Setup
- Tools & Events
- Deploy Agent
- Get Widget Code
- Live Widget Testing
Agent setup progress — 4 stages
| Stage | Sub-step |
|---|---|
| 01 — Select Channel | Choose deployment platform |
| 02 — Basic Info | Configure agent settings |
| 03 — Knowledge Base | Add training data |
| 04 — Deploy | Deploy your agent |
1. Open AI Agents Dashboard
Navigate to the AI Agents section from the left-side menu in the Fonada Console. The AI Agents Manager allows users to create, manage, deploy, monitor, and edit AI assistants. Click Create Agent to start creating a new AI-powered assistant.
- Log in to the Fonada Console at fonada.ai.
- In the left navigation, click AI Agents.
- The AI Agents Manager page opens (
fonada.ai/dashboard/agents). - Click the blue Create Agent button (top-right of the Manager card).
2. Select Web Widget Deployment Channel
Fonada AI supports multiple deployment channels such as Telephony, RCS, WhatsApp, and Web Widget. To deploy an AI assistant on a website, select Web Widget (Voice/Chat). This option enables voice and chat functionality directly on websites.
- On the Choose Your Channel screen, locate the Web Widget (Voice/Chat) card.
- Click it — a border appears confirming the selection.
- Click Continue to advance to Basic Info.
3. Configure Basic Information
In the Basic Information section, users need to configure the main details of the AI agent.
| Field | Details |
|---|---|
| Bot Name * | Required. Max 20 characters. Example: wiget_bot |
| Description Template | Dropdown — Custom Description or prebuilt template. |
| Description * | Required. Max 400 characters. Describes the bot purpose. |
| Agent Conversation Mode * | LLM-based Agent (recommended) or flow-based. |
| First Message | Optional greeting — e.g. 'what can i help you sir'. |
Required fields include
- Bot Name — e.g.
wiget_bot - Description — brief purpose of the agent
- Conversation Mode — LLM-based Agent (recommended)
- Welcome Message — first greeting when conversation starts
4. Configure Channel Setup
The Channel Setup section controls voice and speech-related configurations. Users can configure ASR, TTS, language settings, and speaker voices.
| Field | Details |
|---|---|
| ASR Model * | Automatic Speech Recognition — e.g. Fonada Labs. |
| TTS Model * | Text-to-Speech — e.g. Fonada Labs. |
| Language * | E.g. Hindi, English, Tamil, Telugu. |
| Voice Name * | E.g. Laksh (Male, Premium) — calm and composed. |
| Test Voice | Click to hear the actual voice sample before saving. |
Detailed ASR (Speech Recognition) configuration
The ASR module converts user speech into text so the AI can understand voice input.
| Provider | Capability |
|---|---|
| Fonada Labs | Optimized for Fonada platform. |
| Deepgram | High-accuracy real-time transcription. |
| Sarvam | Indian-language speech recognition. |
Language support configuration
Fonada AI supports multilingual AI conversations. Supported languages include:
- American English
- English
- Hindi
- Tamil
- Telugu
- Naav (and more regional languages)
Voice & speaker configuration
Fonada AI provides multiple speaker profiles for realistic AI voice conversations. Voice profiles include different speaking styles:
| Style | Description |
|---|---|
| Professional | Formal, articulate delivery. |
| Calm | Relaxed and composed speaking style. |
| Warm | Friendly, approachable tone. |
| Conversational | Natural everyday speaking style. |
| Premium | High-quality, studio-grade voice. |
5. Configure AI Settings
The AI Config section allows users to configure the intelligence and behavior of the assistant.
| Field | Details |
|---|---|
| LLM Provider * | E.g. Fonadalabs, Google Gemini, Azure OpenAI, OpenAI, Groq. |
| LLM Model * | E.g. 35B. |
| System Prompt * | AI behavior and personality instructions (max 5000 words). |
| LLM Temperature | 0.8 default — controls response randomness. |
| Token Limit | 20000 default — max tokens per response. |
LLM provider configuration
Fonada AI supports multiple Large Language Model providers for intelligent chatbot and voice assistant deployment. Users can select providers based on response quality, cost, speed, and enterprise requirements.
| Provider | Best for |
|---|---|
| Fonadalabs (Premium) | Optimized for Fonada — recommended starting point. |
| Google Gemini | Multimodal, strong factual responses. |
| Azure_eastus2 | Enterprise Azure East US 2 deployment. |
| Azure OpenAI | Enterprise deployments on Microsoft Azure. |
| OpenAI | Advanced reasoning, complex conversations. |
| Groq | Ultra-fast inference. |
System prompt
The System Prompt defines how the AI should respond during conversations. Instructions for the AI's behavior and personality — this is sent to the LLM as context for every conversation (max 5000 words).
6. Configure Tools & Events
The Tools & Events section allows integration of OCR tools, PDF extraction, custom APIs, and external integrations. These tools enhance the capabilities of the AI assistant.
| Platform | Tool Name | Status |
|---|---|---|
| OCR test | Document QA | Active |
| OCR test | Extract Image | Active |
| OCR test | Extract PDF | Active |
- Select the MCP Platform Tools tab.
- Check the tools you want to enable for this agent.
- Use Custom Tools tab for your own API integrations.
- Click Update Agent (blue button, bottom-right) to save.
7. Add Knowledge Base
Users can train the AI assistant using FAQs, business details, product information, support content, and company policies. This improves AI response accuracy.
- Open the agent in Agent-Builder (Dashboard → Agent-Builder).
- Enter an optional Title for this text.
- Paste or type content in the Content field.
- Click Add to Knowledge Base (purple button).
- Click Next Step to proceed to Deploy.
8. Deploy the AI Agent
After completing all configurations, click Deploy Agent to publish the AI assistant and make it live on your website.
- Review all configuration settings (use Previous if needed).
- Click the green Deploy Agent button.
- The agent status changes to Active in AI Agents Manager.
9. Verify the Agent in Dashboard
After deployment, the agent appears inside the AI Agents Manager dashboard with deployment details and configuration options.
- Status: Active badge — green indicator.
- Web Widget channel badge — confirms correct deployment.
- Agent name, Agent ID, Created/Updated dates.
- Action buttons: Get Widget Code, Webhooks, Active toggle.
10. Generate Widget Integration Code
Click Get Widget Code on the agent card to generate the JavaScript code required for website integration. Users can copy the script and paste it into their website HTML.
- Click Get Widget Code on the wiget_bot card.
- The Embed Chat Widget modal appears with 4 steps: Copy the code → Paste before
</body>→ Chat bubble appears → Users start chatting. - Click Copy Code to copy the script.
- Or click Download Script to save the file.
- Use Try Voice Assistant (green button) to preview.
11. Test the Live Web Widget
The AI voice/chat widget appears at the bottom-right corner of the website. Users can test voice and chat interactions in real time.
How to test
- The voice assistant widget appears in the bottom-right corner.
- Click the microphone icon to start talking.
- Test your agent's responses and voice capabilities.
Benefits of Web Widget
- No-code AI assistant creation
- Voice and chat support
- Multilingual AI conversations
- Advanced speech recognition
- Custom AI prompts
- Knowledge base integration
- Real-time deployment
- Website integration support
- Enterprise-grade AI infrastructure
- Scalable AI deployment
— End of document — Web Widget Agent Setup Documentation