Resolving the “Refused to Connect” Error on Expertise AI Microsite
This guide explains why the “Refused to Connect” error appears when loading a web page inside the Expertise AI microsite and how to fix it. The issue is caused by your website’s Content Security Policy (CSP) blocking Expertise AI from embedding your page inside an iframe. Follow the steps below to diagnose and resolve the problem.
Overview
When you configure a playbook in Expertise AI that redirects users to an external web page such as a HubSpot form or custom landing page, the microsite attempts to load that page inside an iframe. If your website uses strict CSP rules, the browser will block the iframe and display:
“Refused to Connect”
This means your domain is not allowing the Expertise AI microsite to embed your content.
What Causes the Error
Most modern websites use Content Security Policy (CSP) headers to control which sources can embed their pages. The directive that determines this behavior is:
frame-ancestors
This defines which parent domains are allowed to load your page inside an iframe.
How to Verify This
- Open your website in the browser.
- Right click and select Inspect.
- Open the Network tab.
- Refresh the page.
- Click the main document request.
- Locate the Content Security Policy header.
- Look for a directive similar to:
frame-ancestors 'self' *.yourdomain.com
If app.expertise.ai is missing, your page cannot be shown on the “Try My AI” page.
Why the Pattern Fails
Even if you think your CSP patterns should allow Expertise AI, they may still fail due to domain mismatches. Common issues include:
- Wildcard patterns not covering root domains
Example: *.example.com does not match example.com
- Missing parent domain for Expertise AI
Required: app.expertise.ai
- Missing subdomain variations
You may need *.expertise.ai or app.expertise.ai
Because the microsite URL always uses app.expertise.ai, it must be explicitly included in your CSP.
How to Fix the Issue in HubSpot
If your website is managed through HubSpot, follow these steps:
1. Open the Domain Settings
- Log in to HubSpot.
- Go to Settings.
- Select Website.
- Choose Domains and URLs.
- Click Edit on the domain you want to update.
- Select Domain Security Settings.
- Scroll to the Security Headers section.
2. Update Your CSP Header
You will see a header similar to:
frame-ancestors 'self' *.yourdomain.com
Add the Expertise AI microsite domain:
app.expertise.ai
A corrected directive may look like:
frame-ancestors 'self' *.yourdomain.com app.expertise.ai
3. Save and Confirm
Click Save, confirm the changes, and allow HubSpot to apply the update. This may take a few minutes.
4. Test the Fix
Return to your Expertise AI Try My AI page and refresh. The iframe should load correctly.
Common Mistakes to Avoid
1. Missing the root domain
A rule like *.example.com does not include:
- example.com
If you need both, you must list both explicitly.
2. Forgetting to allow the Expertise AI microsite
Make sure the following is included:
app.expertise.ai
3. Forgetting that previews also require CSP permission
If you want to test how the page appears inside Try My AI, you must also allow:
app.expertise.ai
Summary
The “Refused to Connect” error appears when your website blocks the Expertise AI microsite from embedding your content. To resolve this issue:
- Inspect your CSP headers.
- Ensure your frame-ancestors directive includes:
- Your root domain
- Any subdomains you need
- app.expertise.ai
- Update your CSP settings in HubSpot or your CMS.
- Save your changes and test the microsite.
Once your CSP is updated correctly, your pages will load inside the Expertise AI microsite without any connection errors.