Embedding places Files.com sharing experiences inside your own website or application. People can download or submit files where they already work, while Files.com handles the file transfer and the sharing experience's access controls and activity records.

This is useful for teams building customer portals, partner extranets, or public submission pages. A customer can download the material needed for a service request and return supporting files alongside the instructions for that request. Your application supplies the surrounding context and business process without needing to build its own file-transfer interface.

An embedded Share Link provides access to selected content. An embedded Inbox collects files without exposing the destination folder's contents. The same choices support a branded download page, a collection point behind your application's login, or a public application form.

The containing website also affects whether the embedded experience can operate. Its Content Security Policy must allow the resources and connections the embed needs. That is an important check when integrating the experience or investigating a blank or partially working embed.

Create the Share Link or Inbox before adding it to your website, and use its URL key in the embed code. Embedding keeps the link's or Inbox's configured access requirements, registration form, and allowed actions.

A Share Link must allow access through its URL. Do not enable invitation-only access control or email-based one-time passwords for an embedded Share Link, because those features require visitors to enter through personalized email invitations.

Initializing the Embedding Script

Every page with an embedded Share Link or Inbox needs the initialization segment once, followed by a display segment for each embed. Both segments are required; omitting one prevents the embed from displaying or produces an error.

Place this initialization segment at the beginning of the page's <body> element:

<div id="filescom-root"></div>
<script async defer src="https://jssdk.files.com/sdk/sdk.js"></script>

Place a display segment within the page's <body> element where you want the embed to appear. Replace SUBDOMAIN with your Files.com site's custom subdomain.

Initialize the embedding script once on the page, then use the Share Link's URL key for URL_KEY:

<div class="filescom-sharelink" data-key="URL_KEY" data-site="SUBDOMAIN.files.com"></div>

Embedding an Inbox

Initialize the embedding script once on the page, then use the Inbox key specified when you created the Inbox for INBOX_KEY:

<div class="filescom-inbox" data-key="INBOX_KEY" data-site="SUBDOMAIN.files.com"></div>

Display Options

Add data properties to a display segment to customize the embed:

Property	Effect
`data-color`	Sets the main color used for certain buttons, using a HEX color such as `0073CF`.
`data-title="0"`	Hides the embed's title when the containing page already supplies it.
`data-width`	Sets the minimum width in pixels. Without a width, the embed takes up 100% of its container's width.
`data-height`	Sets the minimum height in pixels. Without a height, the embed takes up 100% of its container's height.

The web interface provides a code helper and interactive preview for Share Links and Inboxes. Change the Show title, color, Height, and Width settings to update the preview and the code snippets you can copy to your website.

Multiple Embeds on One Page

Include initialization only once, then repeat the display segments for any combination of Share Links and Inboxes. Each segment has its own key and display options.

This example includes two Share Links and two Inboxes:

<body>
  <div id="filescom-root"></div>
  <script async defer src="https://jssdk.files.com/sdk/sdk.js"></script>

  <h2>First Share Link</h2>
  <div class="filescom-sharelink" data-key="FIRST_URL_KEY" data-site="SUBDOMAIN.files.com"></div>

  <h2>Second Share Link</h2>
  <div class="filescom-sharelink" data-key="SECOND_URL_KEY" data-site="SUBDOMAIN.files.com"></div>

  <h2>First Inbox</h2>
  <div class="filescom-inbox" data-key="FIRST_INBOX_KEY" data-site="SUBDOMAIN.files.com"></div>

  <h2>Second Inbox</h2>
  <div class="filescom-inbox" data-key="SECOND_INBOX_KEY" data-site="SUBDOMAIN.files.com"></div>
</body>

When a Share Link has an associated Inbox, embedding the Share Link includes the Inbox automatically. Do not add a separate display segment for that associated Inbox.

Embedding the Inbox itself does not include any Share Links associated with it.

If the Embed Does Not Display

Check that the page includes both initialization and display code. If both are present but the embed is blank or only partly working, check the website's Content Security Policy for blocked scripts, frames, or connections.