Wix is a platform for building and editing websites. It provides a variety of third-party form integrations. Forms organize and collect data submitted by users, and Uploadcare allows submitting media via forms. Generally, using Wix doesn’t require any coding skills, but in this tutorial, we will use some to add Uploadcare Widget to a simple HTML form.
Before proceeding with the integration, let’s make sure everything is in place:
Once you create an Uploadcare account, navigate to your dashboard to create a new project or discover API keys for an existing one. You will need a public key: it defines a target project user uploads will go to.
If you plan uploading non-image content, add billing info to your account.
Go to the Wix editor and open your website. Place an HTML element on your page by using a toolbox on the lefthand side: hit the plus sign and “Add.”
Place the element in your working area and make sure the block width is at least 760px.
Select the block you have just placed and hit the “Enter Code” button. A settings box will appear providing you with the two options: “Code” radio-button and HTML code box. Copy the following code and paste it there. Set your public key. Set your public key.
<script>UPLOADCARE_PUBLIC_KEY = 'YOUR_PUBLIC_KEY';</script>
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js" data-integration="Wix"></script>
<legend>Submit Your Question</legend>
<input type="email" id="email" name="email"/>
<label for="question">Your question</label>
<textarea id="question" name="question"></textarea>
<label for="images">Your images</label>
<input type="hidden" id="images" name="images"
role="uploadcare-uploader" data-clearable data-images-only data-crop="free,2:3,4:3,16:9" />
data-images-only option sits in the widget config to provide a fail-safe experience when working with accounts on the Free plan with no billing info added: those only allow image uploads.
Hit “Update,” and you are there with the widget integration.
You can rearrange the order of blocks by moving them a layer up or down. Ensure your form is in the upmost layer (Ctrl + Shift + → will do that), so no other elements are blocking the view upon the dialog activation.
That’s it, you have just added an Uploadcare button to your Wix website. The described method has its limitations, however. Wix puts external HTML in the
<iframe> tag which is not guaranteed to be responsive across devices.