12 Replies Latest reply on Sep 25, 2018 11:22 AM by Ken Flerlage

    Embedding to Website not functioning properly

    Kyle Prince

      Hello All,

       

      I am trying to embed from tableau public into my website. When I publish to tableau public and select show all sheets as tabs, I can see each of the tabs, but when I copy the embed code and put it into our website I lose the tabs. Has anyone experienced this issue or know of a fix for it? I have added two screenshots for an example of my issue. The first is when I open from tableau public, the second is from the website. I would like to be able to have the 'Enrollment', 'Admissions', and 'Five Year History' tabs show up on my website.

        • 1. Re: Embedding to Website not functioning properly
          Ken Flerlage

          By default, I believe it will only show a single tab. However, you can add a parameter to the embed code so that it will show the tabs: <param name='tabs' value='yes'/>

           

          For a complete list of embed parameters, see Parameters for Embed Code

          • 2. Re: Embedding to Website not functioning properly
            Tushar  More

            Hi Ken,

             

            I guess it only works for Tab online or server.

             

            • 3. Re: Embedding to Website not functioning properly
              Ken Flerlage

              I've used this in Tableau Public. It should work.

              • 4. Re: Embedding to Website not functioning properly
                Ken Flerlage

                Here's an old example from my blog. See the chart at the very bottom: The Home Runs of 2016 - Ken Flerlage: Analytics Architecture, Strategy, & Visualization

                 

                The embed code looks like this:

                 

                <div class="tableauPlaceholder" id="viz1479584453094" style="position: relative;">

                <div style="text-align: center;">

                <noscript><a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Ho&#47;HomeRunsof2016Small&#47;Map&#47;1_rss.png' style='border: none' /></a></noscript><object class="tableauViz" style="display: none;"><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='site_root' value='' /><param name='name' value='HomeRunsof2016Small&#47;Map' /><param name='tabs' value='yes' /><param name='toolbar' value='yes' /><param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Ho&#47;HomeRunsof2016Small&#47;Map&#47;1.png' /> <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /></object></div>

                </div>

                <script type="text/javascript">                    var divElement = document.getElementById('viz1479584453094');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='804px';vizElement.style.height='645px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>

                1 of 1 people found this helpful
                • 5. Re: Embedding to Website not functioning properly
                  Kyle Prince

                  Hi Ken,

                   

                  This has helped me somewhat. I am now seeing a tab but it is still only showing one tab available to select. Is there something that needs to be adjusted when grabbing the embed code that will tell it to grab all of the tabs?

                  • 6. Re: Embedding to Website not functioning properly
                    Ken Flerlage

                    Would you be able to share your embed code?

                    • 7. Re: Embedding to Website not functioning properly
                      Kyle Prince

                      <div class='tableauPlaceholder' id='viz1536767834083' style='position: relative'><noscript><a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;S3&#47;S33BK5J5P&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='path' value='shared&#47;S33BK5J5P' /> <param name='toolbar' value='yes' /><param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;S3&#47;S33BK5J5P&#47;1.png' /> <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /><param name='filter' value='publish=yes' /></object></div> <script type='text/javascript'> var divElement = document.getElementById('viz1536767834083'); var vizElement = divElement.getElementsByTagName('object')[0]; vizElement.style.width='100%';vizElement.style.height=(divElement.offsetWidth*0.75)+'px'; var scriptElement = document.createElement('script'); scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js'; vizElement.parentNode.insertBefore(scriptElement, vizElement); </script>

                       

                      from there, the only change I added was the param name = tabs

                      • 8. Re: Embedding to Website not functioning properly
                        Ken Flerlage

                        OK, one more question. Can you send me the link to the viz on Tableau Public?

                        • 10. Re: Embedding to Website not functioning properly
                          Ken Flerlage

                          I tried the code you supplied earlier and it didn't work, but I just grabbed some new embed code, added the tabs parameter and it's working for me. Try this:

                           

                          <div class='tableauPlaceholder' id='viz1537625193703' style='position: relative'><noscript><a href='https:&#47;&#47;www.samford.edu&#47;departments&#47;institutional-effectiveness&#47;reports'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Fa&#47;FactbookTest_0&#47;Admissions&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' /><param name='tabs' value='yes' /><param name='name' value='FactbookTest_0&#47;Admissions' /><param name='tabs' value='yes' /><param name='toolbar' value='yes' /><param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Fa&#47;FactbookTest_0&#47;Admissions&#47;1.png' /> <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1537625193703');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='1366px';vizElement.style.height='818px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>

                          1 of 1 people found this helpful
                          • 11. Re: Embedding to Website not functioning properly
                            Kyle Prince

                            Thanks, this has got it working. I'm not sure what was wrong with the original embed code.

                            • 12. Re: Embedding to Website not functioning properly
                              Ken Flerlage

                              Great. Would you be so kind as to mark one of the responses as the correct answer? This will close the thread and make it easier for others to quickly find answers to similar questions. Thanks!