Web Agent

Now that you have an Agent and Script, let's talk to it directly from your browser.

Web Campaigns use WebRTC/WebSockets instead of phone lines. This results in HD Voice quality and Zero Telephony Costs.

Architecture Requirement

You can connect a browser directly to the Iqra Platform, but it is a security risk. For this tutorial, we use our .NET Middleware to act as a secure bridge, ensuring your API keys are never exposed to the public internet.

Create Web Campaign

First, generate the campaign configuration.

Navigate to Routing → Web Campaigns in the Business Dashboard.
Click Add Campaign.
Name: "Website Demo".
Agent: Select your "Iqra" agent.
Script: Select your script.
Save the Campaign.

Deep Dive

Learn more about Web Campaign Configuration, including session timeouts and silence detection settings.

Get Campaign ID

Once saved, look for the Campaign ID in the list.

Format: camp_web_12345...
Copy this string. You will need it for the middleware configuration.

Generate API Key

The middleware needs permission to talk to the Iqra AI Platform on your behalf.

Switch to the User Dashboard (click "Back to Dashboard" in the sidebar).
Go to the API Keys tab.
Click Add API Key.
Name: "Middleware Key".
Scope: You can restrict this key to specific businesses for security.
Copy the Key (starts with iqra_sk_...). You won't see it again.

Deep Dive

Security matters. Read our guide on API Key Scoping to understand how to lock down access.

Launch Middleware

The middleware handles rate-limiting and authentication. For this quick start, we will run it locally.

Prerequisites: Docker installed.

Run the official image, pasting your API Key (Step 3) and Campaign ID (Step 2):

docker run -d -p 7157:80 \
  -e VoiceAiPlatform__ApiSecretToken="PASTE_YOUR_API_KEY_HERE" \
  -e VoiceAiPlatform__WebCampaignId="PASTE_YOUR_CAMPAIGN_ID_HERE" \
  -e AllowedOrigins__0="http://localhost:3000" \
  ghcr.io/abdofallah/iqra-middleware:latest

Your middleware is now running at http://localhost:7157.

Deep Dive

This is a simplified setup. For production, check the .NET Middleware Guide to configure Redis queues, IP blocking, and SSL.

The Test (HTML Client)

Now, create the client that talks to your local middleware.

Create a file named test.html locally and paste the code below.

<!DOCTYPE html>
<html>
<head>
    <title>Iqra AI Test</title>
    <!-- 1. Load the SDK -->
    <script src="https://cdn.iqra.bot/sdk/voice-ai-widget.umd.js"></script>
</head>
<body>
    <h1>Web Agent Test</h1>
    <button id="startBtn">Start Call</button>
    <button id="stopBtn">End Call</button>

    <script>
        // 2. Initialize
        // Point to your LOCAL Middleware
        const client = VoiceAiWidget.init({
            middlewareUrl: "http://localhost:7157", 
        });

        // 3. Listen to state changes
        client.on('stateChange', ({ state, data }) => {
            console.log('Current State:', state); 
            if (state === 'QUEUED') {
                alert(`System busy. You are #${data.queuePosition} in line.`);
            }
        });

        // 4. Bind Buttons
        document.getElementById('startBtn').onclick = () => {
            client.startSession({
                dynamicVariables: { name: "Guest" },
                metadata: { source: "quick-start" }
            });
        };
        document.getElementById('stopBtn').onclick = () => {
            client.hangUp();
        };
    </script>
</body>
</html>

Developer SDKs

Building a React/Next.js app? Check out the full Web Widget SDK Documentation for hooks and custom UI styling.

Run & Talk

Open test.html in your browser.
Click Start Call.
Allow Microphone Permissions.
Speak to your agent!

Create Web Campaign

Get Campaign ID

Generate API Key

Launch Middleware

The Test (HTML Client)

Run & Talk

On this page