Blank widget panel or CSP block
Use this when the Porchlight bubble appears, but opening it shows a blank panel, a browser security warning, or a console error that says the frame, script, or network request was refused.
What is happening
Many customer websites use a Content Security Policy, often shortened to CSP. CSP is a browser safety rule that decides which outside scripts, frames, images, and network calls the website may load.
Porchlight needs permission to load the widget script, open the chat frame, and talk to the Porchlight backend. If the site blocks one of those, the buyer may see an empty panel.
Browser checks
Ask the web person to open the browser console and look for messages like:
Refused to load the scriptRefused to frameRefused to connectContent Security Policyframe-src,child-src,script-src, orconnect-src
The exact error usually names the blocked directive.
CSP rules to allow
Keep the policy narrow. Add Porchlight only to the directives that are blocking it:
script-src https://porchlight.cymbalabs.com
frame-src https://porchlight.cymbalabs.com
connect-src https://porchlight.cymbalabs.com
img-src https://porchlight.cymbalabs.com
If the site still uses child-src, add Porchlight there too. If the site uses a strict default-src 'self', explicit script-src, frame-src, and connect-src rules are usually required.
Where to change it
CSP can live in several places:
- A WordPress security plugin.
- A hosting panel or CDN such as Cloudflare.
- A custom server header.
- A
<meta http-equiv="Content-Security-Policy">tag in the site template. - A web agency's deployment configuration.
Changing page content is not enough if the real policy comes from the host or CDN.
Do not weaken the whole site
Do not use * just to make the widget load. Do not remove the entire CSP. Add Porchlight to the specific blocked directives, publish, clear cache, and test again.
Send Porchlight this context
If the panel is still blank, open support and include:
- The live page URL.
- The full browser console error.
- The current CSP header or meta tag if the web person can share it.
- Whether the site uses WordPress security plugins, Cloudflare, or a custom host.