Did you know that you can embed interactive Tableau dashboard views into your website, blogs, company portal, and other web pages? While embedding the dashboard views, we can keep the look and feel the same as that of the web page. This is really helpful while showing analytics on

company websites or portal and keeping the same branding format and style. Also, when the underlying data is updated in the dashboard, the embedded views will reflect those changes immediately. In this tutorial, I'll be sharing with you the two simple ways to embed an interactive Tableau dashboard on any

website. The first one is using embedded code provided by Tableau in Tableau dashboard view, and the second method is by using iframes. Also, I'll be sharing with you on how to use parameters to customize the views while embedding a Tableau dashboard. Having said that, let's get

started. [Music] Welcome back. This is GP from DS Canvas, and in today's tutorial, I'm going to show you two simple ways with which we can embed a Tableau dashboard on a web page. So in order to do that, first of all, we need a HTML page where we are going

to embed our Tableau dashboard. So that HTML page can be on a can be a website page, blog page, or even a web portal on your internet in the company. So for that, we need any text editor tool. You can use TextPad, Notepad, or any other you like.

And for this tutorial, I'm using a free online version, the trial version of VS Code. So that's the text editor tool which I'll be using in this tutorial, and I have already created a HTML page, just a basic one where we have nothing in that HTML page. So it's a

blank HTML page as I haven't put anything in the body section, body tag of the HTML page. This is our first starting point and we want to embed a particular dashboard into this page. So, how we can do that? So, for this tutorial purpose, I'll be using my Tableau public profile

and I have picked up a project management dashboard, so I'll be using this particular dashboard for demonstration purposes. So, first of all, we will go to the share object icon and I will click on that one, and you will see there are two options: embed code and link. So, as I

mentioned in the beginning of the tutorial, so there are two different ways with which we can embed a dashboard. The first one, which we are going to learn now, is by embedding the code which is already provided by Tableau on the Tableau dashboard view. So, we will simply select this

and copy it, and once we copy that, we will simply go into our text editor tool where we have the HTML code and we will put that, paste that in the body section of the tag, and it will look something like this. I know there are too many things, so

I will just clean it up a little bit, and I will just align the tags and everything, and which I have already done before here, so it will look something like this. So, in the body, we have a division tag, first object class tag, and then all the

parameter names. So, I can just align it like this, and after that, we have the scripts. So, by just embedding this, you will see the dashboard is appeared here, and I have done nothing but just copying the code from the Tableau share section and pasted it. As simple as

That, and you will see this web page will look like this. You can add the text or the blog, anything about on the below of this dashboard and design it the way you want it. And the dashboard is embedded, and when you hover over it, it will work

exactly the same way as it is on the Tableau server online or even Tableau Public. And you will see here we have the toolbar at the bottom and there are a lot of parameter options, which we are going to learn now and how we can customize these toolbars and few other

things. So let's look into it. In order to add the toolbar parameter conditions, let me show you quickly the default parameters. So as you can see here, we have all the default parameters provided by Tableau when we copied the embedded code from Tableau dashboard view. So we have

toolbar value already set to yes by default. So what we can do here is simply go and change it to no. When we do that, you will see on the dashboard on the right-hand side, there is no toolbar. So at the bottom, there is no toolbar anymore. So all that information

whatever was there was gone now. So if I change it to yes, you will see that it will appear again. So all the arrows and replay and other things, reset, are appeared. So that's that's how the toolbar parameter is set. And let me zoom in a little bit as well. So if you see

here, these are all the parameter values: parameter name, name parameter, tabs, toolbars. So here the toolbar value is currently set to yes by default. So I've just shown you how to change it to no and the toolbar will disappear. And there are other parameter values as well.

which are present there by default, so we'll be adding a few more just below here where we can see how these different parameter values will have a different impact on the view of the dashboard layout in terms of the headers, the um, the banners, the toolbars, the sharing

objects and other things. So the toolbar is done. So the next one which we need to look into is the tooltip. So that's again similar to this one, so we will just add the parameter name just at the bottom here and you will see parameter name "Tooltip"

value equal to "no". So by default when we hover over to these ones, no tooltips are appearing, but if I change it to "yes" and we try to hover over to these ones, you will see the tooltips are appearing now. So by default it's the value is "yes", so

we can overwrite this value to "no" if we need to, just changing the parameter name by adding it uh a new row in the parameter name "Tooltip" and changing the value to "yes". So going to the next one is "Share option", "Show share options". So that's another parameter which will

help us to control whether the share options are displayed in the embedded view or not. So as you can see here, let's go here and you can see the share option is available by default and you can see the embedded code and the link. So if you want to disable it, I will

simply go here and add parameter name "Show share options", value equal to "false". So when I do that, you will notice that the share icon is disappeared from the toolbar. So that way you can update this as well if you don't want to share, give the option to the

