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 to interfere 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.

Login into Cloudflare Turnstile account

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

Turnstile sites

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.
Add Turnstile site

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 

Cloudflare Turnstile settings

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'} 
Customer Login Hook
  1. At path themes/hotel-reservation-theme/authentication.tpl add below hook code below at line number 667
{hook h="displayTurnstileOnCustomerRegistrationPage"}
Customer Registration page Hook

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'}
Display Turnstile Hook

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

{hook h='displayTurnstileAdminLogin'}
Display turnstile admin login Hook

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

{hook h="displayTurnstileOnIdentityForm"}
Display Turnstile on Identity form Hook

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"}
Display Turnstile on payment signup at checkout Hook

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"}
Display Turnstile on payment login at checkout Hook

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"}
show error message during turnstile validation hook

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

{hook h='displayTurnstileNewsletter'}
display turnstile newsletter hook

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

{hook h="displayTurnstileOnForgetPassword"}
display turnstile on forget password

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. 

Installed Module

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

Configure QloApps Cloudflare Turnstile module

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.

Configuration of cloudflare turnstile module

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

Verifying Cloudflare Turnstile  on Customer login page
Success Cloudflare Turnstile  on Customer login page
Black theme Cloudflare Turnstile  on Customer login page
Cloudflare Turnstile on sign up at checkout page
Cloudflare Turnstile on login at checkout page
Cloudflare Turnstile on newletter
Cloudflare Turnstile on forgot password page

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. 

Cloudflare Turnstile Documentation

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

Cloudflare Turnstile 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.

. . .

Comment

Add Your Comment


Be the first to comment.

Start a Project




    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home
    css.php
    Table of ContentHide Index