Angular, React & Vue
A full set of examples for popular front-end frameworks such as Angular, React and Vue can be found on this documentation page.
Full example in Angular​
Angular (html)
<div class="zenc-captcha" data-sitekey="ADD-YOUR-SITEKEY-HERE"></div>
Angular (typescript)
ngOnInit(): void {
const script = document.createElement('script');
script.src = 'https://www.zencaptcha.com/captcha/widget.js';
script.async = true;
script.defer = true;
script.onload = this.onScriptLoad.bind(this);
document.head.appendChild(script);
}
doneCallback(solution){
// Called immediately after the solution is ready.
// You can save the solution and send it to the backend when the user submits a form.
console.log("The solution: "+solution);
}
//You can use this to reset the widget:
restartWidget(){
this.widget.reset();
}
onScriptLoad(): void {
const element = this.elementRef.nativeElement.querySelector('.zenc-captcha');
const options = {
doneCallback: this.doneCallback
};
this.widget = new WidgetInstance(element, options);
//You can also choose to automatically start solving the challenge when the widget is ready:
//widget.start();
}
Full example in React​
React
import { useEffect, useRef } from 'react';
function App() {
const captchaRef = useRef(null);
const widget = useRef(null);
let loaded = useRef(false);
const doneCallback = (solution) => {
// Called immediately after the solution is ready.
// You can save the solution and send it to the backend when the user submits a form.
console.log("The Solution: " + solution);
};
const onScriptLoad = () => {
const element = captchaRef.current;
const options = {
doneCallback: doneCallback,
// sitekey: "ADD-YOUR-SITEKEY-HERE"
//---> Instead of defining the sitekey in <div>, you could also define it here.
};
widget.current = new WidgetInstance(element, options);
//You can also choose to automatically start solving the challenge when the widget is ready:
widget.current.start();
};
//You can use this to reset the widget:
const resetWidget = () => {
if (widget.current) {
widget.current.reset();
}
};
useEffect(() => {
if(!loaded.current){
const script = document.createElement('script');
script.src = 'https://www.zencaptcha.com/captcha/widget.js';
script.async = true;
script.defer = true;
script.onload = onScriptLoad;
document.head.appendChild(script);
loaded.current = true;
return () => {
document.head.removeChild(script);
}
}
});
return (
<div>
<div className="zenc-captcha" data-sitekey="ADD-YOUR-SITEKEY-HERE" ref={captchaRef}></div>
</div>
);
}
export default App;
Full example in Vue (Options API)​
Vue (Options API)
<template>
<div>
<div class="zenc-captcha" data-sitekey="ADD-YOUR-SITEKEY-HERE" ref="captcha"></div>
</div>
</template>
<script>
export default {
name: 'Index',
data() {
return {
widget: null
};
},
mounted() {
const script = document.createElement('script');
script.src = 'https://www.zencaptcha.com/captcha/widget.js';
script.async = true;
script.defer = true;
script.onload = this.onScriptLoad;
document.head.appendChild(script);
},
methods: {
doneCallback(solution) {
// Called immediately after the solution is ready.
// You can save the solution and send it to the backend when the user submits a form.
console.log("The Solution: " + solution);
},
onScriptLoad() {
const element = this.$refs.captcha;
const options = {
doneCallback: this.doneCallback,
//sitekey: "ADD-YOUR-SITEKEY-HERE"
//---> Instead of defining the sitekey in <div>, you could also define it here.
};
const widget = new WidgetInstance(element, options);
this.widget = widget;
//You can also choose to automatically start solving the challenge when the widget is ready:
//this.widget.start();
},
//You can use this to reset the widget:
resetWidget(){
if (this.widget) {
this.widget.reset();
}
}
}
};
</script>
Full example in Vue (Composition API)​
Vue (Composition API)
<template>
<div>
<div class="zenc-captcha" data-sitekey="ADD-YOUR-SITEKEY-HERE" ref="captcha"></div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const widget = ref(null);
const doneCallback = (solution) => {
// Called immediately after the solution is ready.
// You can save the solution and send it to the backend when the user submits a form.
console.log("The Solution: " + solution);
};
const onScriptLoad = () => {
const element = ref(null);
element.value = document.querySelector('.zenc-captcha');
const options = {
doneCallback: doneCallback,
//sitekey: "ADD-YOUR-SITEKEY-HERE"
//---> Instead of defining the sitekey in <div>, you could also define it here.
};
const widgetInstance = new WidgetInstance(element.value, options);
widget.value = widgetInstance;
//You can also choose to automatically start solving the challenge when the widget is ready:
//widget.value.start();
};
//You can use this to reset the widget:
const resetWidget = () => {
if (widget.value) {
widget.value.reset();
}
};
onMounted(() => {
const script = document.createElement('script');
script.src = 'https://www.zencaptcha.com/captcha/widget.js';
script.async = true;
script.defer = true;
script.onload = onScriptLoad;
document.head.appendChild(script);
});
</script>