Documentation

Embedding an Inbox Within a Web Page

Inboxes can be embedded within web pages so you can present an interactive Inbox to the audience of your own website.

To embed an Inbox, you need the Inbox key that you specified when you created the Inbox.

Two Code Segments Must Be Included on Your Page

Embedding an Inbox requires two segments of HTML in your web page. Both are required. If either segment is missing, the Inbox does not display, or it displays an error message.

First Code Segment

Place the first segment at the beginning of the <body> element of your web page. This segment loads the code that your page uses to communicate securely with Files.com.

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

Place the second segment anywhere within the <body> element of your web page, including within sub-elements such as <p> paragraphs and <table> tables. This segment determines where the Inbox displays within your page.

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

Replace INBOX_KEY with the corresponding Inbox Key of the Inbox and replace SUBDOMAIN with your Files.com custom subdomain.

Content Security Policy May Block Embeds

If you have added both the first code segment and second code segment to your page, but nothing displays when you browse to it, check your site's Content Security Policy to verify that it allows the script to run.

Embedding Multiple Inboxes

You can embed multiple Inboxes by using multiple instances of the second code segment in the web page.

When embedding multiple Inboxes, do not include multiple copies of the first code segment.

Below is an example that embeds two different Inboxes.

<body>
<!--- Always Include This Segment to Initialize the Script --->
<div id="filescom-root"></div>
<script async defer src="https://jssdk.files.com/sdk/sdk.js"></script>

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

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

</body>

You can include embedded Inboxes and embedded Share Links on the same page of a website. The first code segment that loads the script is identical, and you include it only once. You then include the second code segment, which uses class filescom-inbox or filescom-sharelink depending on which type is being added.

Share Links offer the ability to associate an Inbox with the Share Link. When the Share Link is embedded in a web page, the associated Inbox is automatically included. You don't need to provide a separate code segment to include the Inbox.

If an Inbox is linked to one or more Share Links, embedding the Inbox in a web page does not automatically include any of the Share Links it's linked with.

Visual Helper for Embedding Inboxes

You can access the code snippets, options for embedding, and an interactive preview of an Inbox through the web interface. On this tab, you can change several of the display settings, and the changes immediately update both the preview of your Inbox and the code snippets you can copy for your own site.

Un-checking the Show title checkbox updates the preview of your Inbox to hide the title.

You can change the main color used for certain buttons on the Inbox page by typing in a hex code value or clicking on the color swatch to select a new color.

The Height setting allows you to set a minimum height, in pixels, for the embedded Inbox div element. If you do not specify a height, the contents take up 100% of the height of the div element's container.

The Width setting allows you to set a minimum width, in pixels, for the embedded Inbox div element. If you do not specify a width, the contents take up 100% of the width of the div element's container.