Feature: added integration guide

source/_static/js/virtusize.js

@@ -0,0 +1,2 @@
+$(function() {});
+

source/_templates/layout.html

@@ -0,0 +1,3 @@
+{% extends "!layout.html" %}
+
+{% set script_files = script_files + ["_static/js/virtusize.js", "_static/js/theme.js"] %}

source/ig/integration.rst

@@ -0,0 +1,178 @@
+Integration
+============
+
+**Dependencies**
+
+At this moment, the integration has only one dependency, jQuery 1.3 or later.
+If jQuery is not found on the page, the integration script will asynchronously
+load jQuery from the Google CDN (this will not slow down the page as it is done
+asynchronously and most clients already have it cached).
+
+**Asynchronous loading**
+
+All script loading is done asynchronously, minimizing the impact on the load
+speed of the product page. The integration snippet is inspired by the
+asynchronous loading done by Google Analytics, FB Connect, Google+ and others.
+In the unlikely event of Virtusize servers experiencing down time, the product
+page will not be impacted other than that the button won't show.
+
+.. _label-single-product-integration:
+
+Single Product Integration
+--------------------------
+
+Embedding the integration snippet
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+Integrating the Virtusize Widget requires embedding an integration
+script on the product page. The code is very similar to Google Analytics
+or Facebook Connect.
+
+.. gist:: https://gist.github.com/butschi/5619646
+
+.. note::
+    Note that line 5 defines an API key to use. The value within quotes should
+    be your actual API key that you get when you sign up for Virtusize.
+
+
+Positioning the button
+^^^^^^^^^^^^^^^^^^^^^^
+
+The position of the button is configured by including an empty div
+element with id "#vs-widget-button-container" anywhere on the product
+page.
+
+.. gist:: https://gist.github.com/butschi/5619736
+
+The button will be created inside the #vs-widget-button-container
+element. The integration script is responsible for creating the button.
+
+For the standard integration, the measurements are provided to Virtusize via
+the Virtusize admin interface (see :ref:`label-providing-measurements`), and
+the integration snippet only needs the unique product ID to identify what
+measurements to use.  That is what line 6 does. The value ``PRODUCT_ID`` should
+be the actual identifier of the product.
+
+.. note::
+    Note that for best results, the product id should be an identifier that
+    identifies the product regardless of size and color.
+
+No button will be visible on the product page until the integration snippet can
+find the measurements for the product (until they are provided to Virtusize via
+our admin or via the measurements feed).
+
+
+Multiple Product Integration
+----------------------------
+
+It is possible to have widget buttons for more than one product per page. This
+is needed for "Buy-this-outfit" kind of pages, for example.
+
+The integration is very similiar to the one for single product pages.  All you
+have to do, is supply the product ids and corresponding button position
+strategies, to indicate, which button is used for which product.
+
+The ``vsWidgetAsyncInit`` variable, that is a function in the single product
+case, also accepts an array of functions.
+
+.. gist:: https://gist.github.com/butschi/5619699
+
+Make sure the products exist in the Virtusize database and the button
+containers containers exist on your page.
+
+Assisted Integration
+--------------------
+
+Assisted integration is similar to our :ref:`label-single-product-integration`,
+but is stripped to the core. This integration is very easy, however it does
+require some work on our end. If you are interested in this integration, please
+`contact us <http://www.virtusize.com/contact>`_.
+
+.. gist:: https://gist.github.com/butschi/5620294
+
+Once you have embedded the integration snippet, contact us and we will
+activate your API key and set up additional parameters.
+
+
+Using a custom button
+---------------------
+
+You can use any DOM element on your website as the Virtusize button.
+This gives you full control over the design of the button.
+
+The Virtusize integration script still performs all product data and
+environment checks prior to showing the button. The button will behave
+the same way as the default one.
+
+.. note::
+    The button will be set to ``visibility: hidden;`` on load. Only when all
+    checks pass will the button be shown. To prevent some flickering that may
+    occur you can set the initial visibility of the button to hidden.
+
+
+Example integration:
+^^^^^^^^^^^^^^^^^^^^
+
+.. gist:: https://gist.github.com/butschi/5684927
+
+Here the convenience method ``setButton(…)`` is used. To find out what other
+methods exist on the VirtusizeWidget object, go to :ref:`label-javascript-api`.
+
+
+Staging Environment
+-------------------
+
+We have a staging environment that can be used during the development
+and testing phase. Just point the integration script to:
+
+::
+
+    staging.virtusize.com
+
+instead of:
+
+::
+
+    api.virtusize.com
+
+
+Here is a sample how to configure this so the environment is controlled
+by a variable:
+
+
+.. gist:: https://gist.github.com/jtsoi/2173ec22f70e8eee5664
+
+
+Troubleshooting
+---------------
+
+Verifying integration
+^^^^^^^^^^^^^^^^^^^^^
+
+To check if the integration is successful or not, navigate your browser
+to a product page. Append the string ``#hasVsWidget?`` to the url in the
+address bar.
+
+For example:
+
+::
+
+    http://www.example.com/products/28657
+
+becomes:
+
+::
+
+    http://www.example.com/products/28657#hasVsWidget?
+
+Press the enter-key to confirm and then hit the reload button on the
+browser to reload the page. If the integration was successful, you will
+get a popup indicating precisely that.
+
+Button not showing
+^^^^^^^^^^^^^^^^^^
+
+The button is only shown, if there is a valid product found in the
+Virtusize database or supplied in any other way. Make sure that there is
+a valid product.
+

source/ig/introduction.rst

@@ -0,0 +1,15 @@
+Introduction
+============
+
+Virtusize is a virtual fitting solution that helps retailers to visually
+illustrate the size and fit of clothing online.
+
+Virtusize allows customers to compare specific measurements of an item
+they are looking to buy with those of a similar item they already own.
+
+Displaying and overlaying silhouettes of both items then allows
+customers to easily compare sizes and choose the one that would fit them
+the best. Virtusize is accessed through a button located on the product
+page at the retailer.
+
+Read more about Virtusize and our solution at http://www.virtusize.com.