How to Embed a Box Folder in a Website

Step-by-Step Guide

1. 1

   Step 1: Go to Box website.

   Open an Internet browser, type in https://app.box.com/ on the address bar then hit Enter.
2. 2

   Step 2: Log in.

   Use your Box account username and password to log in on the fields provided.
   
   Click the “Log in” button to continue. , Navigate through your Box folders by clicking on them until you see the file or folder you want to share by embedding them on a website. , Beside the file or folder, on the far right, is a Share link.
   
   Click on this to quickly bring out the Share parameters.
   
   Click on the advance settings or gear icon button to bring out the Share pop-up window. , From the Share pop-up window, select the Embed tab from the menu to bring out the Embed settings. , On the left side of the Embed settings are the Size options.
   
   Predefined sizes can be selected from the drop-down list.
   
   You can also opt to set a custom size by selecting “Custom” and inputting the Width and Height accordingly. , On the right side of the Embed settings are more options.
   
   The first one is for View.
   
   Select from the drop-down list how you would like the files to look like.
   
   You can either choose “List” or “Icon.” , The next option you can set is the Sorting criteria.
   
   You can select “Name,” “Date,” or “Size” from the drop-down list.
   
   This will define how your files will be sorted , The last option is for the Theme.
   
   Select either “Blue” or “Gray.” This is the background or general color of the Box widget for your website. , At the bottom of the window, before the actual HTML code, you can preview of the Box widget.
   
   Click on the “Preview this embed” link, and another browser window will open displaying your Box widget.
   
   Previewing the embed will give you a chance to review it before actually committing to the embed code provided.
   
   If there’s anything you’d like to change, you can still do so by going back to the corresponding steps above. , The embed code is displayed at the bottom part of the window. , When you’re set with the Box widget, click the “Copy to Clipboard” button below.
   
   This will copy the whole embed code to your clipboard. , Go to the website where you would want to put the Box widget.
   
   The website can be yours with your own HTML coding or can be a hosting site with their own templates. , If you own the website or if you know HTML coding, you can navigate through your website’s code and insert the embed code you’ve copied in the spot or place where you’d like the Box widget to appear.
   
   If your website is hosted on a web service with its own layout or template, there should be a place where you can insert widgets.
   
   Look for this and just paste the embed code you’ve copied.
   
   You don’t need to know HTML coding to do this. , Save your work and refresh the website.
   
   You will now see the actual Box widget on your website.
   
   People with access to this website can now see and access the files and folders you’ve put there.
3. 3

   Step 3: Select the file or folder to embed.

4. 4

   Step 4: Set the Share settings.

5. 5

   Step 5: Access the Embed settings.

6. 6

   Step 6: Set the size.

7. 7

   Step 7: Set the view.

8. 8

   Step 8: Set the sorting options.

9. 9

   Step 9: Set the theme.

10. 10

    Step 10: Preview this embed.

11. 11

    Step 11: Look for the embed code.

12. 12

    Step 12: Copy the embed code.

13. 13

    Step 13: Go to your website.

14. 14

    Step 14: Input the embed code.

15. 15

    Step 15: View your Box widget live.

Detailed Guide

About the Author