Embedding a Share Link Within a Web Page
You may want to publish a Share Link directly within your own web page so that you don't need to publish a URL for a domain your users won't recognize. For example, maybe your Share Link supports uploading, but there's supplemental instructions you need to give your users about the files that need to be uploaded. While you can add a public description to your link for simple instructions, more in-depth information may need additional attached images or videos or other specialized design. Embedding the Share Link within your own custom page lets you add extra flair to your Share Link.
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-sharelink" data-key="URL_KEY" data-site="SUBDOMAIN.files.com"></div>
In the second segment, replace URL_KEY with the corresponding URL key of the Share Link and replace SUBDOMAIN with your site's subdomain.
The <DIV> of the second code segment can be customized with data properties to change the look of the Share Link. You can 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 can change the main color used for certain buttons on the Share Link page by with the data-color property of the <DIV> element. This element accepts a standard hex color code.
Adding data-title="0" to the div will hide the title of the Share Link. This cuts down on visual noise 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.
<BODY>
<H2>First Share Link</H2>
<P><div class="filescom-sharelink" data-key="FIRST_URL_KEY" data-site="SUBDOMAIN.files.com"></div></P>
<H2>Second Share Link</H2>
<P><div class="filescom-sharelink" data-key="SECOND_URL_KEY" data-site="SUBDOMAIN.files.com"></div></P>
</BODY>
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