Embedding an Inbox Within a Web Page
Inboxes can be embedded within web pages, allowing you to present an interactive Inbox to the audiences of your own web sites.
To embed an Inbox, you'll need the Inbox key that you specified when you created the Inbox.
Two Code Segments Must Be Included on Your Page
To embed inboxes, there are two segments of HTML code that must be included in your web page's HTML. Both segments are required on your web page; failing to include either segment will result in the inbox not displaying at all or displaying an error message.
First Code Segment
The first segment should be placed at the beginning of the <body> element of your web page. This segment is responsible for loading the code that will be used by your page to communicate securely with Files.com.
<div id="filescom-root"></div>
<script async defer src="https://jssdk.files.com/sdk/sdk.js"></script>
Second Code Segment
The second segment is placed anywhere within the <body> element of your web page, including within sub-elements such as <p> paragraphs and <table> tables. This segment is responsible for determining exactly where the inbox will be displayed 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 is displayed 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 also embed multiple Inboxes, using multiple instances of the second code segment, in the web page.
When embedding multiple Inboxes, do not include multiples copies of the first code segment.
Below is an example that embeds 2 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>
Embedding Share Links and Inboxes on a Single Page
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 can then include the second code segment , which will either use class filescom-inbox or filescom-sharelink depending on which type is being added.
Embedding Inboxes As Part of a Share Link
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 won't 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 a Inbox through the web interface. On this tab, you can change several of the display settings, which will 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 will update 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 will 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 will take up 100% of the width of the div element's container.
Get The File Orchestration Platform Today
4,000+ organizations trust Files.com for mission-critical file operations. Start your free trial now and build your first flow in 60 seconds.
No credit card required • 7-day free trial • Setup in minutes