We're making changes to the Community, so you may have received some notifications - thanks for your patience and welcome back. Learn more here.
Forum Discussion
samuelar
4 years agoNew member | Level 2
Embedding files on our website
When I upload a picture or video to a dropbox folder that is a subfolder sorted into days within an umbrella folder (manually - only a couple a day) - how do I automatically embed the most recent .jp...
samuelar
4 years agoNew member | Level 2
im trying to use embedder in my squarespace site: REDACTED using this folder link: REDACTED and the code found in the support article below but it isn't working, if this isn't to be work, can you embed the folder using HTML? If anyone could provide the code that I can just replace links in and is fit to run that would be great. Many, many thanks
Triggering the Embedder using JavaScript
Another way to use the Embedder is to embed content into a specific element using the JavaScript method Dropbox.embed(options, element). This approach can be particularly useful if you’re trying to create embedded content dynamically.
The options object must contain a link and may optionally define file settings and folder settings.
An example folder embed:
var options = { // Shared link to Dropbox file link: "REDACTED", 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);
By modifying these parameters, you can change the embedded content and the behavior of the Embedder:
- link - (required) - a Dropbox shared link to the content being embedded. Changing this link will update the embedded content.
- file - (optional) - a file options object used to configure embedded file behavior. May contain the following parameters:
- zoom - (optional) - a string that sets the level of zoom for embedded files. May be set to the following values:
- 'best' - (default) - sets the zoom mode to best, which sets the zoom of documents to the full width of the embed container. The zoom for other file content is set to the largest dimension (height or width) of the content being embedded.
- 'fit' - sets the zoom mode to fit, which will automatically set the file’s zoom to the largest dimension of the embedded content. For documents, this mode sets the zoom to the largest dimension of the first page.
- zoom - (optional) - a string that sets the level of zoom for embedded files. May be set to the following values:
- folder - (optional) - a folder options object that contains settings to configure embedded folder behavior. May contain the following parameters:
- view - (optional) - a string that sets the starting view mode for embedded folders, which may be set to one of the following values:
- 'list' - (default) - starts folder in list view
- 'grid' - starts folder in grid view
- headerSize - (optional) - a string that sets the style of header to use for the embedded folder
- 'normal' - (default) - use the default size header, ideal for medium- to large-sized containers
- 'small' - use a smaller header, recommended for small-sized containers
- view - (optional) - a string that sets the starting view mode for embedded folders, which may be set to one of the following values:
The snippet above embeds a preview of a Dropbox folder in list view:
- tahsini4 years agoDropbox Staff
To use the embedder, you will first need to create an app via the App console. With that you'll need the App Key that is located in the app console.
From there you'll want to insert this javascript:
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="[YOUR APP KEY]"></script>
Replacing [YOUR APP KEY] with the app key from your App console.
From there you can use the following html:
<a href="[CONTENTS SHARED LINK]" class="dropbox-embed" ></a>
- Hawkeye003 years agoNew member | Level 2
I tried this recommendation from Tahsini but all I get is this.
It tries to load an iframe which is blocked.
- Greg-DB3 years agoDropbox Staff
Hawkeye00 To use the Dropbox Embedder, make sure you've registered the domain(s) of your site(s) where you want to use it. You can find more information in the Dropbox Embedder documentation. You can register your "Chooser / Saver / Embedder domains" from your app's page on the App Console.
About Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.
5,875 PostsLatest Activity: 5 hours agoIf you need more help you can view your support options (expected response time for an email or 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!