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>
Parameter Name | Required | Default | Comments |
---|---|---|---|
application_id | Yes |
The application API key, which you can obtain here. |
|
language | No | en-gb |
The ISO-639-1 language code followed by the ISO 3166-1 alpha-2 country code, to be used in the PRYYNT widget. The below languages are currently available:
|
currency_code | No | USD |
The ISO-4217 currency code that will be used in the PRYYNT widget. All prices will be shown in this currency. The below currencies are currently available:
|
logo_size | No | 50 |
The size of the PRYYNT logo that by default sits on the middle-right edge of the browser's window, which when clicked opens the PRYYNT widget. This is specified in pixels and it’s a vector graphic, so its size can be safely increased or decreased. |
position | No | middle right |
The position of the PRYYNT logo which when clicked opens the PRYYNT widget. The possible options are:
|
upload_logo_size | No | 130 |
The size of the PRYYNT hover over button that appears on every image, letting the user add that image into the PRYYNT widget. This is specified in pixels. |
upload_button_position | No | top right |
The position of the hover over button that appears on top of images. The possible options are:
|
hover_mode | No | true |
If this is set to false the hover over buttons will not appear over any images. In addition the drag’n’drop functionality will be disabled. Essentially users will only be able to upload images from their computer or device. |
exclude_hyperlinked_images | No | true |
If this is set to true the PRYYNT hover over button will not appear over any hyperlinked images. |
enable_drag_and_drop | No | true |
If this is set to false users will not be able to drag and drop images into the PRYYNT widget but they will still be able to add images by clicking the PRYYNT hover over button. Consider setting this to false to avoid conflicts with jQuery UI. |
min_width_for_hover | No | 200 |
The minimum image width (in pixels) required in order for the PRYYNT hover over button to appear. |
min_height_for_hover | No | 200 |
The minimum image height (in pixels) required in order for the PRYYNT hover over button to appear. |
only_use_pryynt_data | No | false |
If this is set to true only images that have the pryynt-data attribute will show the hover over button. Essentially you can create a whitelist of images, those with the pryynt-data attribute, blacklisting all other images. |