Wix integration

Wix is a popular platform for building and editing websites with a variety of third-party form integrations. Forms organize and collect information from a user and Uploadcare is there for you to help with any uploads. Although working in Wix doesn’t require coding abilities, in this tutorial we will make a use of Uploadcare widget within a simple HTML form.

See the Pen Uploadcare Widget & Simple Form by uploadcare (@uploadcare).

First things first

If you do not have an account yet you will need to start by creating it on the Uploadcare signup page. If you have trouble following any of the steps below be sure to checkout this detailed on-boarding guide.

Step 1 — Add HTML block to a canvas

Go to Wix editor and open your website. You are going to need the toolbox on the lefthand side — it has an HTML element that you can place on the page by clicking the plus sign and then Add more (see below)

Step 1. An HTML block

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

Step 2 — The shortest part

Click on the block you have just placed on the canvas and then click on “Enter Code” button. A neat settings box will open providing you with two options — the “Code” radio-button and the HTML code box. Please, put the code we made available to you earlier inside the block — see the picture

Step 2. A code block

Step 3 — You got it

Click Update.

Step 3 - Updated version

You can rearrange the order of blocks by moving them a layer up or down. You want to ensure the form is placed on to the up-most layer (Ctrl + Shift + → will do that), so no other elements placed on top are blocking the view when the dialog opens.

Step 3.1 - Results

We have just added the Uploadcare button to the Wix website. This method has however its limitations — Wix places an external HTML in a special iframe tag, which is not guaranteed to be responsive on all mobile devices. On the good side, with the official release of the new widget version starting from 3.0.0 a lot of those limitations will be gone. Keep an eye on our announcements — exciting things are coming!

Questions?

We're always happy to help with code or other questions you might have! Search our site for more information or send us an email!