user to share this dashboard with anybody, so I will set it back to true. And the next one is the filter option, which is quite handy and quite useful, where we can set the filters to a default value in the web page when a user opens a

dashboard. So in this case, by default, we have the project status set to all the values. And let's say I want to set the project status to closed by default when the dashboard opens. So I will simply go here and I will say parameter name equals filter

CU. I'm going to use the filter value, and in the values, I will say I want to use the filter name. So in here, in this case, the filter is status, I mean the dimension which I'm using is status. So I will say status equals, and which value we are using, so I

want, um, closed tickets in this case. So I will simply say closed, and I will close the tag. And you will notice here the dashboard is by default updated and it's only showing you all the closed tasks. And if I want to change it to open, it will change all the stats on the

dashboard to open. So by default, whenever somebody is opening the web page, the default value of the filter, we can set here by just adding this parameter. So this is quite handy actually. And if you want to keep all the values, so just don't enter anything, just keep it

blank, and it will show you all the values for that particular field. Then the next one is the custom view. So custom view is again like for table, uh, server and online, you can enable or disable the custom views by simply adding a parameter value of custom views. So we can do that by just

adding it here parameter name custom views value equal to no so in the Tableau Public profile there are no custom views here so you won't be able to see it but if you are embedding your Tableau Server dashboard or Tableau Online dashboard to a particular website or web page you can

enable or disable the custom views by just entering this code and moving on to the next one is show data details so that's again a parameter which we can allow the user to view the data detail when the Tableau Catalog is enabled well again you can

you can if you have Tableau Catalog enabled you can try this um this parameter value as well so the syntax for this parameter value is simply show data details value equal to yes you can enable and disable by doing yes or no in this case so let me remove this

okay and the next one is the data detail parameter so this parameter helps us to hide the data detail button in the toolbar when uh we let the user to see the details about the data used in the view so we can simply go to the parameter value and we can type it in

and set the data detail values to no so the user won't be able to see the data details in the toolbar button and also there are a lot more parameters which we can simply add it into these codes and enable or disable and accordingly the layout or the

toolbars can appear or disappear so let's say I want to disappear right here and change the toolbar value to no again so you won't be able to see that and I will change the share option to false as well and the that option will be gone as well

so now we have only the download options so there is I will be sharing the link in the description below where you can see all the object parameters for JavaScript tags so this is how you can update or embed the tblo dashboard to any web pages using the JavaScript

embedded code provided by tblo now let's move on to the second method where we'll be using iframe tags to embed the TBL dashboard so for that let's let's try to use another dashboard so let me pick up another dashboard which is the memory

game which I built a couple of years ago so let's go into that dashboard you can try it with any dashboard you have so we will simply again go to share icon and copy the link so I will copy that link and I will then go back to our text

editor so first of all I will delete everything in the body tag and here I will paste the link which I just copied so once I copy that link you will see here in the HTML page you will only see it as an as a text of the

link so this is not what we want right so we want to add the iframe tags in between so I will write the iframe tag here and I will say I frame source equal to and put it in the codes and I will end the codes here and then I will close the

iframe tag so once I do that you will see the dashboard will come here but right now it's not coming here so let's copy the entire link here and you will see the dashboard starts to appear here and here I have added the width and height and the

length of the dashboard which we just copied and if you notice here let me just put it into different lines so these are the two different parameters which are provided by the table link by default and you will see here the dashboard if I just show you here the

entire dashboard is on the web page and it works the same when you hover over you will see the tool tips and even when you click in this scenario it will work the same way as you are expecting it so this is a memory game so when you click

it will it will match if it is matching you will see number of clicks zero score but when I want to turn it back you click on that and it works the same way and this is what the expected behavior which I was expecting so let let us go back and see

how we can add more parameters so I will I will show you the table website which we have it here and here we have all the URL parameters for iframe tags the data details the show data details alerts custom views so this is the different syntax which we have as compared to the

JavaScript tags so the one which I showed you earlier are here the data detailed tags from JavaScript so the syntax here is just adding the parameter name tag whereas if you scroll down here and when you go to the iframe tags the syntax is a bit different so you just

have to put semicolon and then the name of the parameter and then the value so something similar to like this one so here we are saying show data details equal to yes so we simply have to add this in our URL link and that way you can see here we have

lot of different formatting we can say display the view as a PDF or PNG file you can update the format or also you can render the view using the standard DPI dots per inch for high resolution displays you can also use all of the different parameters like refresh equals

to yes so whenever a user opens the dashboard the latest data from the server is refreshed at that time but we have to be mindful at that time if the data is too large then it might take some time to render that page up on the screen so also you can render or show

app banner show us data so there are a lot more um parameters as compared to the JavaScript provided by Tableau so let's let's try some of them here and I will I will put the link of this page where you can see all these list of

