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.

• Angular
  
• React
• Vue (Options API)
• Vue (Composition API)

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>