Microphone permissions for embedded conversations

A two-minute fix to allow voice conversations in your app.

What's happening

The Roxels conversation widget runs inside an iframe on your site. For the voice conversation to work, the browser needs permission to access the microphone from within that iframe.

Most modern web servers and CDNs set a Permissions-Policy header that restricts which features embedded content can use. If this header doesn't explicitly allow microphone access from app.roxels.ai, the browser blocks it.

Is this secure?

Yes. You're granting microphone access only to content from app.roxels.ai — not to any arbitrary iframe. The browser still prompts the user for permission before activating the microphone. No one can listen without the user explicitly clicking "Allow."

How to fix it

Cloudflare

Go to Rules → Transform Rules → Managed Transforms or create a custom response header rule:

Permissions-Policy: microphone=(self "https://app.roxels.ai")

If you already have a Permissions-Policy header, add "https://app.roxels.ai" to the microphone directive.

Nginx

add_header Permissions-Policy "microphone=(self \"https://app.roxels.ai\")";

Apache

Header set Permissions-Policy "microphone=(self \"https://app.roxels.ai\")"

Vercel (vercel.json)

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Permissions-Policy",
          "value": "microphone=(self \"https://app.roxels.ai\")"
        }
      ]
    }
  ]
}

Next.js (next.config.js)

module.exports = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Permissions-Policy",
            value: 'microphone=(self "https://app.roxels.ai")',
          },
        ],
      },
    ];
  },
};

AWS CloudFront

Create a Response Headers Policy with a custom header:

Header: Permissions-Policy
Value: microphone=(self "https://app.roxels.ai")

Attach the policy to your distribution's behavior.

How to verify

1. Deploy the header change.
2. Open your page with the Roxels widget in Chrome.
3. Open DevTools → Network tab → click the main page request.
4. Check Response Headers for Permissions-Policy.
5. Confirm it includes microphone=(self "https://app.roxels.ai").
6. Reload the page and start a conversation — the mic prompt should appear.

Removing the header entirely

If you don't need a Permissions-Policy header at all, simply removing it also fixes the issue. Browsers allow microphone access in iframes by default when no policy is set. The header is opt-in security hardening — if you added it intentionally, the targeted fix above is better.

Still having trouble? Reach out at support@roxels.ai and we'll help debug your specific setup.