Website Integration

What is the PRYYNT JS SDK?

Our JavaScript SDK allows you to add the PRYYNT widget onto your website in a few seconds! This will create a hover over button on every image on your website (by default only on images that are at least 200x200 pixels) as well as a PRYYNT widget from where your users will be able to order prints. To integrate please follow the simple steps below.

Step 1

Copy the JavaScript code snippet below into the HTML code of your website. We recommend that you paste this just before the closing </body> tag.

<script src="https://plugin.pryynt.com/js/pryynt-plugin.min.js"></script>
<script type="text/javascript">
       PRYYNTPlugin({
              "application_id" : "YOUR_APP_KEY" 
       });
</script>

Step 2

Replace YOUR_APP_KEY with your application API key, which you can get here. Remember to enclose the API key in quotes, as shown above. Please note that each app or website has its own unique API key, so if you have registered several apps and websites with PRYYNT make sure you use the correct API key for each app or website.

Step 3

Select the products you want to make available to your users here. That's it! The PRYYNT widget will now be available on your website and you can start monetizing your images.

High Resolution Images

Every product that we offer has a minimum set of required DPI, width and height values for the image used. Images that don't meet the minimum requirements for a product won't be available for it but they will be available for other products, e.g. an image might be good enough for a postcard but not good enough for a canvas.

The PRYYNT widget will automatically recognise any image on your website that is larger than 200x200 pixels and create the hover over button on it. When the button is clicked the image specified in the src attribute will be lifted automatically. If you prefer us to lift a different image than that specified in the src attribute - possibly a high resolution version of that image - you can add an additional attribute pryynt-data in the HTML element.

In the example below hires-hello.jpg will be lifted instead of hello.jpg:

<img src="hello.jpg" pryynt-data="hires-hello.jpg">

No PRYYNT hover button over your images?

If you want your users to print images from your website but you prefer to not have the PRYYNT hover over button shown on them, you can set hover_mode = false and then directly call our upload method passing the URL of the image you want to upload. This will actually upload the image onto our servers and open the PRYYNT widget as usual.

As an example, you can create your own button and add an onclick event on it. When the button is clicked call our PRYYNTLoadImage(event, url) method passing the event itself and the URL to your image as parameters. In the example below we've created a link which when clicked will upload an image from the specified URL.

<a onclick="PRYYNTLoadImage(this.event, 'URL_TO_YOUR_IMAGE')">Click to Upload</a>

Advanced Configuration

The PRYYNT widget will work out-of-box by following the above steps but you can customize it further if you wish. Below is an example using all possible configuration variables.

<script src="https://plugin.pryynt.com/js/pryynt-plugin.min.js"></script>
<script type="text/javascript">
      PRYYNTPlugin({
            "application_id" : "YOUR_APP_KEY",
            "language" : "en-gb",
            "currency_code" : "USD",
            "logo_size" : 50,
            "position" : "middle right",
            "upload_logo_size" : 130,
            "upload_button_position" : "top right",
            "hover_mode" : true,
            "exclude_hyperlinked_images" : true,
            "enable_drag_and_drop" : true,
            "min_width_for_hover" : 200,
            "min_height_for_hover" : 200,
            "only_use_pryynt_data" : false
     });
</script>