Adding and Setting Up the Google Drive App

7 min read
Note:
The Google Drive app has replaced the Google Docs app. 
With the Google Drive app, you can display any file or folder you have on your Google Drive on your site. Just connect the app to your Google Drive and select what you want to display.

Step 1 | Add the Google Drive app to your site

Start by adding the Google Drive app to your site. 

To add the Google Drive app:

  1. Open the App Market:
    • Editor: Click the Add Apps icon  on the left side of the Editor.
    • Editor X: Click the App Market icon  on the top bar of Editor X.
  2. Type "Google Drive" in the search bar and select Google Drive from the drop-down menu.
  3. Click Add to Site.
A screenshot showing how to add the app to your site from the Wix App Market.

Step 2 | Connect your Google account

Once you've added the Google Drive app to your site, it is time to connect your Google account. 

To connect your Google account:

  1. Click the Google Drive app in your Editor. 
  2. Click Settings.
  3. Click Connect Account.
  4. Sign in to your Gmail account and click Allow.
  5. Select a file to display. 
  6. Click Select File or Folder.
  7. Navigate to the file or folder you want to display and click to select it.
  8. Click Select
  9. (If necessary) Click Change to Public.
    Note: When you click Change to Public: 
    • Files: This also changes your permission setting in your Google Drive.
    • Folders: Changing the permission to "Public" allows not only the selected folder, but also all its subfolders and files, to be viewed by visitors to your Google Drive. 

Step 3 | Edit the app settings

Get the most out of your app, by customizing your file and folder settings. 

To edit the app settings:

  1. Click the Google Drive app in your Editor. 
  2. Click Settings.
  3. Click the Settings tab. 
  4. Choose what you want to do:
    • Edit your file settings: 
      • Replace a file: (Optional) Click the Replace icon to select a different file or folder.
      • Allow editing: Click the Allow editing toggle to allow users to make changes to your file:
        • Enabled: Any site visitor can edit the file.
        • Disabled: The file is view only.
          Note: By allowing editing on your site, the editing permission in Google Drive also changes. You can change it back at any time in your Google Drive. 
    • Edit your folder settings:
      • Replace file: (Optional) Click the Replace icon to select a different file or folder.
      • Display file info: Select or deselect the checkmarks to show or hide file info.
      • Select default sort: Click the drop-down to select the order in which files are displayed.
        Note: Site visitors can reorder the files for themselves on your live site.
      • Enable search: Click the Enable Search toggle to enable or disable search:
        • Enabled: Site visitors can search for files.
        • Disabled: Site visitors cannot search for files.

Step 4 | Customize the app design

Blend the app into your site by changing the design settings for your files and folders.

To customize the app design:

  1. Click the Google Drive app in your Editor. 
  2. Click Settings.
  3. Click the Design tab.
  4. Choose what you want to do:
    • Edit your file design:
      • Border width: Drag the slider to change the Border width.
      • Background corner radius: Drag the slider to round the corners of the file display.
      • Background color and opacity: Click the color box to select the border color. Drag the slider to change the border opacity.
    • Edit your folder design:
      • Select folder name: Click the drop-down menu to customize the folder name font. Click the color box to select the text color.
      • List items text: Click the drop-down menu to customize the other text font. Click the color box to select the color.
      • Divider lines color: Click the color box to select a color for the divider lines.
      • Divider lines width: Drag the slider to change the divider width. 
      • Hover color and opacity: Click the color box to select the color when visitors hovers over a file. Drag the slider to change the hover opacity.
      • Background color and opacity: Click the color box to select the background color. Drag the slider to change the background opacity.

Step 5 | Change the privacy settings to "public"

In order to display folders and files on your site, you need to change the privacy settings to "public"from the Share settings. Once you do this, you can display public folders and files on your site. This can be done for both personal and business accounts. 
Depending on the account type you have, click on the option below to learn how to change your file settings.

FAQs

Click a question below to learn more. 

Did this help?

|