¶ PVYcaptcha | Getting started
The free Captcha Service resides at the domain https://captcha.pvy.swiss which is also part of the Captcha Challenge URL.
¶ Check how it works
You can copy and paste follwing Code as HTML below, and save it locally as a utf-8 coded .html file and open it in any web brower to check the PVYcaptcha Protecting Form:
<html>
<head>
<meta charset="utf-8">
<title>A cookie-less & GDRP compliant Captcha Service</title>
<script async defer src="https://captcha.pvy.swiss/PVYcaptcha.js" type="module"></script>
</head>
<body>
<form>
<captcha-widget id="pvy-captcha"
challengeurl="https://captcha.pvy.swiss/captcha"
></captcha-widget>
</form>
</body>
</html>
Or you can check this one, which ads the mentioned Options below:
<html>
<head>
<meta charset="utf-8">
<title>A cookie-less & GDRP compliant Captcha Service</title>
<script async defer src="https://captcha.pvy.swiss/PVYcaptcha.js" type="module"></script>
<script>
window.addEventListener('load', () => {
document.querySelector('#pvy-captcha').configure({
strings: {
"error": "Verifizierung ungültig. Bitte später nochmals versuchen.",
"footer": "Geschützt durch <a href="e;https://pvy.swiss/"e; target="e;_blank"e;>PVY.swiss</a>",
"label": "Ich bin kein Roboter",
"verified": "Verifiziert",
"verifying": "Verifizieren...",
"waitAlert": "Verifizieren... bitte warten."
},
});
});
</script>
<style>
:root {
--pvy-captcha-border-width: 1px;
--pvy-captcha-border-radius: 5px;
--pvy-captcha-color-base: #ffffff;
--pvy-captcha-color-border: #0066ac;
--pvy-captcha-color-text: #0066ac;
--pvy-captcha-color-border-focus: #0066ac;
--pvy-captcha-color-error-text: #f23939;
--pvy-captcha-color-footer-bg: transparent;
--pvy-captcha-max-width: 260px;
}
/* just for the looks */
body {
font-family: Helvetica, Arial, sans-serif;
}
.test {
margin-top: 50px;
}
.pvy-captcha-label {
font-weight: bold;
}
</style>
</head>
<body>
<div class="test">
<form>
<captcha-widget
id="pvy-captcha"
challengeurl="https://captcha.pvy.swiss/captcha"
></captcha-widget>
</form>
</div>
</body>
</html>
¶ The result will look like this:
¶ Styling Variants in HTML & JavaScript
PVYcaptcha can be integrated just with copy and paste of the Header Script into your Website Template or /index.html or whatevery you use.
We offer 4 different Varians for fast forward copy & paste
¶ Dark theme
<div style="bg-color:#333;color:#fff">
<captcha-widget
id="pvy-captcha"
challengeurl="https://captcha.pvy.swiss/captcha"
></captcha-widget>
</div>
¶ CSS Variable (Pink example)
<captcha-widget
id="pvy-captcha"
challengeurl="https://captcha.pvy.swiss/captcha"
style="--captcha-color-border:pink;--captcha-border-width:3px;--captcha-border-radius:15px;"
></captcha-widget>
¶ Custom labels
<captcha-widget
id="pvy-captcha"
challengeurl="https://captcha.pvy.swiss/captcha"
strings="{"label":"Ich bin kein Bot"}"
></captcha-widget>
¶ Hide branding PVV.swiss
<captcha-widget
id="pvy-captcha"
challengeurl="https://captcha.pvy.swiss/captcha"
hidelogo
hidefooter
></captcha-widget>
¶ Using the PVYcaptcha Widget for your Website with CSS
¶ Appereance
The widget’s appearance can be seamlessly adjusted by modifying CSS variables, allowing for easy customization of various visual elements. Just copy this css into your CSS File:
:root {
--pvy-captcha-border-width: 1px;
--pvy-captcha-border-radius: 3px;
--pvy-captcha-color-base: #ffffff;
--pvy-captcha-color-border: #a0a0a0;
--pvy-captcha-color-text: currentColor;
--pvy-captcha-color-border-focus: currentColor;
--pvy-captcha-color-error-text: #f23939;
--pvy-captcha-color-footer-bg: #f4f4f4;
--pvy-captcha-max-width: 260px;
}
¶ Localization
Easily localize and tailor the widget’s messages to suit your audience’s language preferences through the strings property. This property holds a JSON-encoded string comprising translation entries for various widget messages:
Easily localize and tailor the widget’s messages to suit your audience’s language preferences through the strings property. This property holds a JSON-encoded string comprising translation entries for various widget messages:
{
"error": "Verification failed. Try again later.",
"footer": "Protected by <a href="https://pvy.swiss/" target="_blank">PVY.swiss</a>",
"label": "I'm not a robot",
"verified": "Verified",
"verifying": "Verifying...",
"waitAlert": "Verifying... please wait.",
}
¶ Localization Javascript
Here is a Javascript, you can take, to add to your Head-Section in your HTML-File, that has all Language-Strings in it:
<script>
window.addEventListener('load', () => {
document.querySelector('#pvy-captcha').configure({
strings: {
"error": "Verifizierung ungültig. Bitte später nochmals versuchen.",
"footer": "Geschützt durch <a href="e;https://pvy.swiss/"e; target="e;_blank"e;>PVY.swiss</a>",
"label": "Ich bin kein Roboter",
"verified": "Verifiziert",
"verifying": "Verifizieren...",
"waitAlert": "Verifizieren... bitte warten."
},
});
});
</script>
You can also deliver other Config-Parameters via that script like the challengeurl, hidelogo, hidefooter etc.
¶ Programmatic Configuration
tbd
¶ Not a Coder ?
Don’t worry. You can find on the PVYcaptcha Website all the examples above, which can copy paste with a preview how it will look on your Website/Application and simply paste it to your Template into the header section.
¶ Looking for CMS Plugins ?
We have plugins to load into your Backend ready for following popular CMS:
- Joomla
- GravCMS
- Wordpress
- Drupal
- Typo3
Tired always patching your CMS and all installed plugins due Cyber Security Threats and badly managed Component and Plugin Repos ?
Checkout PVYbusiness-suite with its headless, tokenized CMS, which allows you to generate and update any content straight from your protected Admin-Interface within PVYbusiness-Suite, of course with eCommerce and File Repo Support from PVYfiles among other nice to have features. The future of CMS are headless - less headache - more freedom.
¶ PVYanalytics
If you like our free PVYcaptcha Service, you gonna love our PVYanalytics. Its like Google Analytics, but much more powerful, fully GDPR compliant and gives the KPI values you are really looking for. Example: Where my visitors dropping the Video XY? --> after 7 Minutes and 38 Seconds. These and much more, easy to integrate, is available on PVYanalytics, gives you more insights about your own content.