PoppyScroll Documentation
By Axel Hardy

Thanks for purchasing PoppyScroll. This page is a documentation that will help you to set up PoppyScroll on your website in just a few minutes.
In case you need some help or something is not working, feel free to message me from my CodeCanyon profile page.

Step 1 - Set up the Required Files

The first thing you need to do is to simply transfer the content of the "Files" folder (in the ZIP you downloaded on CodeCanyon) to your web server (via FTP). This should add these files to your server :

You can place these files in other folders but you will then have to change their path in your code.

Step 2 - Importing the Files in your Code

In this step, you just need to paste two lines of code in the page where you want PoppyScroll to appear.

  1. Paste this line along with your other CSS files between <head> and </head> :

    <link rel="stylesheet" href="css/poppyscroll.css">

  2. OPTIONAL PoppyScroll requires jQuery to work. If you don't already use it on your website, place this line of code just above the </body> tag :

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  3. Paste this line below your jQuery script :

    <script src="js/poppyscroll.js" type="text/javascript"></script>

Step 3 - Basic PoppyScroll Configuration

Now that everything is set up, let's try to implement the most basic PoppyScroll configuration in your website. Just paste this code after the Javascript files you imported in step 2, so just above the </body> tag :

<script>
$.poppyscroll({
    content: "My Awesome Content Goes Here"
});
</script>

With this code, you should see the very basic PoppyScroll version appearing in the bottom right area of your screen.

Step 4 - Customizing PoppyScroll

First of all, here is the code of PoppyScroll with all of the possible options. 

$.poppyscroll({
	content: "Your content with some HTML if you want...",
	scrolling_threshold: 15,
	position: "bottom_left",
	close_button: true, 
	close_button_position: "right",
	always_close: false,
	bg_color: "#FFF",
	text_color: "#333",
	border_width: 1,
	border_color: "#CCC",
	border_radius: 4, 
	box_shadow: true,
	full_width: false,
	width: 500,
	padding: 10
});

Now, let's detail each option and the possible values one by one so you know what does what.

Help & Support

Do you need some help or are you facing any issue with PoppyScroll? If it's the case, feel free to message me directly from my CodeCanyon profile and I will be more than happy to help!