Introduction:
- You may already be aware of Google Re-Captcha. Many websites use it to fight spam and abuse.
- In LeadsHook its possible to create your own anti spam/abuse verification dialog using JavaScript.
- Google Re-Captcha is fairly ugly and doesn’t blend well with the underlying theme of a site. Using your own dialog allows you to customize it how you like.
- Note that if you need stronger verification, consider setting up phone based verification. This approach will send the user’s phone an SMS code that they must enter on the Decision Tree to proceed.
- More about that here: https://www.leadshook.com/help/phone-verification-node-100-contactable-phone-numbers/
Here are the steps to create our own custom dialog:
Step 1: Create a number custom field called “random_saved”. And set it as visible. And create another number field called “answer”. Again set it as visible.
Step 2: Drag a form node on to the canvas and set it up how you like -> add the fields you want to capture. For example: name, email, phone, etc.
Step 3: While the form node is open create a node level script to fire on enter. The node level script section is located in the bottom right corner of the node. You can give it any name you like. Simply paste this into the box:
<script>
$(document).ready(function() {
function go(){
DT.setField('random_saved', Math.round(Math.random() * 10));
};
window.setTimeout( go, 1000 );
});
</script>
Step 4: Add a question node onto the canvas. Set the type as “Information”. And setup the editor to display the following. Note that you display your random number code here that was generated in the previous node ( ie ‘random_saved’).
Also note that we have included a text field to the editor. You can see the UI elements in the editor toolbar. Once you add your text field, if you double click on the text field a dialog will popup. Enter in ‘answer’ (without the quotes) as the variable name, select type ‘text’ and save.
Next we want to change the type of ‘text’ to number. So we need to hit the ‘source’ button on the editor. And you will see HTML code appear. Like this:
Notice the blue highlighted text that we change the type from ‘text’ to ‘number’.
Step 5: Next we add a decision node. And open it for editing. Give it a title “Evaluate” or anything you like will do.
Then click add path. When the path opens give the path a title, again anything will do. Then we need to setup the condition like this:
Basically we are evaluating if the answer provided into the text field matches the random_saved number.
Step 6: Next you must add your ESP/Email/Webhook. So that when the user successfully enters the correct code it will fire. And also do a loop back from the decision node to the question node if the answer is incorrect.
Step 7: Finally you add a result node to display a relevant message to your users. Or redirect to an external site somewhere outside LeadsHook. Don’t forget to publish your Decision Tree and access it via direct link/embed. Because scripts wont run in preview.
The canvas should look something like this:
You can try a demo of this here: https://test2.leadshook.io/survey/XncxZ1YaqMghn6OqGyHwZeAaOSS7RSfuGmItQYqK