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.
Embed Code
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.
Customizing the Design
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.
Embedding Multiple Share Links
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>
Troubleshooting Embedded Share Links
If you have added both the first code segment and second code segment to your site, but nothing is displayed when you visit the page, check your site's Content Security Policy to verify that it allows the script to run.