Video |

Tableau | Data visualisation | Productivity

Embed Tableau Public in Notion: Tableau Quick Tip

Notion's direct Tableau embed loads the fiddly mobile view, so here's the CodePen trick that gets you the full interactive desktop vis instead.

Tim Ngwena •1 August 2022 •1 min read •5 min watch •2.5K

Part ofTableau quick tips

Watch on YouTube

Pasting a Tableau Public share link into a Notion embed block works but usually loads the cumbersome mobile design rather than the desktop layout.
A cleaner method is to copy Tableau Public's embed code into the HTML section of a new CodePen pen, which renders the full interactive desktop version.
Save the CodePen to get a unique pen URL, then paste that into a Notion embed block to load the visualisation neatly inside the page.
Avoid the CodePen approach for anything requiring authentication, as it introduces security challenges in a company setting.

0:00Hey, it's Timmy. I just wanted to show you

0:01a very quick way of embedding Tableau

0:04Public content into a Notion page.

0:06Now, this is technically possible. Let me

0:08show you how this works.

0:10If I just go over to Tableau Public, grab

0:12the share link, and I'm just going to grab

0:13the link that you get here at the bottom,

0:15copy that, go back to Notion,

0:17and what I want to do here is open up an

0:19embed item, so I'll do a forward slash and

0:22type embed, you'll see that it brings this

0:24particular item here at the top.

0:26Paste the Tableau Public link, hit embed

0:28link, it'll think about it, and what it

0:30will do is it will launch a little box, and

0:32in that box is the actual Tableau Public

0:34vis,

0:35and this is fully interactive, but you'll

0:37note that it kind of loads the mobile

0:39design for this.

0:41If I go to the web browser, you'll see that

0:43it's got a very different design, it's got

0:45like a landscape design in desktop view,

0:48but when I go here, it nearly always loads

0:49the mobile design.

0:51It ends up being quite fiddly, and you can

0:53see Notion's also got a few bugs here in

0:56the most recent version,

0:58so as you try and expand this to kind of

0:59make it fill the space, it does sort of

1:01work, and you know, this is interactive,

1:04you can see it's got the full Tableau

1:05interactivity, but I found this sort of

1:07approach very cumbersome, it didn't sort of

1:09work to my style.

1:11So, there's another way of doing embeds

1:13that is supported by Notion, and that's

1:15using another tool called CodePen.

1:17Now, if I go back to the Notion

1:18documentation, you'll see that it can embed

1:20lots of different types of content.

1:23One of those types of content is CodePen.

1:25Now, CodePen is just a way for developers

1:27to test HTML, CSS, and JavaScript in the

1:30browser,

1:31build sort of small things like buttons or

1:33interactions, send them to someone via a

1:35link,

1:36or just show people how to do something

1:37using those three technologies, and so Code

1:39Pen actually allows us to do this.

1:41So, what I've done is I've got a CodePen

1:43account here.

1:44You can see that I've actually embedded the

1:45Tableau release navigator before using this

1:47trick,

1:48but what I'll do is I'll go ahead and just

1:49create a brand new CodePen, and we can just

1:51go ahead and do that.

1:53So, let's create a pen, and essentially you

1:55'll see at the top you get HTML, CSS, and

1:57JavaScript.

1:58The only thing we need to pay attention to

2:00is the HTML.

2:01Go back to our visualization, and what you

2:03want to do is go back to the share button,

2:05and you want to copy everything inside of

2:06the embed pen code.

2:07So, when you click on that, it actually

2:08does copy it, I believe, but we'll go ahead

2:11and copy that ourselves.

2:13Go back to CodePen, and you want to paste

2:14everything into the HTML section over here.

2:17It does actually include JavaScript in

2:19there, but we're just going to put

2:20everything in there,

2:21because technically the HTML runs in the

2:23page, and you can see that it now loads the

2:25full page here below,

2:27and it's the static sort of desktop version

2:29. It's fully interactive, and that's perfect

2:31.

2:32Now, the next thing I want to do is save

2:34this.

2:35So, once we save this, we actually get a

2:37unique URL for this particular pen, as they

2:39call it,

2:40and then I'll just grab that link here at

2:42the top, grab it, copy it, go back to Not

2:44ion,

2:45and what I can do is go ahead and use that

2:46embed type again.

2:48So, go ahead and type embed, and then I can

2:50just paste the URL to CodePen, hit embed

2:53link,

2:54and what it will do this time is it will

2:56load the CodePen rather than the Tableau

2:58publicvis.

3:00So, it's just going to think about it for a

3:02second, and once it's done that,

3:04it actually creates a little page for us,

3:05which is kind of nice, and we can make this

3:07wider if we want to,

3:09and we can make it taller as well, and you

3:11can see that it does actually neatly load

3:15the whole entire vis.

3:16Let's just bring that down a bit more. So,

3:18yeah, there we go. That's almost a perfect

3:19fit.

3:20Now, if we hit run pen, then we get the

3:22full vis inside of Notion.

3:25Now, yes, it's annoying that it has this

3:27sort of tab around it, but in all honesty,

3:30I personally think this is better. Let's

