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.
