Developer Guide

Multiple Captcha Per Web Page

MTCaptcha widget supports the user 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 supports domID as 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 Developers Guide - Javascript APIs

Custom Configuration Per Captcha

Configuration can be customized per captcha instance by using the element ‘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 provides 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 Developers Guide - JS Callbacks