Getting started

Quick start.

1. Sign in to the Partner Site using your login and password:

Log in page

2. Add your site to Site List:

To connect your site to the Sites page, click on the Pen Icon, enter the URL of the site you want to connect in the Site URL field, and add the Copyright Type from the fields. Then press the Add Site button.

Add site button

3. Copy initialization code

The script

4. Embed the script to your site.

The code should be integrated into the user's website's HTML code in strict order. The right order prevents issues such as the script trying to access elements that haven't been loaded yet.

1. <div> should be placed where the plugin is supposed to be rendered.

<div id="printlean"></div>

2. main script should be placed at the bottom of the page, before the closing </body> tag and after <div id="printlean"></div>.

3. backgroundURL value should be changed to the image url.

code example
backgroundURL: '"https://c4.wallpaperflare.com/wallpaper/611/838/413/spiderman-hd-4k-superheroes-wallpaper-preview.jpg'

The way code is added

The code should be integrated into the user's website's HTML code in strict order: 

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title></title>
</head>
<body>

<!-- first put div for a slider -->
<div id="productSlider"></div>

<!-- then add slider script -->
<script src="https://printlean.com/widgets/slider.min.js"></script>

<!-- then init slider -->
<script>
 ProductSlider({
     rootID: 'productSlider',
     apiKey: 'your-api-key',
     sliderType: 4,
     backgroundURL: 'https://printlean.com/store/img/photo-gallery/1.jpg',
     sliderPerView: {
         1200: 4,
         992: 3,
         768: 3,
         320: 1.5,
     },
     imageLogo: true,
     hideTitle: true,
     hidePrice: true,
     priceColor: '#dddddd',
     type5options: {
         color: 'red',
         bgColor: '#ddd',
         buttonText: 'print width'
     },
     bgToAll: true,
     allButton: {
         buttonText: 'See All Products',
         buttonColor: '#5ab6f8'
     }
 });
</script>

</body>
</html>

You can customize plugin by changing default setting. For more go to ProductSlider API

PreviousWhat is PrintLean?NextSet up CORS

Last updated