Embedder opens a blank page with Error: appkey must be provided

NJ-Gonzo

Im trying to open a popup window with an embedded Dropbox folder when a user hits a button.

When I hit the button, it opens a blank popup.

When I turn on the Developer > Javascript console (in safari) I see an error when the Dropbox.embed command runs.

The error is: "Error: appkey must be provided"

 

I am using the <script> line with the appkey directly copied from dropbox (cut and paste).  I replaced the appkey with all xxxx's just for this posting.

The var LinkID = [@field:Digital_File_link] pulls in the correct Dropbox link,  https://www.dropbox.com/xxxxx  and I verify this with the window.alert(LinkID) line.

 

The chooser / Saver / Embedder domains value is set to the domain the script is running on.

 

What am I missing?

 

Thanks in advance!

 

The following code is what I am using.

---------

 

<button onclick="openDropboxLink()">Open Dropbox Link</button><script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="xxxxxxxxxxxxxxx"></script>
<script>
var LinkID ='[@field:Digital_File_link]';

function openDropboxLink() {

 

window.alert(LinkID);

var options = {
link: LinkID,
folder: {
view: "list",
headerSize: "normal"
}
};

var element = window.open('', '_blank', 'width=1200, height=800');

Dropbox.embed(options, element);

}

</script>

 

Здравко

---

@NJ-Gonzo wrote:

... but I need a way to embed the dropbox folder on the page after they log in.

...

---

Hm.. All good, but what you're doing in code posted in OP doesn't meet "embed the dropbox folder on the page"! To be able embed something (your folder) somewhere (on any page including yours), you need to select place in the target page and embed there, not to open new page and try "embed" (if could be said so). There are 2 ways and which one is better depends on where you get your folder link (server side or client side). If you received the link on server side, it becomes easy - just put on the place where your folder should appear "a" tag with link put there. I.e. something like:

<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="xxxxxxxxxxxxxxx"></script>
<a href="[@field:Digital_File_link]" class="dropbox-embed" data-height="800px" data-width="1200px"></a>

That's enough. 😉 The Dropbox' script will take care to replace the "a" node to content of the mentioned link ([@field:Digital_File_link]) automated.

If you're receiving link in dynamic way (after page load), then you have to use 'Dropbox.embed' when the link becomes available (cause you cannot embed it in page in advance as shown above). You still have to denote a place where your folder will appear (or create such in dynamic way). After the link is ready, you have to pass a reference to desired element (not a window!!!) to 'Dropbox.embed'. I.e. something like:

<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="xxxxxxxxxxxxxxx"></script>​
<div id="dropboxContainer" style="width: 1200px;height: 800px;"></div>
...
var element = document.getElementById("dropboxContainer");
var options = {link: LinkID, folder: {view: "list", headerSize: "normal"}};
Dropbox.embed(options, element);

Hope it's a bit more clear now. 😉