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?

        • 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