3:32just make it as wide as possible to get rid

3:34of those vertical scroll bars as well.

3:38Let's keep going down. There we go. I think

3:39that should be everything. Perfect.

3:42It just wants to have enough space for that

3:43, and there we go. So, nice. Everything is

3:46done.

3:46So, if I just zoom out, you can see here

3:48that now everything is in the page.

3:51It's beautifully set up in Notion, and it's

3:53fully interactive. You can use it as you

3:54would expect.

3:55You can interact with it, and it's a pretty

3:56, pretty cool way of doing it.

3:58So, this is actually my recommended way of

4:00putting something from Tableau Public into

4:02Notion.

4:03If you're in a company and you use Notion,

4:05I wouldn't recommend this approach for

4:08anything that requires authentication,

4:10just because you're going to introduce a

4:12lot of challenges, let's say, with security

4:15.

4:15If you're going to go through something

4:17like CodePen, it's not a good practice to

4:19get into.

4:20But I do hope that Notion improves its

4:21embedding capabilities, makes it a little

4:23bit smarter,

4:24so that we can actually have native Tableau

4:26embeds here in Notion.

4:28Maybe even Tableau and Notion work together

4:30to create some sort of extension that will

4:32live in the exchange that you can add to

4:33Notion,

4:34that just brings in Tableau Public Visas

4:35right into Notion.

4:37Thanks for watching, and I'll catch you in

4:39the next video.

4:40[music]

4:42[ Silence ]

Rollup

Notion's built-in embed for a Tableau Public link usually renders the fiddly mobile layout rather than the full desktop version, but routing the Tableau embed code through CodePen first gets you the proper interactive desktop vis sitting neatly inside a Notion page.

You have a Tableau Public visualisation and want it embedded interactively inside a Notion page, using only the sharing options Notion natively supports.

The Breakdown

Try the direct Tableau Public embed 0:00

Grab the share link from Tableau Public, create an embed block in Notion (type /embed) and paste it in. This works and stays interactive, but it's the baseline approach with a known flaw.
Notice it loads the mobile design 0:51

The direct embed nearly always renders Tableau's cramped mobile layout rather than the wider desktop view you see in a browser, and Notion's own embed box can be fiddly to resize around it.
Use CodePen as Notion's supported workaround 1:11

Notion natively supports embedding CodePen pens. CodePen is a tool for testing HTML/CSS/JavaScript in the browser and sharing it via a link, which is what makes it usable as a bridge.
Paste Tableau's embed code into CodePen's HTML panel 1:41

Create a new pen, go back to your Tableau Public vis's share button, copy everything from the embed code, and paste it all into CodePen's HTML section (even though it includes JavaScript, it still runs fine there). This step must come before saving the pen, since it's what generates the full desktop-rendered preview.
Save the pen to get a shareable URL 2:21

Once the HTML is pasted in, CodePen renders the full interactive desktop version of the vis. Saving the pen gives you a unique URL you'll need for the next step.
Embed the CodePen URL back in Notion 2:40

Create another Notion embed block, but this time paste the CodePen URL instead of the Tableau link. Notion loads it as a page you can resize wider and taller until the vis fits neatly with no scrollbars.
Run the pen for the full experience 3:20

Hitting run pen inside the embedded CodePen gives you the complete, fully interactive vis inside Notion, aside from a visible tab border around it, which is a minor trade-off for the better layout.
Know when not to use this trick 3:58

This is the recommended way to get Tableau Public content looking right in Notion, but avoid it for anything requiring authentication in a company setting, since routing through a third-party tool like CodePen introduces security complications.

Worth Knowing

The direct Tableau Public embed in Notion is technically functional, just visually cumbersome because it defaults to the mobile design.
Notion's embed box has some resizing bugs in its current version when you try to expand the direct Tableau embed.
The CodePen approach isn't suitable for authenticated Tableau content in a company environment, since it creates security risks.
The embedded result still shows a thin tab/border from CodePen around the vis, which is a minor cosmetic trade-off.

Use It When

Reach for this when you're documenting or showcasing a public, non-authenticated Tableau Public vis inside a Notion page and want it to look and behave like the full desktop version rather than a squashed mobile embed.

How this Rollup was made provenance & method

A Rollup is drafted by AI from the video's transcript, then reviewed and edited by Tim. Everything used to produce this one is listed below — the model, the exact prompt, and the source video — so the process is transparent and reproducible.

Transcription: On-device — NVIDIA Parakeet v3 for recent videos, OpenAI Whisper large-v3 for earlier ones. The transcript never leaves the machine or gets published.
Drafting: Claude Sonnet 5 in the cloud, from that transcript.
Prompt: The exact Rollup prompt (v2) — the full system prompt, unedited.
Source video: Watch on YouTube
Drafted: 5 July 2026 at 09:38
Reviewed & edited: 5 July 2026 at 09:41 · by Tim Ngwena

Model + prompt + video is everything you'd need to recreate a Rollup like this yourself. The one thing we don't share is the transcript.

Rights. The video and its transcript are the property of TN Media Ltd. Unauthorised use or download is prohibited. © TN Media Ltd.