Can our customers upload and send images via our website?

Knowledgebase Articles: Can our customers upload and send images via our website?

A third party service 'SendThisFile' provides an ability for website owners to have a form through which files can be uploaded and sent to a website owner via their site.

To be able to add such a form to your website you should go to 
http://www.sendthisfile.com/info/sendthisfile.jsp and register for a free account.

Once you have done that, please log into your newly created account and go to Send Files > FileBoxes . Here you will be offered to create a filebox. To add the corresponding upload form to your site, you will need to add the code snippet you are provided with to the required site page(s).

Below is an example of how this functionality can be used on your website.

If you're selling photos on canvas, for instance, you will need to get the images from your customers. In this case you could do the following:

1. Go to Manage Website > Edit Website

2. Select the Product Details page in the Website Map tree and switch to the Edit Page tab. Drag a HTML section and place it under the Product Details section

3. Open the HTML page section in edit mode and enter the code snippet.

3.1. The code snippet you get from SendThisFile will look like this:

<!-- SendThisFile FileBox v3.02 (domain_name.com) -->
<table cellspacing=0 cellpadding=3 style="font-family: verdana, arial; font-size: 10px;">
<tr><td align="center"><iframe src="https://www.sendthisfile.com/filebox/index.jsp?widgetcode=naRUlcmgd3UW06sIwO55d" marginwidth=0 marginheight=0 width="" height= scrolling="no" frameborder=0></iframe></td></tr>
<tr><td align="center">Powered by: <a href="http://www.sendthisfile.com/">SendThisFile</a></td></tr>
</table>
<!-- SendThisFile FileBox v3.02 -->

From this snippet you should cut the line in bold, i.e.  src="https://www.sendthisfile.com/filebox/index.jsp?widgetcode=naRUlcmgd3UW06sIwO55d" 

3.2. The code snippet we provide is:

<div id="sendThisFile" style="display: none">
<div class="hidden"></div>
    <div class="popup">
        <table width="100%" border="0">
        <tr><td>
            <div class="placeholder" style="width: 500px; height: 400px; background: #8c8c8c;">
        <span class="close"></span>
                <iframe src="https://www.sendthisfile.com/filebox/index.jsp?widgetcode=naRUlcm4rgdE6UW06sUwO55d" marginwidth="0" marginheight="0" width="500px;" height="400px;" scrolling="no" frameborder="0"></iframe>
            </div></td></tr>

    </table>
    </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
if($("#upload-image").html() != null){
    $("#upload-image").css({'cursor':'pointer', 'text-decoration':'underline'});
        $("#upload-image").live("click", function(){
            $('#sendThisFile').css('display', 'block');
        });
    $(".popup *").live("click", function(){
            $('#sendThisFile').css('display', 'none');
    });
}   
});
</script>

Where the line in bold (src="https://www.sendthisfile.com/filebox/index.jsp?widgetcode=naRUlcm4rgdE6UW06sUwO55d") should be replaced by the corresponding line from the code snippet you got from SendThis.

4. Paste the modified code snippet provided by us and click Done to save changes.

5. After that please go to Manage Products, open a product in the edit mode and add instructions on how to upload the images on the site to the product full description, e.g.:

"Upload and send your image(s) to us using our upload tool. Please specify your full name, email address or phone number in the message box so we could identify your images with your order. Once we have your image we will contact you to discuss it further if required."

Where upload tool should be a link which opens the SendThisFile pop-up window. To make it a link, please click on the View HTML button



and enter <span id="upload-image"> before the word "upload" and </span> after the word "tool":



Click Done to save changes.

6. Repeat these steps for all required products.

7. Click Done and publish the site for the changes to be applied online.


Online, the Product Details page will look like this:


After the link is clicked, the following window will appear:



The window is closed on the 'x' icon click. 


 

Have more questions? Submit a request

0 Comments

Article is closed for comments.