Add an Image Editor to your Webflow site
Add CropGuide to your Webflow forms, set image requirements, and receive better images.
Webflow is an in-browser design tool that gives you the power to design, build, and launch responsive websites visually. It’s an all-in-one design platform that you can use to go from the initial idea to ready-to-use product.
With all its features it however doesn't offer image cropping capabilities to your end-users and that's where CropGuide can help out.
Before we get started
An overview of what we need to follow the tutorial.
- CropGuide enhances the default Webflow file upload field so we need a paid plan to be able to use the field.
- We need to create a CropGuide account
Ready? Then let's install CropGuide
Installing CropGuide
Log in to CropGuide and add your domain to the control panel.
The control panel will generate a unique script for your domain similar to the one shown below:
<script defer src="https://cdn.crop.guide/loader/l.js?c=123ABC">
</script>
Log in to the Webflow admin and select your site.
-
Click Page: Home and select the page you want to add CropGuide to.
-
Click
-
Click
-
Copy the CropGuide script for your domain to the Custom Code field.
-
Click
That's it! CropGuide will now load and transform images when they're added to a file upload field on your Webflow page.
You can adjust the behavior of CropGuide in the control panel for your domain.
Please feel free to reach out to us if you any questions.
Our photo editing technology is trusted by amazing companies