• Home
  • About Us
  • FAQs
  • iOS SDK
  • Android SDK
  • Web SDK
  • Web Widget Demo
  • Products
  • Contact Us
PRYYNT YY Logo
  • en-gb
  • Products
  • About Us
  • FAQs
  • Contact Us
  • Home
  •   
  • Website Integration

Website Integration

WEB  IOS  ANDROID

 

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:

  • en-gb - English (British)
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:

  • EUR
  • GBP
  • USD
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:

  • top right
  • top left
  • middle right
  • middle left
  • bottom right
  • bottom left
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:

  • top right
  • top left
  • middle right
  • middle left
  • bottom right
  • bottom left
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.


We use cookies to ensure that we give you the best experience on our website - Find out more

  • Home
  • About Us
  • FAQs
  • iOS SDK
  • Android SDK
  • Web SDK
  • Web Widget Demo
  • Cookies
  • User Terms & Conditions
  • Partner Terms & Conditions
  • SIGN UP FOR FREE
  • Facebook
  • Twitter
  • Instagram
  • Google+
  • Linkedin
Contact Us

We'd love to hear from you. If you have any questions or feedback. Please fill out our

Contact Form © PRYYNT 2021