Table of Contents

Add Captcha Verification (Non-Embedded Bots)

Abby Updated by Abby

In this article we'll show you how to add a Captcha checkbox to non-embedded Landbots

Before the user can enter the flow, or initiate a chat with our bot, they must have first completed the captcha

We'll hide the welcome button until it's been completed

This is what the Landbot flow will look like:

The first step, is to sign up for the Captcha API key we'll follow this guide

When we arrive at this page:

We'll add our Landbot domain, if you're unsure what you're Landbot domain is just go to 'Share' then 'Share with a link':

If my url is https://landbot.online/v3/H-2312 then I will add landbot.online as the domain

Once we have that we just need the Site-Key that was generated, let's save it in a safe place, it's hard to find later

Let's go back to the builder, in the welcome message we'll add the following:

<html><head><script src="https://www.google.com/recaptcha/api.js"></script></head><body> <form action="?" method="POST"><div class="g-recaptcha" data-callback="thecallback" data-sitekey="XXXXXXXXXXXXX"></div></form></body></html>

We'll just replace XXXXXXX for our data-site key

Let's publish and test the bot to make sure it's working, you should still see the first button(this must be tested with the 'share url' option):

Now, what we want to do is hide this until the captcha has been complete, that's easy we'll just add the following to the 'Design'/'Custom Code'/'Add CSS':

.input-button{

display:none;}

Now that we've hidden the button, we need a way to add it back once the captcha has been completed, so we'll add the following in 'Design'/'Custom Code'/'Add JS'

<script>

let landbotScope = this;

window.thecallback = "";

this.onLoad(function() {

window.thecallback = function(){

document.getElementById("custom-styles").sheet.insertRule(`.input-button{display:block!important;}`);

}

});

</script>

Let's publish and test our bot!

How did we do?

Cookie consent banner (full page / full page embed)

Creating Masks for User Input (2 examples)

Contact