Skip to main content

Multiple Captcha Per Web Page

MTCaptcha widget supports the use of multiple captcha per webpage.

To render more than one captcha, use the 'renderQueue' JavaScript config param

  <script>
  var mtcaptchaConfig = {
    "sitekey": "<YOUR SITE KEY>",
    "renderQueue": ['mtcaptcha-1', 'mtcaptcha-2', 'mtcaptcha-3']
  }
  ...
  </script>

  <div id="mtcaptcha-1"></div>
  <div id="mtcaptcha-2"></div>
  <div id="mtcaptcha-3"></div>

MTCaptcha APIs And Multiple Captchas​

All window.mtcaptcha JavaScript APIs support domID as a param to target individual captchas loaded on the page.

  <script>
    // get the status of the first captcha
    mtcaptcha.getStatus();      
    // get the status of the captcha with id='mtcaptcha-1'
    mtcaptcha.getStatus('mtcaptcha-1')  


    // get the current verifiedToken of the first captcha
    mtcaptcha.getVerifiedToken();
    // get the current verifiedToken of the captcha 
    // with id='mtcaptcha-2'
    mtcaptcha.getVerifiedToken('mtcaptcha-2');
  </script>

To learn more about all the mtcaptcha APIs see Developer Guide - JavaScript APIs

Custom Configuration Per Captcha​

Configuration can be customized per captcha instance by using data-<configparam> attributes in the target DIV.

 <script>
  var mtcaptchaConfig = {
    "renderQueue": ['mtcaptcha-1', 'mtcaptcha-2']
  }
  ...
  </script>

  <div id="mtcaptcha-1" data-sitekey='<sitekey1>' 
  data-action='login' data-lang='zh'></div>
  ...
  <div id="mtcaptcha-2" data-sitekey='<sitekey2>' 
  data-action='register' data-lang='fr'></div>

Multiple Captcha And Callbacks​

MTCaptcha JavaScript callbacks provide an argument with field state.domID to indicate specifically which captcha instance the callback is for.

  <script>
    function mt_verifiedcb(state)
    {
      console.log("mt_verifiedcb(state)");
      console.log("state.domID => "+state.domID);  
      // either 'mtcaptcha-1' or 'mtcaptcha-2'
    }  
  </script>

  <script>
    var mtcaptchaConfig = {
    "sitekey": "<YOUR SITEKEY>",
    "verified-callback": "mt_verifiedcb",
    "renderQueue": ['mtcaptcha-1', 'mtcaptcha-2']
    };
     ...
  </script>
  ...

  <div id="mtcaptcha-1"></div>
  <div id="mtcaptcha-2"></div>

To learn more about the different callbacks see Developer Guide - JS Callbacks