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.
Features of PrestaShop Cloudflare Turnstile
- 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.
How to Install PrestaShop Cloudflare Turnstile
- 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.
![image-153](https://cdnblog.webkul.com/blog/wp-content/uploads/2023/02/image-153.png)
![image-154](https://cdnblog.webkul.com/blog/wp-content/uploads/2023/02/image-154.png)
PrestaShop Cloudflare Turnstile Configuration
![4-8](https://cdnblog.webkul.com/blog/wp-content/uploads/2023/02/4-8-1200x816.png)
Under Configuration, you can:
- Specify the site and secret keys that you have obtained from the Cloudflare account.
- Select Turnstile theme color 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.
How to get Site and Secret Keys
For obtaining the site and secret keys, you need to login to your Cloudflare account.
![2-13](https://cdnblog.webkul.com/blog/wp-content/uploads/2023/02/2-13-1200x544.png)
Once you have logged in, click on Turnstile on the dashboard page.
![3-11](https://cdnblog.webkul.com/blog/wp-content/uploads/2023/02/3-11-1200x603.png)
Now click on the Add site button on Turnstile page.
![5-8](https://cdnblog.webkul.com/blog/wp-content/uploads/2023/02/5-8-1200x492.png)
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 show 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.
![10-3](https://cdnblog.webkul.com/blog/wp-content/uploads/2023/02/10-3-1200x758.png)
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
![11-3](https://cdnblog.webkul.com/blog/wp-content/uploads/2023/02/11-3-1200x590.png)
Click on settings to view the secret key.
![12-4](https://cdnblog.webkul.com/blog/wp-content/uploads/2023/02/12-4.png)
Now, click on secret key.
![13A](https://cdnblog.webkul.com/blog/wp-content/uploads/2023/02/13A-1200x564.png)
Turnstile will display on the store pages selected by the admin while configuring the module settings.
Customer Login Page
![14A](https://cdnblog.webkul.com/blog/wp-content/uploads/2023/02/14A.png)
![15-2](https://cdnblog.webkul.com/blog/wp-content/uploads/2023/02/15-2.png)
As the admin has selected non-interactive widget type the user will see a widget with a loading bar while browser challenges run. By default, Turnstile will solve and the user do not have to interact with the widget.
If admin has selected Managed Widget type, then in this case Cloudflare will use the information from the user to decide whether an interactive challenge should be used. If interaction is shown, then a user need to check a box.
And if invisible widget type is selected by admin, then a widget will not view a widget or any indication that an invisible browser challenge is in progress.
Cutomer Registration Page
![16-2](https://cdnblog.webkul.com/blog/wp-content/uploads/2023/02/16-2-951x1024.png)
Customer Contact Page
![17-2](https://cdnblog.webkul.com/blog/wp-content/uploads/2023/02/17-2.png)
Back Office Login Page
![19-2](https://cdnblog.webkul.com/blog/wp-content/uploads/2023/02/19-2.png)
In the above screenshot, it can be seen that Turnstile is in low size. This is because the admin has selected compact in the size field.
In cloudflare account, you can check analytics of your website like challenges issued, visitor solve rate, and API solve rate.
![18-3](https://cdnblog.webkul.com/blog/wp-content/uploads/2023/02/18-3-1200x534.png)
On clicking the website link, dashboard will open where you can view analytics.
![20-2](https://cdnblog.webkul.com/blog/wp-content/uploads/2023/02/20-2-1200x801.png)
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.
Current Product Version – 1.0.0
Supported Framework Version – 8.x.x, 1.7.x.x
Source link
Leave a Reply