Skip to content

Add multiple widgets to the same page

Jump to bottom Edit New page
Daniel P edited this page Sep 15, 2018 · 4 revisions

This is an example taken from the official google documentation.

Add a script tag for a callback

<script type="text/javascript">
  var verifyCallback = function(response) {
    alert(response);
  };
  var widgetId1;
  var widgetId2;
  var onloadCallback = function() {
    // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
    // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
    widgetId1 = grecaptcha.render('example1', {
      'sitekey' : "<%= Recaptcha.configuration.site_key %>",
      'theme' : 'light'
    });
    widgetId2 = grecaptcha.render(document.getElementById('example2'), {
      'sitekey' : "<%= Recaptcha.configuration.site_key %>"
    });
    grecaptcha.render('example3', {
      'sitekey' : "<%= Recaptcha.configuration.site_key %>",
      'callback' : verifyCallback,
      'theme' : 'dark'
    });
  };
</script>

In the callback you will have the sitekey generated by this gem with <%= Recaptcha.configuration.public_key %>

Next you need to have some elements with an id matching those specified in the callback

<%= form_for @foo do |f| %>
  # ...
  <div id="example1"></div>
  # ...
<% end %>
<%= form_for @foo2 do |f| %>
  # ...
  <div id="example2"></div>
  # ...
<% end %>
<%= form_for @foo3 do |f| %>
  # ...
  <div id="example3"></div>
  # ...
<% end %>

And finally you need a script tag that gets the reCAPTCHA code from google and tells it that your code is explicit and gives it the callback.

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

Now all together:

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render for multiple widgets</title>
    <script type="text/javascript">
      var verifyCallback = function(response) {
        alert(response);
      };
      var widgetId1;
      var widgetId2;
      var onloadCallback = function() {
        // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
        // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
        widgetId1 = grecaptcha.render('example1', {
          'sitekey' : "<%= Recaptcha.configuration.public_key %>",
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.render(document.getElementById('example2'), {
          'sitekey' : "<%= Recaptcha.configuration.public_key %>"
        });
        grecaptcha.render('example3', {
          'sitekey' : "<%= Recaptcha.configuration.public_key %>",
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
    </script>
  </head>
  <body>
    <%= form_for @foo do |f| %>
      # ...
      <div id="example1"></div>
      # ...
    <% end %>
    <%= form_for @foo2 do |f| %>
      # ...
      <div id="example2"></div>
      # ...
    <% end %>
    <%= form_for @foo3 do |f| %>
      # ...
      <div id="example3"></div>
      # ...
    <% end %>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
  </body>
</html>

The only real difference between this example and the google example is you will use the <%= Recaptcha.configuration.public_key %> for the sitekey

If your callback has to live on another file (maybe a layout), then you would set the callback on window window.onloadCallback = function() {...}

Then on the backend, you will still use the verify_recaptcha as explained in this readme.

Add a custom footer
Add a custom sidebar
Clone this wiki locally