Skip to main content

Migrating from reCAPTCHA

Switching from Google's reCAPTCHA (v2) to Friendly Captcha is straightforward.

To make the switch even easier we offer a recaptcha compatibility mode. Using that compatibility mode switching should take only a few minutes.

Create a Friendly Captcha sitekey and API Key​

info

To add the Friendly Captcha widget to your website you will need an account. You can sign up here.

Log in to the Friendly Captcha Dashboard, then

  1. Create a new application and take note of its sitekey.
  2. Create a new API key and copy it somewhere safe.
tip

If you are using a CMS like Wordpress, you probably don't have to do the below steps.

Instead you would replace the reCAPTCHA plugin and install a plugin that supports Friendly Captcha.

Update your website's integration​

  1. Replace the reCAPTCHA script

    <script src="https://www.google.com/recaptcha/api.js"
            async defer></script>

    with the reCAPTCHA-compatible Friendly Captcha scripts.

    <script type="module" src="https://cdn.jsdelivr.net/npm/@friendlycaptcha/sdk/recaptcha-site.min.js"
            async defer></script>
    <script nomodule src="https://cdn.jsdelivr.net/npm/@friendlycaptcha/sdk/recaptcha-site.compat.min.js"
          async defer></script>

  2. Replace g-recaptcha with frc-captcha and update the sitekey

    <div class="g-recaptcha" data-sitekey="<reCAPTCHA sitekey>"></div>

    becomes

    <div class="frc-captcha" data-sitekey="<Friendly Captcha sitekey>"></div>

Update your server's integration​

Follow the guide here to set up your server's integration.

Compatibility notes (only relevant for advanced usage)​

Making use of the compatibility scripts (recaptcha-site.min.js and recaptcha-site.compat.min.js) means that the Friendly Captcha widget will work without having to change any Javascript code on your website or web app.

Some fields and methods do behave differently, here is a list of the different behaviors:

Container Configuration and render attributes (docs)​

  • data-size has no effect. The Friendly Captcha widget is fully responsive, you can make it any size you want. You can use plain CSS to resize it.
  • data-close-callback has no effect and is never called. In hCaptcha this is called when the user closes the "click-the-pictures" challenge, which is not relevant.