--- a/doc/src/site/markdown/client-integration.md	Thu Oct 17 16:04:30 2013 +0200
+++ b/doc/src/site/markdown/client-integration.md	Fri Oct 18 17:43:32 2013 +0200
@@ -6,11 +6,55 @@
 2. enable digilib interactive controls inside a fixed size image ("embedded mode")
 3. let the interactive image fill the browser window ("fullscreen mode")
 
-## Using the static image ##
+## Using a static digilib image ##
+
+Insert an image reference into your html code, referencing the "Scaler" servlet path in your digilib environment (servlet/Scaler, relative to your context). The image filename and path are specified in the `fn` parameter of the querystring. 
+
+    <img
+        src="http://your.imagerserver.org/digilib/servlet/Scaler?fn=/yourimage.jpg&dw=100&dh=100">
+    </img>
+
+Don't forget to specify at least one of the `dw` and `dh` parameters! They inform the servlet about the desired size (in pixel) of the scaled image. Otherwise you'll get an error image.
+
+Any other parameters can be added to the query string in order to specify further transformations of the image, for instance zoom-in coordinates, rotation, color changes etc. Look [here](scaler-api.html) for more information about query string parameters.
 
+An example file called _static.html_ is provided in your digilib context root directory.
 
+## Using digilib images in embedded mode ##
+
+To embed one or more scaled images with controls into your site, add one `div` element for each image to your HTML code. Set the image to load and its size in the scaler parameters `fn / pn` and `dw / dh`. These will be picked up by Digilib.
+
+        <div class="mydiv">
+            <img src="servlet/Scaler?dw=200&amp;dh=200&amp;fn=/p0005" />
+        </div>
+
+Apart from jQuery and jquery.digilib.js (the digilib plugin for jQuery) the digilib plugins `geometry` and `buttons` are needed. They must be loaded _after_ digilib. See [plugins](plugins.html) for the plugin documentation.
 
-## Using digilib embedded mode ##
+        <script type="text/javascript" src="jquery/jquery.js"></script>
+        <script type="text/javascript" src="jquery/jquery.digilib.js"></script>
+        <script type="text/javascript" src="jquery/jquery.digilib.geometry.js"></script>
+        <script type="text/javascript" src="jquery/jquery.digilib.buttons.js"></script>
+
+Add a jQuery `ready` event handler for the Javascript `document` object. In the handler the initialization function `digilib()` should be called. Set the `ìnteractionMode` option to "embedded" and the `digilibBaseUrl` option to the digilib context path.
 
+        <script type="text/javascript">
+            $(document).ready(function(){
+                var options = {
+                    interactionMode : 'embedded',
+                    digilibBaseUrl : '/digilib'
+                    };
+                $('.mydiv').digilib(options);
+        </script>
 
-## Using digilib fullscreen mode ##
\ No newline at end of file
+For the standard controls (contained in the buttons plugin) to be displayed next to the image, the <div> should have a `position: relative` CSS property and a fixed width.
+
+        div.mydiv {
+            position: relative;
+            width: 250px;
+        }
+
+An example file called _embedded.html_ is provided in your digilib context root directory.
+
+## Using digilib fullscreen mode ##
+
+An example file called _digilib.html_ is provided in your digilib context root directory.