Documentation

Take me to the deprecated v1 docs

Installation

Web

Installing CropGuide is as easy as creating a free CropGuide account 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 below.

<script>
(function (w, d) {
    w.$cropguide = ['abcd1234'];
    var s = d.createElement('script');
    s.async = true;
    s.src = 'https://dev-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 'abcd1234' 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 module instead.

You can then use CropGuide like this.

import CropGuide from '@cropguide/browser';

CropGuide('abcd1234', {
    // 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.

script-src ;
connect-src ;
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

JavaScript Libraries

Content Management