2 Replies Latest reply on Sep 11, 2018 10:08 PM by Peter Fakan

    Embedding Tableau Dashboard on Website

    Qral Group

      When embedding a Tableau Dashboard on a website, how do we get it to fit the frame of the website? How do we make it responsive to different devices (tablet, phone) for both portrait and landscape orientations?

        • 1. Re: Embedding Tableau Dashboard on Website

          Hello Qral,


          Please refer to these links.


          Embed Views into Webpages


          Create Dashboard Layouts for Different Device Types





          1 of 1 people found this helpful
          • 2. Re: Embedding Tableau Dashboard on Website
            Peter Fakan

            Hi Qral,


            The issue might be with your web publishing software - do you use a CMS by any chance ?


            Depending on the structure of the CMS, you might be able to directly embed the script codes using a 'insert custom html' component. If these are not pre-programmed with frame sizes (I'm looking at you iframes), you might be able to use Tableau's inbuilt facility to auto-size instead of the CMS overwriting it.


            You can also 'force' this by editing your script sizes to 100% - see bolded areas in the script below;


            <script type='text/javascript' src='https://myservernamegoeshere/javascripts/api/viz_v1.js'></script><div class='tableauPlaceholder' style='width: 100%; height: 100%;'><object class='tableauViz' width='100%' height='100%' style='display:none;'><param name='host_url' value='https%3A%2F%2Fmyservernamegoeshere%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='&#47;t&#47;Nameofvizgoeshere' /><param name='name' value='Viznamegoeshere&#47;Dashboardnamegoeshere' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='showAppBanner' value='false' /><param name='filter' value='iframeSizedToWindow=true' /></object></div>


            You can also test this;


            Step 1 - create webpage template in notepad



            Step 2 - drop script into the body area and edit sizes to 100%



            Step 3 - save file as .html


            Step 4 - open viz inside your custom webpage environment and play with dynamic resizing





            1 of 1 people found this helpful