# Add an Image Cropper to your Webflow site

Add an image cropper to your [Webflow](https://webflow.com) site and set image requirements like **crop aspect ratio and image target size**. Use CropGuide and receive better images.

Incorporating an image cropper into your Webflow site allows customers to fine-tune their uploads directly, **reducing the need for backend image adjustments**. This feature enhances the upload process, ensuring **images meet your design requirements with minimal effort**.

## Before we get started

An overview of what we need to follow the tutorial.

1. CropGuide enhances the default Webflow file upload field so we need a paid plan to be able to use the field.
2. We need to create a [CropGuide account](https://app.cropguide.io/Account/Register)

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:

```html
<script>
(function (w, d) {
    w.$cropguide = ['GFFFYQ'];
    var s = d.createElement('script');
    s.async = true;
    s.src = 'https://cdn.cropguide.io/l.js';
    d.head.append(s);
})(window, document);
</script>
```

Log in to the Webflow admin and select your site.

1. Click Page: Home and select the page you want to add CropGuide to.
2. Click `+` Add element
3. Click `</>` Embed
4. Copy the CropGuide script for your domain to the **Custom Code** field.
5. Click Save & Close

That's it! CropGuide will now load and transform images when they're added to a file upload field on your [Webflow](https://webflow.com) page.

You can adjust the behavior of CropGuide in the control panel for your domain, or you can [set custom instructions per field](/docs/configuration/).

Please feel free to [reach out to us](/contact/) if you have any questions.

[Learn more about CropGuide](/)

### Related content

* [Crop PAN Card Photos Before Upload on Webflow](/integrations/webflow/crop-photo-to-pan-card-size/)
* [Crop Cédula Photos Before Upload on Webflow](/integrations/webflow/crop-photo-to-cedula-size/)
* [Crop Identity Card Photos Before Upload on Webflow](/integrations/webflow/crop-photo-to-identity-card-size/)
* [Crop Aadhaar Card Photos Before Upload on Webflow](/integrations/webflow/crop-photo-to-aadhaar-card-size/)
* [Crop Passport Document Photos Before Upload on Webflow](/integrations/webflow/crop-photo-to-passport-document-size/)
* [Crop Circular Profile Pictures on Webflow](/integrations/webflow/crop-circle-profile-picture/)
* [Convert HEIC/HEIF to JPEG Before Upload on Webflow](/integrations/webflow/convert-heic-to-jpeg-before-upload/)
* [Compress User Images Before Upload on Webflow](/integrations/webflow/compress-user-image-before-upload/)

Our photo editing technology is trusted by amazing companies

* ![Dropbox](/static/assets/logos/dropbox.svg)
* ![Square](/static/assets/logos/square.svg)
* ![ConvertKit](/static/assets/logos/convertkit.svg)
* ![Funda](/static/assets/logos/funda.svg)
* ![Global](/static/assets/logos/global.svg)