How can we make DocumentCloud better?

More embed-friendly document viewers

We'd like to allow our readers and partners to embed the DocumentCloud viewer in their site, but the large sidebar makes it visually tough to do without taking up a huge amount of real estate (we did it anyways here: http://bit.ly/bpayAv). I think this would be a widely useful feature, see how the Globe and Mail uses Scribd: http://bit.ly/bMr7UD

13 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    Michael Morisy shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    8 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      Signed in as (Sign out)
      Submitting...
      • Brett Mickelson commented  ·   ·  Flag as inappropriate

        Thanks, Amanda. I did review that documentation in detail before commenting here and speaking with Jeremy, but I didn't find it was specific enough in it's language to actually explain to me how to execute the zoom level in code, and even less so with respect to the size of the div.

        It would be wonderful if the documentation could be updated to make it even more obvious for the non-developers out there (I'm certainly not a developer), though it may not be worth the time if an improvement to the embed interface is looming anyway.

        Thanks again for being so responsive.

      • Brett Mickelson commented  ·   ·  Flag as inappropriate

        For those looking to use this functionality, here's a quick guide:

        The default embed codes look like this:

        <div id="document-viewer"></div>
        <script src="http://s3.documentcloud.org/viewer/loader.js"></script>
        <script>
        DV.load('http://www.documentcloud.org/documents/[YOUR DOCUMENT URL].js', {
        container : '#document-viewer'
        });
        </script>

        You can restrict the height and width by adding the following code (change the values to match your desired dimensions):

        style="position: relative; width: 750px; height: 500px;"

        Add that code to the opening "document viewer" div. Your final code will look like this:

        <div id="document-viewer" style="position: relative; width: 750px; height: 500px;"></div>
        <script src="http://s3.documentcloud.org/viewer/loader.js"></script>
        <script>
        DV.load('http://www.documentcloud.org/documents/[YOUR DOCUMENT URL].js', {
        container : '#document-viewer', zoom: 500
        });
        </script>

        Note: I also added a zoom level of 500 pixels (default is 700) by putting the following in the container area:

        zoom: 500

      • Brett Mickelson commented  ·   ·  Flag as inappropriate

        This is exactly what I was coming in here to request!

        I'm having trouble styling the existing embed code to work. I was trying the following: <div style=”width:630px; height: 480px; position: relative”>[EMBED DATA]</div>

        Should I contact support? Is there a more detailed how-to in the documentation? Should I just sit tight?

        Thanks.

      Feedback and Knowledge Base