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.
There are two segments of HTML code that need to be placed into your web page's HTML.
First Code Segment
The first segment should be placed at the beginning of the <body> element of your web page:
<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:
<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.
Embedding Multiple Inboxes
You can also embed multiple Inboxes, using multiple instances of the second code segment, in the web page. For example:
<body>
<h2>First Inbox</h2>
<p><div class="filescom-inbox" data-key="FIRST_INBOX_KEY" data-site="SUBDOMAIN.files.com"></div></p>
<h2>Second Inbox</h2>
<p><div class="filescom-inbox" data-key="SECOND_INBOX_KEY" data-site="SUBDOMAIN.files.com"></div></p>
</body>
When embedding multiple Inboxes, do not include multiples copies of the first code segment.
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.