MagicBrowse is a highly innovative feature and sometimes edge cases are discovered. Most of MagicBrowse issues are simple to resolve

1. You are trying MagicBrowse using localhost

To make MagicBrowse working, Crisp servers need to access to your website. If your website is not live yet, Crisp can't access to your development website, resulting in a display failure. ( Page might display like if no CSS is provided).

2. Customer is offline

To optimize platform performances, Crisp is not updating the visitor list in real-time, Few seconds may happen that a visitor is detected as offline.

3. Webpage is too heavy

To protect Crisp servers and your customer's data usage, Crisp is blocking MagicBrowse if your webpage is heavy (over 500KB).

To solve this issue:

• Don't embed inline Stylesheets in the HTML
• Avoid HTML redundancies
• Don't use inline Base64 images

4. Stream socket is blocked

Both Crisp chatbox and Crisp operator app connect to a stream server (over WebSockets) in order to exchange MagicBrowse data.

On websites with a restrictive Content Security Policy (CSP), the stream socket server might get blocked, thus preventing the Crisp chatbox from connecting to the MagicBrowse session. You may allow our stream socket server in your CSP. Check our our guide on domain names for CSP](https://docs.crisp.chat/guides/others/whitelisting-our-systems/crisp-domain-names/) to fix that.

If you're using Shopify, some auth middlewares might block connexions, preventing Crisp from the ability to grab all the required data to display customer's screen correctly.

5. The style of my page is not rendering/breaking

Make sure that your CSS assets are not being blocked by checking CSP warning/errors.

Note that if you are using dynamically injected CSS (such as React's styled components or libraries like Element), Crisp will not be able to detect and parse style that's injected with style.sheet.insertRule().

Instead, the CSS should be injected as text content inside of the <style> tags generated by those librairies.

We would recommend referring to the documentation of the librairies used to adjust this.

For instance, with Element:

import createCache from "@emotion/cache";
import { CacheProvider } from "@emotion/react";
...
const emotionCache = createCache({ key: "css", speedy: false });
...
<CacheProvider value={emotionCache}>
// Your app's code
</CacheProvider>

None of these cases applies

In that case, just contact our team, we'll be happy to solve your issue.

Updated on: 15/12/2025