Vidoop Flyout Captcha - Making it work

Vidoop Captcha (see implementation here) is an awesome thing for normal validation.
And even more awesome is the flyout version of it, which doesn't strip away the visual appeal of your page.

Implementing the flyout version is a bit confusing, primarily because there is a single document for this, and that too gets repetitive but misses out on the major details. I thought I could do better.

Here is a step-by-step how-to to making Vidoop Flyout work with your website (and also the automatic changes it makes to your page)

#1: Find the normal Vidoop Secure Captcha code implementation on your page. It should resemble this (note that the image src, categories to look for, and captcha_id would be different for you)

<form method="get">
<img src="https://api.vidoop.com/vs/captchas/IT42FKE7FE/image" />
<p>Type in the 3 letters you see on pictures of <span class="category_name">money</span>, <span class="category_name">birds</span>, and <span class="category_name">computers</span>, in that order.</p>
<input type="input" name="code" value="" />
<input type="hidden" name="captcha_id" value="IT42FKE7FE" />
<input type="submit" name="submit" value="Submit" />
</form>

#2: Wrap the image code and instructions in a <noscript> tag. This would be the non-flyout version of captcha that shows up when JS is disabled. Let the remaining code untouched.

<noscript>
<img src="https://api.vidoop.com/vs/captchas/IT42FKE7FE/image" />
<p>Type in the 3 letters you see on pictures of <span class="category_name">money</span>, <span class="category_name">birds</span>, and <span class="category_name">computers</span>, in that order.</p> </noscript>

#3: Include the jQuery library in your HTML file (can be placed anywhere). jQuery will give you the slick effects.

<script type="text/javascript" src="http://com.vidoop.demo-static.s3.amazonaws.com/js/jquery-1.2.6.min.js"></script>

#4: Include the code to initialise the flyout Vidoop captcha (place this before the <noscript> tag for best effect). The 'flyout.js' is the script that does it, and inserts the necessary HTML and styling into the page. The inline script, where we declare the vidoop_secure variable is essential to working of the whole thing, as well as provides configuration parameters (rip open the flyout script in some text editor to learn about that).

<script type="text/javascript">
var vidoop_secure = {
instructions: 'Type in the 3 letters you see on pictures of <span class="category_name">money</span>, <span class="category_name">airplanes</span>, and <span class="category_name">houses</span>, in that order.',
};
</script>
<script type="text/javascript" src="js/flyout-0.9.12.js"></script>

#5: So now your main block of HTML looks like this

<form method="get">
<script type="text/javascript" src="http://com.vidoop.demo-static.s3.amazonaws.com/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
var vidoop_secure = {
instructions: 'Type in the 3 letters you see on pictures of <span class="category_name">money</span>, <span class="category_name">airplanes</span>, and <span class="category_name">houses</span>, in that order.',
};
</script>
<script type="text/javascript" src="js/flyout-0.9.12.js"></script>

<noscript>
<img src="https://api.vidoop.com/vs/captchas/IT42FKE7FE/image" />
<p>Type in the 3 letters you see on pictures of <span class="category_name">money</span>, <span class="category_name">birds</span>, and <span class="category_name">computers</span>, in that order.</p> </noscript>
<input type="input" name="code" value="" />
<input type="hidden" name="captcha_id" value="IT42FKE7FE" />
<input type="submit" name="submit" value="Submit" />
</form>

And now you have the Vidoop Secure flyout captcha working on your own site.