We are releasing a whole new suite of embed codes and integration options both for file upload and download functionality.
Basic integration requires only a wrapper div element and our script:
<div data-filemail-widget="uploader" data-company-id="11111111" id="myUploader"></div>
<script type="text/javascript" src="https://www.filemail.com/widgets/embed"></script>
The script will automatically initialize all divs that have the attribute data-filemail-widget on them. The value of the attribute controls what kind of widget it will become.
You can also initialize our widgets on your own via Filemail JS api. This means that integrating our widgets in any kind of CMS with dynamic page loading (SquareSpace, WithoutCode, WIX etc.) is now straightforward - in any environment. Example code that you put into your page:
<div data-filemail-widget="uploader" data-company-id="11111111" id="myUploader"></div>
Now make sure you also import our embed script - you can do it directly in the page, or in some cases the CMS allows you to specify what scripts to load globally:
<script type="text/javascript" src="https://www.filemail.com/widgets/embed/uploader?autoinit=false"></script>
The "autoinit=false" parameter will instruct Filemail to wait for manual widget initialization when a dynamic page loads. When a page is loaded simply call this piece of code:
window.Filemail.widget.init('#myUploader')
It's now possible to have multiple widgets on one page and configure each one of them in a very intuitive way:
<div data-filemail-widget="uploader" data-company-id="11111111" data-to="alicia@example.com" class="uploader-class"></div>
<div data-filemail-widget="uploader" data-company-id="11111111" data-to="steve@example.com" class="uploader-class"></div>
Notice the custom css class "uploader-class" - with this in place you can initialize all of them in one go:
window.Filemail.widget.init('.uploader-class')
EventListener
If you for some reason would want to have the transferid or download-url reported to your page after the transfer is completed, you can add an EventListener as follows:
window.addEventListener('message', function (e) {
var payload = JSON.parse(e.data);
if (payload.command === 'uploadcomplete') {
console.log('UPLOADED', payload.data);
}
}Which will give you the following response.
We also removed unnecessary dependencies on 3rd party libraries in the integration logic. The new embed codes are lighter and more performant when it comes to the initialization phase - meaning that the integration will feel even smoother to end-users.
Head to https://www.filemail.com/settings#integration to get your embed codes. Happy integrating!