Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.
var options = { // Shared link to Dropbox file link: "https://www.dropbox.com/sh/keptcjl08q3wsid/AACui966iXcXPbagCJ2py2L-a?dl=0", file: { // Sets the zoom mode for embedded files. Defaults to 'best'. zoom: "best" // or "fit" }, folder: { // Sets the view mode for embedded folders. Defaults to 'list'. view: "list" // or "grid" headerSize: "normal" // or "small" } } Dropbox.embed(options, element);
In addition to the above code and the embed code snippet is there anything else I need to get the dropbox embedder to work? Embedding via anchor links works, but I can't trigger it using the javascript code above in order to customize it a bit.
Thanks! Yes, you'll also need to define "element" which will depend on your page, but should be the element on your page where you want to put the Embedder.
For example, if you have an element on your page like this:
<div id="folder_container"></div>
Then you might define 'element' like this:
var element = document.getElementById("folder_container");
What error, if any, do you get in the JavaScript Console when you try this?
From what I can see, it looks like it may just be a syntax error. You're missing a comma here:
// view: "list" // or "grid"
It should be:
view: "list", // or "grid"
Thanks for responding. I get the following error in console.
Uncaught ReferenceError: element is not defined
Thanks! Yes, you'll also need to define "element" which will depend on your page, but should be the element on your page where you want to put the Embedder.
For example, if you have an element on your page like this:
<div id="folder_container"></div>
Then you might define 'element' like this:
var element = document.getElementById("folder_container");
Thanks. That did the trick.
Do you have an example of the full code? I am still having the same issue.
@Bryantsssss Exactly how the code should look will depend on your scenario and what you're trying to build. You can find the full instructions, plus a live working example, on the Embedder page here.
Here's what a minimal example of triggering the Embedder using JavaScript might look like:
<!DOCTYPE html>
<html>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="APPKEYHERE"></script>
<script type="text/javascript">
$(document).ready(function() {
var url = "https://www.dropbox.com/s/u0bdwmkjmqld9l2/dbx-supporting-distributed-work.gif?dl=0";
var element = document.getElementById("file_container");
var options = {
link: url,
file: {
zoom: "best"
}
};
Dropbox.embed(options, element);
});
</script>
<div style="height:600px;width:800px" id="file_container"></div>
</html>
Thank you so much, the code worked! Do you have any suggestions for how to implement this with a password-protected folder? Sadly will not work if I use one.
Should clarify - password protected link makes me leave the page and no longer allows me to view files in the embedded view. Any way to have the user enter the password inside the embed?
@Bryantsssss No, unfortunately there's no option for that, but I'll pass this along as a feature request. I can't promise if or when that might be implemented though.
Hi there!
If you need more help you can view your support options (expected response time for a ticket is 24 hours), or contact us on X or Facebook.
For more info on available support options for your Dropbox plan, see this article.
If you found the answer to your question in this Community thread, please 'like' the post to say thanks and to let us know it was useful!