PrestaShop Cloudflare Turnstile {User- Guide}

PrestaShop Cloudflare Turnstile: Protect your forms against spammers, bots, and hackers by integrating your PrestaShop store with Cloudflare Turnstile.

A modern alternative to CAPTCHA that blocks spammers from form that a user might fill out like login, registration, or contact form.

Note: PrestaShop Cloudflare Turnstile module is compatible with PrestaShop multi-store feature.

• Display Turnstile on back office login, customer login, registration, personal details, and contact us pages.
• Multiple theme options for Turnstile to choose from i.e. auto, light, or dark.
• Select the size of Turnstile as normal or compact.
• Track the users who have successfully completed the widget.
• Choose to use cloudflare turnstile in sandbox mode.
• PrestaShop Cloudflare Turnstile module is MultiShop Compatible.

For this module, you need to add some hooks in prestashop core files –

1.) Add Hook

{hook h='displayWkCustomerLoginForm'}

in Front-Office

A.) File name – login-form.tpl

Path – /themes/_YOUR_THEME_NAME_/templates/customer/_partials/

Position – In Login Form with id=”login-form”, Inside {block name=’login_form_fields’} section and after {/foreach}

2.) Add Hook

{hook h='displayWkCustomerContactForm'}

in Front-Office

A.) File name – contactform.tpl
Path – /modules/contactform/views/templates/hook

Position – Inside <section class=”form-fields”> after Message filed <label>…….</label>

B.) File name – contactform.tpl
Path – /themes/_YOUR_THEME_NAME_/modules/contactform/views/templates/widget

Position – Inside <section class=”form-fields”> after Message filed <div class=”form-group”>……</div>

3.) Add Hook

{hook h='displayWkAdminLoginForm'}

in Back-Office

File name – content.tpl

Path – /admin/themes/default/template/controllers/login

Position – Inside <section class=”form-fields”> after Message filed <div class=”form-group”>……</div>

For PrestaShop version 9, you need to add the hook mentioned below.

\Hook::exec('actionWkAdminLoginControllerSubmit')

File name – UserBadge.php

Path – vendor/symfony/security-http/Authenticator/Passport/Badge

Position – Inside getUser() function, after the check if user is set or not.

• Firstly, go to the module manager in the back office and click on ‘upload a module’.
• After that, drag and drop the module file or select the file from the system.
• In this way, the module installation will be successful.

Under Configuration, you can:

• Enable or disable cloudflare sandbox mode.
• Specify the site and secret keys that you have obtained from the Cloudflare account.
• Select Turnstile theme as auto, light, or dark.
• Select Turnstile size as normal or compact.
• Configure pages where you want to show Turnstile. You can show Turnstile on back office login, customer login, registration, contact, and personal details pages.

Cloudflare sandbox mode

Enable the sandbox module to test cloudflare on the website. Specify the IP addresses where you want to test cloudflare turnstile.

For obtaining the site and secret keys, you need to login to your Cloudflare account.

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

On Turnstile page, click on ‘Add widget’ button.

Specify the widget name and click on ‘Add Hostnames’ button.

On clicking the ‘Add Hostnames’ button, a form appears on the page where the you need to specify the hostname and then click on ‘Add’ button.

Now, select the hostname and click on the ‘Add’ button.

Once added, select the widget mode, pre-clearance, and click on ‘Create’ button.

It is recommended to disable pre-clearance for the creation of keys. You can enable it later on.

On clicking the ‘Create’ button, site and secret keys get generated.

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

Customer Login Page

Dark Theme View

Turnstile Size – Compact

In the above screenshot, it can be seen that Turnstile is low in size. This is because the admin has selected compact in the size field.

Cutomer Registration Page

Customer Contact Page

Back Office Login Page

Personal Information Page

In cloudflare account, you can check analytics of your website like challenges issued, visitor solve rate, and API solve rate.

On clicking the website link, dashboard will open where you can view 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.

For any kind of technical assistance or query, please raise a ticket or send us a mail at support@webkul.com

Also, please explore our Prestashop development services and a vast range of quality Prestashop addons.