Webflow integration

Webflow allows building production-ready, responsive websites without any coding skills required. Webflow lets you accomplish most aspects of web development and website distribution via a visual editor providing pixel-to-pixel precision.

With a little help from Uploadcare, you can allow Webflow site users to upload any media using a simple button.

Before we begin

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

  1. Webflow 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 scripts with Uploadcare Widget

Open your Webflow dashboard and hit “site settings.”

Copy the following code snippet.

<script>UPLOADCARE_PUBLIC_KEY = 'YOUR_PUBLIC_KEY';</script>
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js" data-integration="Webflow"></script>

Go to the custom scripts tab, paste the script there, set your public key and hit “Save”.

If you want to customize the look of your widget, you can add custom CSS here as well.

Step 2. Add an input field to your Webflow site

Open your website in the Webflow Designer and add a form block to the page where you want to add the upload button.

If you already have a form, open it in the designer and proceed to the next step.

Step 3. Bind Uploadcare Widget to a form input

Add a custom attribute to a new or existing text input which outputs as role="uploadcare-uploader" to allow the widget to work in your form.

Hide that input by giving it a specific class, “hide,” for instance. Then, set it to display none in the Webflow editor.

Conclusion

That’s it! Feel free to ask any questions on the Webflow Code Help forum.

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.