Documentation Webflow
The following describes how to integrate TrustCaptcha into your Webflow site.
Preparation
Make the following preparations before you start integrating TrustCaptcha into your Webflow website.
Requirements
- An account with TrustCaptcha and an existing CAPTCHA.
- A website with Webflow where TrustCaptcha will be integrated.
Integration
The integration of TrustCaptcha takes place in two steps. First, the CAPTCHA widget is integrated into Webflow. In the second step, the result is evaluated on the server side and the next steps are determined.
1. Add CAPTCHA widget
Integrate the CAPTCHA widget quickly and easily into Webflow with the ‘TrustCaptcha’ Designer Extension.
- Install our TrustCaptcha extension from the official Webflow Marketplace.
- Open your Webflow workspace in Webflow Designer and select a form into which you want to integrate the CAPTCHA widget.
- Start the TrustCaptcha app under Apps -> TrustCaptcha -> Launch. Select Insert, set the site key (required) and customise the CAPTCHA to your requirements. Then click on Insert into selected form.
Now you will see a placeholder for the CAPTCHA widget in the Designer. The widget does not render in the Designer, but it does on the public website. Optionally, you can now publish your website as an intermediate step and test the CAPTCHA widget in its public form. However, the server-side validation is still missing, which we will add next.
The video visually demonstrates the most important steps.
2. Update CAPTCHA widget (optional)
You can easily update existing CAPTCHA widgets in Webflow Designer with our app.
- Select the CAPTCHA that you would like to update.
- Open the TrustCaptcha app
- Select Update and click on the Load selected Captcha button.
- Customise the CAPTCHA to your needs and then click on the Update selected Captcha button.
The CAPTCHA has now been updated. You can now optionally republish the website and view the updated CAPTCHA on the public website.
The video visually demonstrates the most important steps.
3. Validate CAPTCHA result
When the CAPTCHA widget is ready, it adds a hidden input field with the so-called verification token to your form. This is transmitted to your backend when the form is submitted. With the help of this token, you can retrieve the verification result of the CAPTCHA from our server and determine how to proceed. Learn more about how TrustCaptcha works.
You can retrieve the result from our servers using a simple REST API call. You can find out more about this in the technical backend details. Alternatively, you can use one of our ready-made libraries for backend integration. Currently, there are ready-made integrations for PHP, NodeJS, Python, Java, Kotlin, Ruby, Rust, Go, and .Net, for example.
The following three code examples demonstrate the backend validation process for PHP, NodeJS and Python. Each example shows the receipt of the verification token, the retrieval of the verification result and the determination of the next steps based on this result.
