PrestaShop Cloudflare Turnstile {User- Guide}

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 version 8.x.x.

• Display Turnstile on back office login, customer login, registration, 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.
• 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>

• 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:

• 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, and contact pages.

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.

Now click on the Add site button on Turnstile page.

After clicking on the button, you can:

• Specify the site name for the widget to identify it in the future.
• Enter the domain where you want to allow Turnstile.
• Select the widget type as managed, non-interactive, or visible.

Once you have entered the site name, domain, and selected the widget type, click on create button.

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

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

Click on settings to view the secret key.

Now, click on secret key.

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

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 [email protected]

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