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