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.
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>
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.
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.
You can access the code snippets, options for embedding, and an interactive preview of a Inbox through the web interface. Navigate to the list of Inboxes, select your link, and then navigate to the Embedding sub-tab.
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 Instant Access to Files.com
The button below will take you to our Free Trial signup page. Click on the white "Start My Free Trial" button, then fill out the short form on the next page. Your account will be activated instantly. You can dive in and start yourself or let us help. The choice is yours.
Start My Free Trial