QloApps Cloudflare Turnstile

Protect all of your forms against spammers, bots, and hackers by integrating your QloApps with Cloudflare Turnstile. It is a modern alternative to CAPTCHA, that blocks spammers from interfering with the form that a user will fill out like login, registration, or contact form.

• Display Turnstile on back office login, customer login, registration, and contact us pages and many other pages.
• Multiple theme options for Turnstile to choose from i.e. auto, light, or dark.
• Select the size of the Turnstile as normal or compact.

To obtain the site and secret keys, you need to log in to your Cloudflare account.

Once you have logged in, click on Turnstile on the dashboard page.

Now click on the Add Site button on the Turnstile page as shown below. 

After clicking on the button, you can:

• Enter the site name for the widget to identify it in the future.
• Enter the domain where you want to allow Turnstile.
• You can select the widget type as managed, non-interactive, or visible. (Recommended: Manage)
• Once you have entered the site name and domain, and selected the widget type, click on Create button.

Upon clicking the create button, you will be redirected to the Turnstile page where you can view:

• Domain
• Visitor Solve Rate
• API Solve Rate
• Selected widget type

Click on the settings button. 

Here, you will get the Site Key and the Secret Key 

Prior to installing the QloApps Cloudflare Turnstile addon, you must make a few changes in the core files for the proper functioning of the module.

The step is very simple, you just have to replace the mentioned codes in the following paths.

1. At path themes/hotel-reservation-theme/authentication.tpl add given hook at line number 96 (may vary)

{hook h='displayCustomerLoginForm'} 

2. At path themes/hotel-reservation-theme/authentication.tpl add below hook code below at line number 667

{hook h="displayTurnstileOnCustomerRegistrationPage"}

3. At path themes/hotel-reservation-theme/contact-form.tpl add below hook code below line number 162 (may vary) just above div with class formgroup just below the hook {hook h=’displayGDPRConsent’ moduleName=’contactform’}

{hook h='displayTurnstile'}

4. At path adminhtl/themes/default/template/controllers/login/content.tpl add below hook code below line number 70 (may vary)

{hook h='displayTurnstileAdminLogin'}

5. At path themes/hotel-reservation-theme/identity.tpl – add below hook code below line number 196 (may vary)

{hook h="displayTurnstileOnIdentityForm"}

6. At path themes/hotel-reservation-theme/order-opc-new-account.tpl- add below hook code below line number 390 (may vary)

{hook h="displayTurnstileOnPaymentSignUpAtCheckout"}

7. At path themes/hotel-reservation-theme/order-opc-new-account.tpl- add below hook code below line number 28 (may vary)

{hook h="displayTurnstileOnPaymentLoginAtCheckout"}

8. At path themes/hotel-reservation-theme/index.tpl added a code on line number 25 to show error message during turnstile validation at the time of getting blocknewsletter subscription

{include file="$tpl_dir./errors.tpl"}

9. At path themes/hotel-reservation-theme/modules/blocknewsletter/blocknewsletter.tpl – add below hook code below line number 41 (may vary)

{hook h='displayTurnstileNewsletter'}

10. At path themes/hotel-reservation-theme/password.tpl – add below hook code below line number 44 (may vary)

{hook h="displayTurnstileOnForgetPassword"}

The installation of any module is very simple in QloApps.

Go to the Module and Services tab in the back office.  

Click on ‘Add New Module’.

Click on the ‘Choose a file’ and upload the zip file of the module.

After uploading the ZIP file the module will start installing automatically.

Once the module is installed, the user can see the prompt for successful installation and the module will be listed below. 

To configure the module go to the Module and Services tab and search for the “Cloudflare Turnstile” module and click on Configure. 

On the configurations page, you need to enter the following information.

• Site Key: You can get the site key from the Cloudflare Turnstile dashboard after adding sites
• Secret Key: You can get the secret key from the Cloudflare Turnstile dashboard after adding sites.
• Theme: Select the Turnstile theme as auto, light, or dark.
• Size: You can select size options for Cloudflare Turnstile from Normal or Compact.
• Positions: You can select pages where Cloudflare Turnstile will be displayed. 
• Enable Turnstile: Enable if you want to display Turnstile on applicable pages.

Click on Save to save the settings.

Turnstile will display on the store pages selected by the admin while configuring the module settings.

On your Cloudflare account, you can check the analytics of your website like challenges issued, visitor solve rate, and API solve rate. Click, as shown below. 

On clicking the link, Dashboard will open where you can view the analytics.

Challenges Issued: This means the number of times the widget has been displayed on the website.

Visitor Solve Rate: Percentage of users who have seen the widget and completed it.

API Solve Rate: Percentage of users who have completed the widget and then performed the action on the page successfully like login on completing the registration.

This is the complete process of Setup and use of QloApps Cloudflare Turnstile. I hope I was able to clarify the functioning of the module for you.

If you want to learn about the functionality of QloApps then you can visit this link: QloApps Reservation System – Free Open-Source Hotel Booking & Reservation System.

In case of any query, issue, or requirement please feel free to raise it on QloApps Forum.