Embed Tableau Public in Notion: Tableau Quick Tip

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 ]