Update documentation

index.html

@@ -190,12 +190,29 @@ <h2>Example</h2>
  &lt;/button&gt;
 
 </code></pre>
-                        <p>Result:</p>
+            <p>Result:</p>
 
 						<button type="button" onclick="printJS({ printable: 'printJS-form', type: 'html', header: 'PrintJS - Form Element Selection', css: ['/assets/css/main.css?v1'] })">
 							Print Form with Header
 						</button>
 
+						<hr/>
+
+						<p>Print.js accepts an object with arguments. Let's print the form again, but now we will add a footer to the page:</p>
+
+<!-- html code -->
+<pre><code data-language="html">
+ &lt;button type=&quot;button&quot; onclick=&quot;printJS({ printable: 'printJS-form', type: 'html', footer: 'PrintJS - By Crabbly' })&quot;&gt;
+    Print Form with Footer
+ &lt;/button&gt;
+
+</code></pre>
+						<p>Result:</p>
+
+						<button type="button" onclick="printJS({ printable: 'printJS-form', type: 'html', footer: 'PrintJS - By Crabbly' })">
+							Print Form with Footer
+						</button>
+
 					</section>
 				</div>
 			</div>
@@ -303,6 +320,22 @@ <h2>Example</h2>
 					</div>
 					</section>
 
+					<section>
+						<p>You can also add a footer to the image being printed:</p>
+
+<pre><code data-language="generic">
+ printJS({printable: 'images/print-01-highres.jpg', type: 'image', footer: 'My cool image footer'})
+
+</code></pre>
+
+						<div>
+							<p>Result:</p>
+							<button onclick="printJS({printable: 'images/print-01-highres.jpg', type: 'image', footer: 'My cool image footer'});return false;">
+								Print Image With Footer
+							</button>
+						</div>
+					</section>
+
 					<section>
 						<p>To print multiple images together, we can pass an array of images. We can also pass the style to be applied on each image:</p>
 
@@ -469,6 +502,36 @@ <h2>Example</h2>
 									})">
 							 Print JSON with raw HTML header
 						 </button>
+
+						<hr/>
+
+						<p>JSON, HTML and Image print can receive a raw HTML footer:</p>
+
+						<pre><code data-language="html">
+&lt;button type=&quot;button&quot; onclick=&quot;printJS({
+		printable: someJSONdata,
+		type: 'json',
+		properties: ['name', 'email', 'phone'],
+		footer: '&lt;h3 class="custom-h3"&gt;My custom footer&lt;/h3&gt;',
+		style: '.custom-h3 { color: red; }'
+	  })&quot;&gt;
+	Print footer raw html
+&lt;/button&gt;
+
+ </code></pre>
+						<p>Result:</p>
+
+						<button
+							type="button"
+							onclick="printJS({
+								 	 footer: `<h3 class='custom-h3'>My custom footer</h3>`,
+									 printable: someJSONdata,
+									 properties: ['name', 'email', 'phone'],
+									 type: 'json',
+									 style: '.custom-h3 { color: red; }'
+									})">
+							Print JSON with raw HTML footer
+						</button>
 
 
 					</section>
@@ -569,6 +632,16 @@ <h2 id="configuration">Configuration</h2>
 								<div class="g1">'font-weight: 300;'</div>
 								<div class="g2">Optional header style to be applied to the header text.</div>
 							</div>
+							<div class="grid-row">
+								<div class="g1">footer</div>
+								<div class="g1">null</div>
+								<div class="g2">Optional footer to be used with HTML, Image or JSON printing. It will be placed on the bottom of the page. This property will accept text or raw HTML.</div>
+							</div>
+							<div class="grid-row">
+								<div class="g1">footerStyle</div>
+								<div class="g1">'font-weight: 300;'</div>
+								<div class="g2">Optional footer style to be applied to the footer text.</div>
+							</div>
 							<div class="grid-row">
 								<div class="g1">maxWidth</div>
 								<div class="g1">800</div>