Documentation

Embedding a Share Link Within a Web Page

Embedding a Share Link directly within your own web page means you don't need to publish a URL for a domain your users won't recognize, and it allows you to include the interactive Share Link along with other design elements.

There are 2 segments of HTML code that must be placed into your web page's HTML. Both segments are required on your web page; failing to include either segment will result in the link not displaying at all or displaying an error message.

First Code Segment

Place the first segment 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:

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

Replace URL_KEY with the corresponding URL key of the Share Link and replace SUBDOMAIN with your site's 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.

The <div> of the second code segment supports data properties to change the look of the Share Link. Use the properties make your embedded Share Link look more consistent with the site it's embedded in.

If the colors in use with your Files.com site don't match the embedded site, you change the main color used for certain buttons on the Share Link page with the data-color property of the <div> element. This element accepts a standard hex color code.

Adding data-title="0" to the div hides the title of the embedded Share Link. This cuts down on visual noise and prevents repeating the same information multiple times on the embedding page.

The data-width property accepts a number of pixels for the minimum width of the Share Link <div> element. If you do not specify a height, the contents will take up 100% of the width of the div element's container.

The data-height property accepts a number of pixels for the minimum height of the Share Link <div> element.

You can embed multiple Share Links in a single HTML page, using multiple instances of the second code segment.

When embedding multiple share links, do not include multiples copies of the first code segment.

Here is an example that embeds 2 different links.

<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 Share Link</h2>
<!--- First Share Link display --->
<p><div class="filescom-sharelink" data-key="FIRST_URL_KEY" data-site="SUBDOMAIN.files.com"></div></p>

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

</body>

Just as you can embed multiple Share Links 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.

Share Links offer the ability to associate an Inbox with the Share Link to allow visitors to upload. 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.

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.

Start My Free Trial Request a Demo

No credit card required • 7-day free trial • Setup in minutes