Skip to main content
Documentation

Embedding a Share Link Within a Web Page

Embedding a Share Link directly within your own web page lets visitors interact with the Share Link without leaving your site. You don't need to publish a URL for a domain your users won't recognize, and you can place the interactive Share Link alongside your own design elements. See common use cases for embedding Share Links for situations where this approach fits.

Required Code Segments

Embedding a Share Link requires two segments of HTML in your web page. Both segments are required. Omitting either one causes the link to either not display or display 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>

Second Code Segment

Place the second segment 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 code segments 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.

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

If the colors of your Files.com site don't match the embedding site, change the main color used for certain buttons on the Share Link page with the data-color property of the <div> element. This property 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 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 width, the contents 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. If you do not specify a height, the contents take up 100% of the height of the <div> element's container.

You can embed multiple Share Links in a single HTML page, using multiple instances of the second code segment. When embedding multiple Share Links, include the first code segment only once.

Here is an example that embeds two 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>

Embedding Share Links on the Same Page as Inboxes

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. The second code segment 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 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.