# Documentation

## Installation

### Web

Installing CropGuide is as easy as [creating a free CropGuide account](https://app.cropguide.io/Account/Register) and copy pasting the CropGuide script before the closing `</head>` tag on your website.

When you’re installing CropGuide on a platform like WordPress, or Shopify, you can use one of the [installation guides](#guides) 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>
```

When you copy the snippet above you’ll have to replace the pattern `'GFFFYQ'` with your personal access key shown on your customer dashboard.

### Apps

When you’re building an app and don’t want to add the `<script>` tag to your app template you can install the [@cropguide/browser](https://www.npmjs.com/package/@cropguide/browser) module instead.

You can then use CropGuide like this.

```js
import CropGuide from '@cropguide/browser';

CropGuide('GFFFYQ', {
    // CropGuide options
    // ...
})
    .then(() => {
        // CropGuide init fired
    })
    .catch((err) => {
        // Something went wrong during client load
    });
```

### Content Security Policy

You’ll need to add the following keywords to your CSP to use CropGuide.

```bash
script-src https://cdn.cropguide.io;
connect-src https://app.cropguide.io;
img-src blob:;
worker-src blob:;
```

Our editor requires the `blob:` scheme for the `img-src` and `worker-src` directives, it uses blob URLs to read image sizes and to run code on separate threads.

### Guides

We’ve set up guides for various popular platforms to help you install CropGuide quickly, see below for all available installation guides.

#### No-Code Tools

* [Squarespace](/integrations/squarespace/)

* [Umso](/integrations/umso/)

* [Carrd](/integrations/carrd/)

* [Webflow](/integrations/webflow/)

* [Wix](/integrations/wix/)

* [Weebly](/integrations/weebly/)

* [Shopify](/integrations/shopify/)

* [Bubble](/integrations/bubble/)

#### JavaScript Libraries

* [FilePond](/integrations/filepond/)

* [Uppy](/integrations/uppy/)

* [DropzoneJS](/integrations/dropzonejs/)

* [File Request Pro](/integrations/file-request-pro/)

* [jQuery File Upload](/integrations/jquery-file-upload/)

* [Fine Uploader](/integrations/fine-uploader/)

* [Shield UI Upload](/integrations/shield-ui-upload/)

* [React Dropzone](/integrations/react-dropzone/)

* [Plupload](/integrations/plupload/)

* [Flow](/integrations/flow/)

* [Vue Upload Component](/integrations/vue-upload-component/)

* [Meteor Files](/integrations/meteor-files/)

* [File Upload Vue](/integrations/file-upload-vue/)

#### Content Management

* [WordPress](/integrations/wordpress/)

* [Netlify CMS](/integrations/netlify-cms/)

* [Joomla](/integrations/joomla/)

* [Drupal](/integrations/drupal/)

* [nopCommerce](/integrations/nopcommerce/)

* [Umbraco](/integrations/umbraco/)

* [Optimizely](/integrations/optimizely/)

* [Kentico](/integrations/kentico/)

* [Orchard Core](/integrations/orchard-core/)