# Web Agent (Reference: https://docs.iqra.bot/intro/quick-start/web) Now that you have an [Agent and Script](/intro/quick-start), 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**. 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 [#create-web-campaign] First, generate the campaign configuration. 1. Navigate to **Routing** → **Web Campaigns** in the Business Dashboard. 2. Click **Add Campaign**. 3. **Name:** "Website Demo". 4. **Agent:** Select your "Iqra" agent. 5. **Script:** Select your script. 6. **Save** the Campaign. Learn more about **[Web Campaign Configuration](/build/campaigns/web)**, including session timeouts and silence detection settings. Get Campaign ID [#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 [#generate-api-key] The middleware needs permission to talk to the Iqra AI Platform on your behalf. 1. Switch to the **User Dashboard** (click "Back to Dashboard" in the sidebar). 2. Go to the **API Keys** tab. 3. Click **Add API Key**. 4. **Name:** "Middleware Key". 5. **Scope:** You can restrict this key to *specific businesses* for security. 6. **Copy the Key** (starts with `iqra_sk_...`). You won't see it again. Security matters. Read our guide on **[API Key Scoping](/platform/api-keys)** to understand how to lock down access. Launch Middleware [#launch-middleware] The middleware handles rate-limiting and authentication. For this quick start, we will run it locally. **Prerequisites:** [Docker](https://www.docker.com/) installed. Run the official image, pasting your **API Key** (Step 3) and **Campaign ID** (Step 2): ```bash 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`. This is a simplified setup. For production, check the **[.NET Middleware Guide](/developers/sdks/middleware)** to configure Redis queues, IP blocking, and SSL. The Test (HTML Client) [#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. ```html Iqra AI Test

Web Agent Test

``` Building a React/Next.js app? Check out the full **[Web Widget SDK Documentation](/developers/sdks/web-widget)** for hooks and custom UI styling.
Run & Talk [#run--talk] 1. Open `test.html` in your browser. 2. Click **Start Call**. 3. Allow **Microphone Permissions**. 4. Speak to your agent!