parameters in the description below the video so let's try a few of them so the most important thing which we need to keep in mind while using iframe is that we must include two parameters whenever we are using iFrames the first one is show equals home

so there's home and by default we should always keep it to know and the second one which we need is embed equals true so these are the two parameters which we should always have it in our iframe parameters while embedding the dashboard using iF

frames so now let's try few of them so the first one we should try is toolbar so let's try toolbar so I will simply say toolbar equals no so when I do that you will see the toolbar and the bottom will disappear so there is no toolbar at the

bottom and we can also show the same thing by disabling the show share option, so we can add that parameter as share options equal to no, and you will see here it will disappear from the toolbar at the bottom. Uh, so just a syntax, we don't need spaces

here and you will see it has disappeared from the bottom here, but now the toolbar, you can see it here. So if I remove this and say the toolbar is equal to no, and you will see there is no toolbar at the bottom, but we will see the share

and this option. So now let's try another one. If we want to say tool tips, so right now we can see the tool tips when we hover over, so I will simply add tool tip parameter equal to no, and you will see here the tool tips are

gone. And also with the toolbar, there are other options like to Bar equal to top, so what it will do is it will bring the toolbar at the top of the banner, so you can see it here, it's at the top. So we can, we have two, three options

basically yes, no, or top. So if we do it now, it will completely disappear. So that way you can play around with all these options and you will see how these ones work. And we can, we can try a few other ones as well. So let's, let's go

to our web link, text web link where you can see we have Show app Banner where you can hide the open and mobile Banner in the mobile web browser. So you can try that if you're using mobile apps. Show our sta, it's, it's quite useful as well.

if you are giving your power user an option to play around with the data using a start option, you can hide that button as well. So, show the share option, we have already discussed, show with home. So that's the one by default, we need to keep it did to know. So this will show or

hide the content navigation interface of the tablet public. Set to know when embedding with and other web pages. By default, we always kept it to know while using tet public. So while using tet online and tablet server, this doesn't matter. So this is only for tablet public.

So while using this particular example, that's why I've set it to no. By default, we can also set the subscriptions to no, the tabs to no, and yes, the toolbar. We already discussed it's displaying by default at the bottom when this parameter is not set.

When you set it to no, um, it will remove that toolbar from the dashboard, or you can also move it at the top of the dashboard. And also with the tooltips, as I've shown earlier, tooltips are displayed by default in the view, so we

can disable it by just changing the parameter to know. So I hope you guys like the session, and you will be trying different options, different parameters while embedding the dashboards on your web pages or websites or blogs. Feel free to let me know if you have any

questions or doubts, and I will try to answer them as soon as possible in the comments below. And if you haven't subscribed to my channel, then please do so, so you don't miss out on any such new videos in the coming future. Thank you. Have a good day. Bye.

Embed tableau dashboard on website | Web page | Portal | Blog

Data Viz Canvas

웹 사이트에 Tableau 대시보드 내장

대화형 Tableau 대시보드를 웹 사이트, 블로그 및 포털에 내장하여 웹 사이트의 모양과 느낌을 그대로 유지할 수 있습니다.

내장된 뷰는 기초 데이터가 변경되면 즉시 업데이트됩니다.

내장하는 방법에는 Tableau의 내장 코드를 사용하는 방법과 iframe을 사용하는 두 가지 방법이 있습니다.

임베딩의 시작점으로 기본 HTML 페이지가 필요합니다.

Tableau의 내장된 코드를 사용하여 내장하기

Tableau 대시보드의 공유 옵션에서 내장 코드를 가져옵니다.

HTML 페이지의 본문 섹션에 코드를 붙여넣습니다.

임베디드 대시보드는 온라인 버전처럼 작동합니다.

매개 변수를 사용하여 보기를 사용자 지정합니다.

매개 변수를 사용하여 내장된 대시보드 사용자 지정하기

도구 모음의 표시 여부를 제어합니다(예/아니요).

툴팁 표시 여부(예/아니요)를 제어합니다.

공유 옵션 표시 여부(참/거짓)를 제어합니다.

사용자 지정 보기 표시 여부를 제어합니다(예/아니요).

데이터 세부 정보 표시 여부(예/아니요)를 제어합니다.

공유 옵션에서 대시보드 링크를 복사합니다.

iframe 태그를 사용하여 HTML에 링크를 삽입합니다.

Iframe 매개변수는 JavaScript 매개변수와 다르므로 세미콜론을 사용하여 매개변수를 구분합니다.

iframe을 사용할 때는 항상 `show=home` 및 `embed=true` 매개 변수를 포함하세요.

iframe 매개변수를 사용하여 도구 모음, 공유 옵션 및 도구 설명을 제어합니다.

Embed tableau dashboard on website | Web page | Portal | Blog

Embed tableau dashboard on website | Web page | Portal | Blog

스크립트