1

Does anyone here knows how to embed Redash chart into Notion page? When I try it it only shows the bookmark box.

Thank you

1 Like
2

Do you see any errors in your browser console if you visit notion from a web browser?

3

Hi Jesse, thanks for your reply. Yes I see a lot of errors on my browser console.

4

Unless you post examples of the errors you see there’s no way we can help you.

5

Same here: embedding a redash iframe in notion results in a bookmark and not an actual iframe as expected.
I don’t believe the issue to be client-related. I run a self-hosted instance; inspecting server logs I noticed this request when adding the embedded iframe in notion:

"GET /embed/query/3/visualization/11?api_key=xxxxxxxxxx HTTP/1.1" 200 568 "-" "Mozilla/5.0 (compatible; Embedly/0.2; +http://support.embed.ly/)"
"HEAD /embed/query/3/visualization/11?api_key=xxxxxxxxxx& HTTP/1.1" 200 0 "-" "NotionEmbedder"

So, it seems that notion/embed.ly visits the page and finds something that prevents the embed.

Maybe this information can help.

6

This is great information. You can get a better sense of what’s happening on the Redash side by examining the server logs. Find the request from Notion and see if Redash returns a code 200 or 500 or something else.

There are a few ways this could break depending on what Notion expects to find when scraping embed content.

7

In the logs I attached you have 2 http reqs. Response codes are both 200 OK, so nothing to investigate on.

The only element I see here is that one req is a GET, the other is an HEAD.

HEAD makes my think to something (NotionEmbedder?) doing a CORS pre-flight check.
Check that goes wrong in our case…

8

Agreed.

Have you set your Redash CORS headers to allow requests from notion?

9

Thank you @jesse for your kind support!

Had a look around and I guess this is the problem, or at least we are very close…

1 Like
10

At the end, embedding Redash widgets in Notion is not (only) a CORS problem, definitely.

Embeddability is decided somehow by Notion (it “checks” the site as soon as the url is entered) and there are no published specs about how this check works, ATM.

I tested a static html page on the same redash server (w/ tested cors configuration, X-Frame-Options allow all) containing only a redash widget url wrapped in an iframe tag. In this way it works perfectly.

Since the same frontend serve both the redash widget url (that doesn’t work as embed) and the static page containing the iframe-wrapped redash widget url (that instead works), CORS is ruled out - it seems only a matter of html content.

I quickly built a simple tool to embed redash widgets in notion:

https://lt1jl.sse.codesandbox.io/generator

It generates a link that Notion accepts as embed.
Using query params, the link points to an html page where the redash share url is wrapped in an iframe.

This should solve the op issue and may be useful to other notion/redash users.

1 Like
11

This is excellent. Thanks so much!

Anything we can change about Redash embeds to make them more compatible for this?

12

ATM the only workaround I’ve found around is putting the redash widget url in a page like this:

<html>

<head>
  <title>Notion Embeddable</title>
</head>

<body>
  <iframe src="REDASH_URL_HERE" width="100%" height="300px">
  </iframe>
</body>

</html>

The POC I wrote builds this page from url params and gives it back to Notion.

Basically, the same html could be returned by:

  • a named route like /deep-embed/query/20/visualization/40
  • adding query params /embed/query/20/visualization/40?deep_embed=true

…but I don’t personally like this solution. The solution I’d prefer would be refactor the widget page to make it directly embeddable on most platforms - and I’m pretty sure the above html is not the best option.

I’m asking guys at Notion if they have some guidelines about content embedding and I’ll keep you updated!

1 Like
13

Update:

I get in touch with Notion support asking for embedding specs.
The answer is that they delegate the embedding feature to an external service (embed.ly) and we must comply with it.

I had a quick look to embed.ly documentation and AFAIU the requirement we are interested in is compliance with oEmbed standard (https://oembed.com/).

@jesse: To answer your question, supporting oEmbed is probably the right way to make Redash widget embedding supported on most platforms (including Notion).

1 Like