To display 3D content in real-time we use WebGL, which is a standard in most modern browsers. You can check if your browser is compatible on https://get.webgl.org/
For more technical details about WebGL on your machine, see https://webglreport.com
Desktop
Sketchfab is compatible with the following browsers:
- Mozilla Firefox
- Google Chrome
- Opera
- Safari
- Edge
Go to Safari → Preferences → Advanced and check Show Develop menu in menu bar. Go to Develop → Enable WebGL.
Mobile
- iOS 8+
- Android 4.0
Troubleshooting
WebGL
On older browsers or devices with WebGL disabled, models are displayed with an image-based fallback that gives a 360° turntable view of the model.
If you run into problems, make sure your graphics driver and browser are up-to-date. If that doesn’t help, try one of the other browsers listed above. https://get.webgl.org/ is a good place to start troubleshooting.
Sometimes, your browser may disable WebGL based on your GPU. If you are using a compatible browser, but you see an incompatible warning or the viewer performs very badly, try forcing the browser to use your GPU:
- Chrome
- Go to System Settings ( chrome://settings/ → Advanced → System ) and make sure Use hardware acceleration when available is enabled.
- Go to chrome://flags/#ignore-gpu-blacklist and enable the Override software rendering list flag.
- In Firefox, type about:config into the address bar and enable webgl.force-enabled.
Touch Screens / Tablets
Sometimes, navigating a model may not work on a touch screen or tablet device. This is especially common on certain Windows 10 devices. In Chrome, for example, visit chrome://flags/#touch-events and enable the "Touch Events API" flag.
Scripts and Cookies
In order to load correctly, the viewer needs to run various JavaScript scripts. It also needs access to browser cookies for various purposes such as respecting Sound volume and Restricted Content settings. If script execution or cookies are blocked by browser settings, plugins, sandboxing the Sketchfab iframe, or other methods, the viewer will not load. If you must sandbox the iframe for some reason, you must also lift several restrictions to make sure all viewer features work as expected:
- allow-scripts (needed to load the frame whatsoever)
- allow-same-origin (needed to allow the frame to communicate with our servers)
- allow-popups (needed for links within the frame to work)
- allow-forms (needed if the model is password-protected so that you can enter the password)
You will want your iframe HTML code to look something like this (note the sandbox attribute).
<iframe sandbox="allow-scripts allow-same-origin allow-popups allow-forms" frameborder="0" width="xxx" height="xxx" src="https://sketchfab.com/models/xxxxxxxx/embed"></iframe>
You can also remove the sandbox attribute completely if possible.
<iframe frameborder="0" width="xxx" height="xxx" src="https://sketchfab.com/models/xxxxxxxx/embed"></iframe>
WordPress Users
Sketchfab must be added as 'Trusted oEmbed Provider', otherwise WordPress will automatically add sandbox restrictions to Sketchfab iframes.
Adding the following line to a plugin or functions.php in the theme directory solves that:
wp_oembed_add_provider( '#https?://sketchfab\.com/.*#i', 'https://www.sketchfab.com/oembed', true );
It is also added by the JetPack plugin and the Sketchfab oEmbed plugin.
Comments
133 comments
Are you able to provide a link to that page?
In both cases, I highly suspect that the iframe is being sandboxed (see explanation above) on your sites. The device and browser you use will not change that, it's being set by the website.
You'll see something like this in the raw HTML of the page:
How are these websites built / configured?
https://3dscanexpert.com/structure-sensor-realsense-sr300-kinect-v2-3d-scanning/
I get this when look at the raw html - does this mean it's not fixable our end?
That's the JavaScript console. If you check inspect the HTML elements of the page, you can see this iframe, for example:
It seems that WordPress is automatically adding the sandbox="allow-scripts" part of that, which breaks the viewer without sandbox="allow-scripts allow-same-origin" (and preferably also "allow-poups allow-forms" to make sure all possible features work).
You might be able to change that manually editing the raw text version of the page in WordPress, but it's not clear to me why WP is adding this automatically. Our blog, for example, uses WP and doesn't do this. Our embeds work fine.
Can you walk me through your procedure for adding an embed to a post? Do you have any WP plugins that might affect this? Any information in general about your WP configuration would be helpful.
I'm just a visitor to the site so no process. I just get about 3 seconds of the underlying model and then this error appears over the top. I've been on this page before with no issue and it's an old post (relatively) so I'm not sure why the encoding of the webpage would be causing this now?
Ok thanks. It's something their WordPress is doing automatically to our iframes. We'll continue investigating.
Hi James,
We are having similar issues here with a premium account. Could you please help us? Here is our website with some Sketchfab embeds: https://shapelabvr.com/ (please scroll down to the “Created with ShapeLab” section).
As a visitor, with an up to date Chrome or Edge (for example) you’ll most likely see the following message “It looks like your browser or this site is blocking some scripts or cookies necessary to properly display the viewer.”
We are using Elementor WordPress plugin and tried to simply embed the models by following these instructions https://help.sketchfab.com/hc/en-us/articles/204982689-WordPress
Unfortunately, I’m not a technical guy, but I guess the generated “iframe HTML code” does not supposed to look like this..? Can’t see attributes such as “allow-same-origin allow-popups”
Not sure if I’m copying the right part from our page: <iframe class="wp-embedded-content lazy-loaded" sandbox="allow-scripts" security="restricted" data-lazy-type="iframe" data-src="https://sketchfab.com/models/31012aa1375f443a852110b4f9112564/embed#?secret=7r1ObyPxXo" data-secret="7r1ObyPxXo" frameborder="0" width="688" height="387" src="https://sketchfab.com/models/31012aa1375f443a852110b4f9112564/embed#?secret=7r1ObyPxXo"></iframe>
Could you please let me know if there is a workaround for this?
Thank you very much for your time!
Hi,
Yep you're looking in exactly the right place in the code. You'll need to change sandbox="allow-scripts" to sandbox="allow-scripts allow-same-origin". Do you have the ability to edit the raw HTML directly?
We're still investigating why certain WordPress configurations and/or plugins are doing this by default. Some other WP users have also found workarounds, but I haven't received any information yet. I'll follow up with any news.
@James
Hello, Im having an issue with IOS 10.13 and using the steps to fix the problem for Safari.
I did the steps correctly, but i noticed that those steps were for 10.9 and earlier.
Is there a way to fix this Safari issue with 10.13 and up for IOS
@virainsight sorry, do you mean macOS, not iOS?
What happens when you try to view a model? Can you please send me a screenshot of this report from Safari? http://webglreport.com/
@James I am trying to embed a Sketchfab into my WP site. https://www.midsouthdroneservices.com/construction-progress-photos/ .
I simply past the URL into my WP page editor (WPBakery Page Builder) and it works fine on the back end where I am editing the page. But when I view the page as a visitor (any browser) I get the dreaded grey box and message
It looks like your browser or this site is blocking some scripts or cookies necessary to properly display the viewer.
I can't find where to edit the iframe code??? If you can tell me where to go and edit that I am sure that will fix it.
When a person loads the page as a normal site visitor, the Sketchfab windows shows for about 1 second and then then it immediately switches to the grey window with error message.
Any help will be greatly appreciated.
Thanks!
I had originally added the one line of code to the functions.php file. But then I read that installing Jetpack fixes this problem. So after installing Jetpack, I deleted the line from functions.php and now the Sketchfab does not work in the backend. I am sure that if I re-insert that code back in the functions.php file it will work in the backend (but still not in the front end).
However, I am going to wait for further instruction before I make any further changes. I just need to get this up and running ASAP :)
Thanks,
Tim
Hi Tim,
The embed seems to be working now. WordPress caches oEmbed codes for 24 hours, so it can take some time to show the change.
Hello! I am trying to link a 3d model into my PowerBI report, but in every browser I got the same message:
It looks like your browser or this site is blocking some scripts or cookies necessary to properly display the viewer.
View this model on Sketchfab :
https://sketchfab.com/models/88709aef079d45f1954f830509055e93/embed?utm_source=website&utm_campaign=blocked_scripts_error
If I click that link I can see my model on the website, but I need to see it in my report.
As a source I used the following link:
<div class="sketchfab-embed-wrapper"><iframe width="640" height="480" src="https://sketchfab.com/models/88709aef079d45f1954f830509055e93/embed" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">
<a href="https://sketchfab.com/3d-models/v1-1-88709aef079d45f1954f830509055e93?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">V1 1</a>
by <a href="https://sketchfab.com/klajas?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">klajas</a>
on <a href="https://sketchfab.com?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a>
</p>
</div>
I tried already with webgl.force-enabled, but it didn't help.
Does anybody know what should I change in my code or in the settings of my browser to make it work?
I would be really thankful for any help, I need that report for my master thesis.
Please sign in to leave a comment.