Mit diesem Wissen erhälst du den entscheidenen Vorsprung

Premium Plugin is now released!

Serial Codes Generator and Validator Premium

We are still adding more cool stuff. It will be available in few days! Please enter your email below to be notified.

Benefits

69,- Euro

Product
4.6/5
Support
5/5

Upcoming Features

You will receive updates till these features are implemented!

Howto's

Calling URLs from the serial code validator plugin

We have two options for calling URLs

1. Redirects

2. Webhooks

Redirects

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.

serial code validator activate redirects

Webhooks

You can enter URLs for the different validation steps that will be called from your server (your WordPress server is calling the URL). This allows you to inform other server (system), when the validation step is performed.

URL format & syntax

How to build an URL for a webhook call?

We offer 5 placeholder: {USERID}, {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.

Example:

Userid (empty if the user is not logged in): userid
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 to
https://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 background
https://vollstart.de/anotherService/myList/NYAZERTER/?code=NYA-ZER-TER&ip=1.2.3.4

Shortcode optional parameters

Use your own form

You can use your own HTML input, output and trigger component for the check.

If you add the parameters (all 3 mandatory to use this feature), then the default input area will not be rendered.

				
					[ sngmbhSerialcodesValidator inputid="" triggerid="" outputid="" ]
				
			

inputid

The component with the set HTML-ID will be used as the input element. It need to be an HTML input element.

We will access the value-parameter of it.

				
					[ sngmbhSerialcodesValidator
    inputid="" 
    triggerid="" 
    outputid=""
]
				
			

triggerid

The onclick event of the component with this HTML-ID will be replaced by our function in order to call the server validation for the code.

				
					[ sngmbhSerialcodesValidator
    inputid="" 
    triggerid=""
    outputid=""
]
				
			

outputid

The component with the provided HTML-ID on this parameter will be used for the server answer – the output.

It cannot be empty. If you want to hide the output, hide it using css style commands.

The content of this component will be replaced by the server result after the check . We will use the innerHTML property of it, so use a DIV, SPAN, TD or similar for best results.

If you need to control the form depending on the result of the serial code check, then please consider using one or both of the additional optional parameter for your own JavaScript callback functions.

				
					[ sngmbhSerialcodesValidator
    inputid="" 
    triggerid="" 
    outputid=""
]
				
			

Use your own JavaScript callbacks and gain more control

You can add JavaScript function names, that are called before and after the check.

Both parameters are optional and not required.

				
					[ sngmbhSerialcodesValidator jspre="" jsafter="" ]
				
			

These parameters can be combined with the input and output parameters.

jspre

If you want to control or manipulate the input before it is sent to the server, then use this parameter.

The function will be called. The input parameter for the function will be the code.

If your function returns a value, than this returned value will be used. If nothing is returned or an empty string, then the entered code of the user will be used.

				
					[ sngmbhSerialcodesValidator 
    jspre="mySerialCodePre" 
    jsafter="" 
]
				
			

Example function

Add your JavaScript code to your page, so that it can be called from the serial code plugin. Make sure the function name your are using for the jspre-call is matching, the jspre attribute value. The input parameter is a string with the user entered code.

				
					function mySerialCodePre(myCode) {
    // console.log(myCode);
    return myCode;
}
				
			

jsafter

The function will be called. The input parameter will be the result JSON object from the server.

The content differs (depending on the activated options) and can be extended in the future. Please inspect the result first, before relying on the available property.

If you want to use the result as a form controlling mechanism check for the returned property: data.valid

The data.valid === 1 is true, if the serial code was valid and unsed.

				
					[ sngmbhSerialcodesValidator 
    jspre="" 
    jsafter="mySerialCodeAfter"
]
				
			

Example function

Add your JavaScript code to your page, so that it can be called from the serial code plugin. Make sure the function name your are using for the jsafter-call is matching, the jsafter attribute value. The input parameter is a JSON object returned from the server after the serial code was evaluated.

				
					function mySerialCodeAfter(data) {
    // console.log(data);
    if (data.valid === 1) {
        // do your thing
    }
}
				
			

Styling

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 the 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);
    }
}
				
			

Display registered information to a code

Basic Overview Code Generator

One Time Codes

User can register them self to a code

IP block against brute force attacks (premium only)

de_DEDeutsch