uploadcaredocs

Wix integration
20 Minutes to Integrate

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 we begin

Before proceeding with the integration, let’s make sure everything is in place:

  1. Wix account.
  2. Uploadcare account.
  3. Uploadcare free API keys.

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.

Step 1. Add HTML block to canvas

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.”

Choose “HTML Code”

Place the element in your working area and make sure the block width is at least 760px.

Step 2. Add Uploadcare Widget

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>

<fieldset>
  <legend>Submit Your Question</legend>
  <form>
    <p>
      <label for="email">E-mail</label>
      <input type="email" id="email" name="email"/>
    </p>
    <p>
      <label for="question">Your question</label>
      <textarea id="question" name="question"></textarea>
    </p>
    <p>
      <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" />

    </p>
    <p>
      <button type="submit">Submit</button>
    </p>
  </form>
</fieldset>

Paste code under “Add your code here (HTTPS only)” label

The 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.

Step 3. You got it

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.

Conclusion

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.

We’re always happy to help with code, integration, and other stuff. Search our site for more info or post your question in our Community Area.