Mit diesem Wissen erhälst du den entscheidenen Vorsprung
Menü
Mit diesem Wissen erhälst du den entscheidenen Vorsprung
We are still adding more cool stuff. It will be available in few days! Please enter your email below to be notified.
49,- Euro
49,- Euro
You will receive updates till these features are implemented!
We have two options for calling URLs
1. Redirects
2. Webhooks
You need to activate the redirect options within the option area.
You can enter the URL as an absolute (e.g. https://vollstart.de/) or relative (e.g. /page/) URI. This redirect URL will be executed on the frontend. If you do not enter a button label, then the user will be redirected to the URL immediately if the code is valid. If you enter a button label, the user need to click on the button to be forwarded.
How to build an URL for a webhook call?
We offer 4 placeholder: {CODE}, {CODEDISPLAY}, {IP}, {LIST}
Please be aware that the placeholders are case sensitive. The easiest way is to copy & paste the placeholder with the brackets into your URL.
Display-Code: NYA-ZER-TER
Code: NYAZERTER
Name of the list the code is assigned to: myList
IP of the user: 1.2.3.4
The webhook example URL:
https://vollstart.de/anotherService/{LIST}/{CODE}/?code={CODEDISPLAY}&ip={IP}
will be translated by the plugin into:https://vollstart.de/anotherService/myList/NYAZERTER/?code=NYA-ZER-TER&ip=1.2.3.4 and then the URL will be called by your wordpress server.
On option 1 (Redirect), the browser will go tohttps://vollstart.de/anotherService/myList/NYAZERTER/?code=NYA-ZER-TER&ip=1.2.3.4
On option 2 (Webhook), your server will call the URL in the backgroundhttps://vollstart.de/anotherService/myList/NYAZERTER/?code=NYA-ZER-TER&ip=1.2.3.4
The frontend will be rendered by the Javascript file. The elements will have css classes, that you could override.
The actual used CSS file can be view here: Open CSS File
<div id="sngmbhSerialcodesValidator">
<div class="sngmbh_container">
<div class="sngmbh_container">
<div class="sngmbh_input-group sngmbh_mb-3">
<input required="" type="text" class="sngmbh_form-control sngmbh_mb-2" data-input="sngmbhSerialcodesValidatorcode" placeholder="XXYYYZZ">
<div class="sngmbh_input-group-append">
<button type="submit" data-btn="sngmbhSerialcodesValidatorbtn" class="sngmbh_btn sngmbh_btn-primary sngmbh_mb-2">Check</button>
</div>
</div>
</div>
<div></div>
</div>
</div>
Form validation look and feel is controled by 2 css classes:
.sngmbh_is-invalid, .was-validated .sngmbh_form-control:invalid {
border-color: #dc3545;
padding-right: calc(1.5em + .75rem);
background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e);
background-repeat: no-repeat;
background-position: right calc(.375em + .1875rem) center;
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
.sngmbh_is-valid, .was-validated .sngmbh_form-control:valid {
border-color: #28a745;
padding-right: calc(1.5em + .75rem);
background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e);
background-repeat: no-repeat;
background-position: right calc(.375em + .1875rem) center;
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
The ajax call progress is rendered dynamically with the css rule: „lds-dual-ring“. It will be injected if it is not defined. To overrule this look and feel, just create the css rule with your values.
The progress wheel (spinner) is rendered by:
<div id="sngmbhSerialcodesValidatorspinner">
<span class="lds-dual-ring"></span>
</div>
Here is the default CSS rule of the progress wheel:
.lds-dual-ring {
display:inline-block;
width:64px;
height:64px;
}
.lds-dual-ring:after {
content:" ";
display:block;
width:46px;
height:46px;
margin:1px;
border-radius:50%;
border:5px solid #fff;
border-color:#2e74b5 transparent #2e74b5 transparent;
animation:lds-dual-ring 0.6s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Copyright 2018 © Alle Rechte vorbehalten.