My previews were showing earlier today. They now show only in Iframe. This runs across all of my Notebooks. Any ideas?
I just checked and my embed previews work for iframe as well as JavaScript. Can you share the notebook so I can have a look? I assume this is a public notebook… or is it a private one with a notebook key?
HI Cobus,
It’s a private notebook with a key. I could try replicating this with a public notebook if that would help.
This very simple notebook fails to preview but shows fine when embedded in a Squarespace page: Test for embedding / ET | Observable. It is not dynamic.
This Notebook shows no preview and fails to fetch when embedded in a Squarespace page: Tree Hierarchy / ET | Observable.
I’ll pay a king’s ransom for what will surely be a simple solution.
Best,
John
No king’s ransom required yet… 
Both of these embeds work for me… here is a video.
Could you share what you see? Also, do you perhaps have any plugins that may block the JavaScript embeds?
Hi Cobus,
Please see attached. I’ll have to start digging on plugins. Not that I’m aware of, and it worked earlier, then just stopped.
(Attachment Screen Recording 2024-06-11 at 1.10.12 AM.mov is missing)
This should work.
<script> tags are not supported in Observable notebooks, and you don’t need to include Observable’s Runtime here - it’s already part of the notebook environment.
For JavaScript embeds you can instantiate your notebook by using the code that is shown in the embed modal.
I suspect that the reason you see no output in your recording is that you use side effects in your notebook (e.g. one cell modifying another cell’s output via document.querySelectorAll or d3.select).
Using side effects also means that your notebook may appear to be working until the next time you reload it.
Alternatively you may want to check your browser’s devtools console for any JavaScript errors.
Also, can you share the steps that led you to try the “runtime-v1.js” inclusion? There are several aspects that make me wonder if those instructions were provided by ChatGPT or a similar service:
- this URL has never existed
- Observable’s Runtime is at v5
- including the Runtime via a script tag was never supported (as far as I’m aware)
Thanks a ton. Super helpful. Yes, I now see that the Runtime is already part of the notebook environment. Makes sense and I see it now. All Chatbots suggest this, unfortunately.
I have not identified any side effects. My code is a slightly modifed version of Mike Bostock’s Collapsable Tree.
I receive the following error when trying to embed:
Refused to load the font ‘data:font/woff2;base64,…’ because it violates the following Content Security Policy directive: “font-src https://fonts.gstatic.com https://use.fontawesome.com”.
Can you share your notebook (or a simplified version of it)?
Sure, here you go!
I can’t reproduce the issue that your recording shows. Could you check if you encounter the same problem in a private/incognito window? Also, what browser are you using?
Good suggestions. I’m using Chrome Version 125.0.6422.142 (most recent).
I tried several Notebooks in Incognito. The small one I shared with you is fine. Others that rely on attached files: “RuntimeError: Failed to fetch”. I have asked a colleague to try the same exercise to see if it’s a browser issue.
I see, you’re trying to create a JS embed for a private notebook (it seems I missed that you mentioned this detail earlier, sorry).
I’m afraid due to technical limitations we currently only support file attachments in private notebooks through iframe embeds. You would either have to use an iframe embed or make your notebook unlisted.
Problem solved. I understand completely. It makes sense for data security. I hope the current technical limitations are worked through in the near future.
For what it’s worth, you can also download the notebook as a tarball (from the notebook menu via “Export” > “Download code”) and host the files yourself.
Could you share the prompt that you used?
They were all to the effect of: What are the steps to embed an Observable Notebook in a website using Runtime for JavaScript?
Then I’m relieved, because when I tried that prompt with ChatGPT it only got the Runtime version wrong (4 instead of 5), but everything else looked correct.