Steps to integrate RingCaptcha’s verification widget on Unbounce simple page:

1. Create a new Classic page on Unbounce

1. Add "Custom HMTL" to the page. In the editor add the following HTML code:

   <center><div id='widget-point' style=''></div></center>
   

   

2. “Add New JavaScript" with the JS code in the attached file in the “Head” section. Make sure to use the correct application key.

<script type='text/javascript' src="//code.jquery.com/jquery-3.1.1.min.js">
</script>
<script type='text/javascript' charset='UTF-8' src="//cdn.ringcaptcha.com/widget/v2/bundle.min.js"></script>
<style type="text/css">
.ringcaptcha.widget {
    padding: 0px;
    background: #f1f1f1 !important;
    background-color: #fff;
    border: 0px solid #e1e6e7;
}

.ringcaptcha.widget .btn-submit {
    color: #fff;
    background-color: #f16132;
    border-color: #f16132;
}

.ringcaptcha.widget .btn-submit:hover {
    color: #fff;
    background-color: #e55b2e;
    border-color: #e55b2e;
}
</style>

<script type='text/javascript'>
  $(document).ready(function() {
    $('#widget-point').append(
      '<div id="xyz" data-widget data-app="YOUR_APP_KEY" data-locale="en" data-mode="verification" data-type="dual"></div>'
    );
    
var appKey = 'YOUR_APP_KEY';
    var widget = new RingCaptcha.Widget('#xyz', {
      app: appKey,
      events: {
        ready: function(event) {
          // console.log("Ready: event:", event);
          const dataString = localStorage.getItem('ringcaptcha.widget.' + appKey);
          const data = dataString ? JSON.parse(dataString) : null;
          // console.log("Ready: data:", data);
          
         
        },
        verified: function(event) {
          // console.log("Verified: event:", event);
          const dataString = localStorage.getItem('ringcaptcha.widget.' + appKey);
          const data = dataString ? JSON.parse(dataString) : null;
          // console.log("Ready: data:", data);
          phone = data.phoneNumber;
          window.parent.postMessage(phone, '*');
        }
      }
    }).setup();
  }); 
</script>

1. Save and publish the page

2. Go to my.ringcaptcha.com and add your domain name to the list of allowed domains (in the example screenshot below, “your_domain_name.com” is a mock domain)

   

Once you save it, the widget should be available on the saved URL.