# Dropbox integration

FileBird Cloud now integrates seamlessly with Dropbox; it's an efficient solution for users who want to leverage the power of cloud storage while keeping their workflow centralized in WordPress.&#x20;

With this integration, you can easily sync your Dropbox folders with WordPress, simplifying the process of storing, accessing, and managing your media files without ever leaving your website.

And you’ll need these plugins to enable that:

* [FileBird](https://ninjateam.org/wordpress-media-library-folders/)
* [FileBird Cloud](https://ninjateam.org/downloads/filebird-cloud-integration-dropbox-and-google-drive/)

### Step 1: Connect FileBird to Dropbox

First, you need to access the link <https://www.dropbox.com/developers>.&#x20;

To get started, create a Dropbox account. If you already have an account, simply log in.

<figure><img src="https://3041978267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyIWF9CNHLQhdztdjt8Uo%2Fuploads%2FrvWbidOSeT4npUfDe2DF%2FDropbox-1.png?alt=media&#x26;token=279220f5-c107-4503-8cc0-62a9ee2d34f8" alt=""><figcaption></figcaption></figure>

After logging in, return to the website's home page and click the 'Create apps' button to create a new app on the Dropbox platform.

<figure><img src="https://3041978267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyIWF9CNHLQhdztdjt8Uo%2Fuploads%2FYzy1Bs9L9dw8Ju1UyoP2%2FDropbox-2.png?alt=media&#x26;token=64d313e6-c202-4296-b6ba-1df6ac044e73" alt=""><figcaption></figcaption></figure>

In this part, you need to follow the instructions as follows:

1. Choose an API: Scoped access
2. Choose the type of access you need: Full Dropbox - Access to all files and folders in a user’s Dropbox.
3. Name your app: You can name it whatever you like.

After completing the selection steps above, click the **Create App** button.

<figure><img src="https://3041978267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyIWF9CNHLQhdztdjt8Uo%2Fuploads%2FsHcCGRPw8Ps8g4r7oang%2FDropbox-3.png?alt=media&#x26;token=a1aa419d-87b0-414b-9a54-118111090380" alt=""><figcaption></figcaption></figure>

Dropbox will automatically redirect you to the settings section, where you’ll find the API key and App secret code. Click **Show** to display the hidden code.

<figure><img src="https://3041978267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyIWF9CNHLQhdztdjt8Uo%2Fuploads%2FCKpqVfalu08J03KLc1jU%2FDropbox-4.png?alt=media&#x26;token=fc17106d-9bf9-42c5-bd71-2c84120f986e" alt=""><figcaption></figcaption></figure>

Now the app secret has appeared, so you need to copy both the **API key** and the **App secret**.

<figure><img src="https://3041978267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyIWF9CNHLQhdztdjt8Uo%2Fuploads%2FpxZkYBXehdRY7SZkjdcL%2FDropbox-5.png?alt=media&#x26;token=fc7b192e-896d-48d4-b607-fd7e8b0b4ecc" alt=""><figcaption></figcaption></figure>

### Step 2: Copy and Paste API Key, App Secret, URIs

Return to your site. After downloading and installing the **FileBird Cloud** plugin, you will see FileBird appear on the toolbar in the dashboard. Navigate to **FileBird > Cloud**.

<figure><img src="https://3041978267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyIWF9CNHLQhdztdjt8Uo%2Fuploads%2FsRfhuzKlu8DviT8QzGvb%2FDropbox-6.png?alt=media&#x26;token=9b14a1c7-edd0-4b98-b2a7-0978b523dd90" alt=""><figcaption></figcaption></figure>

Choose the **Dropbox** tab, and paste the API key and secret code into the corresponding fields here. Then click **Save Changes**.&#x20;

<figure><img src="https://3041978267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyIWF9CNHLQhdztdjt8Uo%2Fuploads%2FMnG6rTorXtgvVSpdBnAB%2FDropbox-7.png?alt=media&#x26;token=262e2d6d-69e2-4dc3-87c3-d153adc026d1" alt=""><figcaption></figcaption></figure>

Additionally, copy the **Redirect URIs** of your site.

<figure><img src="https://3041978267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyIWF9CNHLQhdztdjt8Uo%2Fuploads%2FoRzEjiNxPrvXalFmX0rf%2FDropbox-8.png?alt=media&#x26;token=5fda865f-3e47-4a57-a9af-62b85f556d7b" alt=""><figcaption></figcaption></figure>

Then, at **OAuth2**,  paste it into your app and click the **Add** button.

<figure><img src="https://3041978267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyIWF9CNHLQhdztdjt8Uo%2Fuploads%2Fa8MmMX3wI438ctE7So9z%2FDropbox-9.png?alt=media&#x26;token=66b5388d-e84c-4abe-8374-d71bdaff61ec" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3041978267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyIWF9CNHLQhdztdjt8Uo%2Fuploads%2FkkaxyticpMXX8o2VnZT0%2FDropbox-10.png?alt=media&#x26;token=27ea3041-fee0-4f88-8fa8-56a3abeee8f6" alt=""><figcaption></figcaption></figure>

Next, click on **Scoped App**. Dropbox will automatically take you to the **Permissions** tab.

<figure><img src="https://3041978267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyIWF9CNHLQhdztdjt8Uo%2Fuploads%2FpOwR8DIqhfDmAROZbL8C%2FDropbox-11.png?alt=media&#x26;token=611288bb-8a65-449c-a7a7-399d0d3e2ebc" alt=""><figcaption></figcaption></figure>

These permissions allow your app to view and manage files and folders. Therefore, to grant them, check the boxes as follows:

* Files.metadata.write
* Files.content.write
* Files.content.read

Then, click **Submit**

<figure><img src="https://3041978267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyIWF9CNHLQhdztdjt8Uo%2Fuploads%2FmjkURBnAusfrKyKKsIY1%2FDropbox-12.png?alt=media&#x26;token=97143f10-c54b-4790-9744-c93892b4bcaa" alt=""><figcaption></figcaption></figure>

### Step 3: Sync Dropbox with FileBird

Back to your WordPress admin panel, simply click the **Connect** button once you have completed the above steps.

<figure><img src="https://3041978267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyIWF9CNHLQhdztdjt8Uo%2Fuploads%2FWLGlJHI8XLAWyAqv3s4s%2FDropbox-13.png?alt=media&#x26;token=1dff1873-5b9b-4401-be0e-790f54f9cffb" alt=""><figcaption></figcaption></figure>

Now, your site will redirect to Dropbox. Here, click the **Continue** button to proceed with the process.

<figure><img src="https://3041978267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyIWF9CNHLQhdztdjt8Uo%2Fuploads%2F80VLtFHT7Ke3ri8atnjn%2FDropbox-14.png?alt=media&#x26;token=6d2b18a1-c06d-4b0c-a4f6-8432ede9dbcb" alt=""><figcaption></figcaption></figure>

Continue by clicking the **Allow** button.

<figure><img src="https://3041978267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyIWF9CNHLQhdztdjt8Uo%2Fuploads%2Fc9WfPsPNHsQEXtwydjSp%2FDropbox-15.png?alt=media&#x26;token=e5bcee52-39ca-4a38-a186-0b429e988176" alt=""><figcaption></figcaption></figure>

It's almost done, you're now connected to the Dropbox App.

Please go to <https://www.dropbox.com/home> to check your folder. When the connection is successful, your folder will appear in Dropbox.&#x20;

Your folder will appear in Dropbox with the following syntax:&#x20;

**Name** (the name you gave the app) - **your site**.&#x20;

<figure><img src="https://3041978267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyIWF9CNHLQhdztdjt8Uo%2Fuploads%2FLhk2zpW9ElbLAxCA0v5r%2FDropbox-16.png?alt=media&#x26;token=4acd5284-6739-4a9a-961f-9043cfbed7ac" alt=""><figcaption></figcaption></figure>

Now you can try this integration by creating subfolders and adding some images to them.

Click inside the parent folder, then click **Create Folder** and name the new folder according to your purpose. (e.g., Subfolder 1, Subfolder 2, etc.).&#x20;

<figure><img src="https://3041978267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyIWF9CNHLQhdztdjt8Uo%2Fuploads%2Fq28FkEg9dsrG2W48i9Vw%2FDropbox-17.png?alt=media&#x26;token=ee8ff44e-cc02-403f-a106-ddac37729a83" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3041978267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyIWF9CNHLQhdztdjt8Uo%2Fuploads%2F8Z8KIS9N7CKkDHlLOpPu%2FDropbox-18.png?alt=media&#x26;token=78d87efa-2359-494b-8c96-cef874ed38a7" alt=""><figcaption></figcaption></figure>

Return to the **FileBird Cloud** panel again. Click **Resynchronize** to synchronize your folders and images from Dropbox to the FileBird folder tree.&#x20;

This process takes between 10 seconds to 1 minute, depending on the number of images you have in Dropbox; naturally, the more images, the longer the synchronization will take.

<figure><img src="https://3041978267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyIWF9CNHLQhdztdjt8Uo%2Fuploads%2Fc4o12ygQgNZEdQien29f%2FDropbox-19.png?alt=media&#x26;token=7f2b66b5-7d9d-4555-beff-1e422114558b" alt=""><figcaption></figcaption></figure>

And you're done!&#x20;

After connecting, begin organizing your Dropbox files using FileBird’s folder structure. Create, rename, and move by drag and drop folders to logically structure your files.

Here's the result:

<figure><img src="https://3041978267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyIWF9CNHLQhdztdjt8Uo%2Fuploads%2FbO1ZPJdwas1pNmviSu7M%2FDropbox-20.png?alt=media&#x26;token=598d875c-e220-426f-946e-dd097a1a9832" alt=""><figcaption></figcaption></figure>

So, just take advantage of Dropbox’s backup and recovery features to ensure your files are always protected against accidental loss or deletion.

Happy integrating! ✨
