1. Working with the HTML file:
1.1. If you have an index.html file, rename it to index.php.
1.2. At the beginning of the file, insert the following code:
<?php
function generate_form_token() {
$_SESSION['csrf_token'] = substr(str_shuffle('qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'), 0, 10);
return $_SESSION['csrf_token'];
}
?>
1.3. In the phone number input form, insert the following line:
<input name="csrf_token" id="csrf_token" type="hidden" value="<?= generate_form_token(); ?>">
1.4. At the end of the file, include jquery.js, plugin.js, and then your local JS files. The order is important.
2. Working with the JS file:
2.1. In your JS file, add the code to configure and initialize the plugin:
const config = {
msisdnInputSelector: "#msisdn" is the selector for the phone number input.
msisdnButtonSelector: "#subscribe" is the selector for the button for submitting the phone number.
otpFormSelector: "#pin_code" is the selector for the form for submitting the pin code.
otpInputSelector: "#mw_pin_code" is the selector for the input for entering the pin code.
otpButtonSelector: "#verify" is the selector for the button for submitting the pin code.
errorMsgSelector: ".mw_error_msg" is the selector for the element for displaying error messages.
successLinkSelector: "#success_link" is the selector for the element for displaying successful subscription.
footerRulesSelector: "#footer_text" is the selector for the element for displaying rules in the footer.
footerTermsSelector: "#terms" is the selector for the element for displaying terms in the footer.
csrfToken: $('#csrf_token').val(),
reqid: "",
hooks: {
onEnableButton: function(button) {
},
onDisableButton: function(button) {
},
onSuccessPhoneNumber: function(response) {
},
onErrorPhoneNumber: function(error) {
},
onSuccessOtpCode: function(response) {
},
onErrorOtpCode: function(error) {
},
onMsisdnInput: function(phoneNumber, maxLength) {
},
onOtpInput: function(otpCode) {
},
onEnableOtpButton: function(button) {
},
onDisableOtpButton: function(button) {
},
onOtpFormSubmit: function(event, form) {
},
onErrorMessage: function(message, config) {
},
onUpdateFooter: function(footerText, termsText) {
}
}
};
Ensure that this code is inside the block:
document.addEventListener("DOMContentLoaded", function () { ... });
This ensures that the code runs only after the DOM is fully loaded. This is important because if the script tries to access elements that haven’t loaded yet, it will cause errors. The DOMContentLoaded event occurs when all HTML has been fully loaded and processed.
2.2. Next, configure the selectors for the form elements used by the plugin.
Selectors are used to tell the plugin which elements on the page it should interact with. For example, a selector for the phone number input allows the plugin to find and use this input for user data entry.
To find the selectors, you need to look at the HTML code of your page and identify which elements will be used by the plugin. For example:
<input type="tel" id="msisdn" name="msisdn">
<button id="subscribe">Subscribe</button>
<form id="pin_code">
<input type="text" id="mw_pin_code">
<button id="verify">Verify</button>
</form>
<div class="mw_error_msg"></div>
<div id="success_link" style="display: none;">Your subscription has been successfully completed!</div>
<div id="footer_text"></div>
<div id="terms"></div>
Based on this HTML code, you can configure the selectors as follows:
msisdnInputSelector: "#msisdn" is the selector for the phone number input.
msisdnButtonSelector: "#subscribe" is the selector for the button for submitting the phone number.
otpFormSelector: "#pin_code" is the selector for the form for submitting the pin code.
otpInputSelector: "#mw_pin_code" is the selector for the input for entering the pin code.
otpButtonSelector: "#verify" is the selector for the button for submitting the pin code.
errorMsgSelector: ".mw_error_msg" is the selector for the element for displaying error messages.
successLinkSelector: "#success_link" is the selector for the element for displaying successful subscription.
footerRulesSelector: "#footer_text" is the selector for the element for displaying rules in the footer.
footerTermsSelector: "#terms" is the selector for the element for displaying terms in the footer.
2.3. Next, configure the hook methods.
Hook methods in the plugin configuration provide a way for developers to extend the plugin’s functionality and add their own actions in response to specific events. For example, the plugin tracks the length of the entered phone number, and when the user has entered all the digits of the number, the hook onEnableButton: function(button) { … } is triggered.
Inside the method, you need to specify the code for the subscribe button to change color and become active.
Conversely, when the user deletes a digit in the number and the number becomes invalid again, the hook onDisableButton: function(button) { … } is triggered.
Inside the method, you need to specify the code for the subscribe button to change color and become inactive.
Below is a description of all the hooks:
onEnableButton: This hook is called when the phone number submit button should be enabled (activated).
onDisableButton: This hook is called when the phone number submit button should be disabled (deactivated).
onSuccessPhoneNumber: This hook is called upon successful submission and verification of the phone number.
onErrorPhoneNumber: This hook is called when there is an error in verifying the phone number.
onSuccessOtpCode: This hook is called upon successful submission and verification of the pin code.
onErrorOtpCode: This hook is called when there is an error in verifying the pin code.
onMsisdnInput: This hook is called when the user enters the phone number.
onOtpInput: This hook is called when the user enters the pin code.
onEnableOtpButton: This hook is called when the pin code submit button should be enabled (activated).
onDisableOtpButton: This hook is called when the pin code submit button should be disabled (deactivated).
onOtpFormSubmit: This hook is called when the pin code form is submitted.
onErrorMessage: This hook is called to display error messages.
onUpdateFooter: This hook is called to update the text in the footer.
Some hooks are mandatory:
onSuccessPhoneNumber: Here you need to hide the phone number input form and show the pin code input form.
onErrorMessage: This hook is called to display error messages.
onUpdateFooter: To display the mandatory offer conditions.
onSuccessOtpCode: Upon successful submission and verification of the pin code.
If it is difficult to understand what a hook is for and whether it is needed on your specific landing page, insert alert() with the name of the hook inside the hooks and track their output. For example:
onEnableButton: function(button) {
alert('onEnableButton');
},
onDisableButton: function(button) {
alert('onDisableButton');
},
This approach will help you better understand the plugin’s algorithm and check if the selectors were specified correctly.
2.4. To test your landing page and simulate successful phone number and pin code inputs, enter a number starting with the digit 2 after the country prefix. For example:
UAE (United Arab Emirates) – country prefix 971, enter the number 234567890, the onEnableButton hook should trigger on the digit 0.
OM (Oman) – country prefix 968, enter the number 23456789, the onEnableButton hook should trigger on the digit 9, as phone numbers in this country have fewer digits than in UAE.
3. After preparing the landing page, it must be submitted for approval. You can study a working example of a landing page by following the link.
