To learn how to write a viral script, you have some knowledge of Html, CSS and Javascript. When I heard about viral script, I thought that it is some kind of complicated coding and hard to learn. After checking one of wishing viral script source code, found that people just do copy and paste of the source code and share in WhatsApp groups.
What is a viral script?
A viral script is a simple web page that shows the sender’s name, a message with a share button. It gives the option to share the same message with a new name.
How to design a viral script?
Anyone can create their own viral script if know some css & javascript. You don’t need server side script. Open any plain editor like notepad, notepad++ and add the following component.
Background
You can take select animated background (gif files) for your script as per event (Diwali, Navratri, and Others). from Giphy.com, Tenor, or Google (Please check copyright). Search for “Star“
Example:
Marquee Tag
Marquee tag is used for scrolling piece of text or image displayed either horizontally across or vertically down your web site page. We can use this tag to display flowers, festive icons on both side of page
Example
Sticky Form & Share Button
This form you need to place at the bottom of page, so your visitor enter a name and share the same page with his name.
User Name Placeholder
You have set a place holder for user name, whenever he/she enter name will display on screen.
Example
Image
Add some transparent image to add value to your page.
Message
Finally add a message, wishing message.
Writing a Viral Script source code
The design
Meta tag
Don’t forgot to set meta tags, used by application to get information about your page.
<title>ЁЯЩПЁЯЩП рд╢реБрдн рдирд╡рд░рд╛рддреНрд░рд┐ ЁЯЩПЁЯЩП</title> <meta property="og:type" content="Make your own wonderful wish for you loved one" /> <meta property="og:title" content="Special Gift For you" /> <meta property="og:description" content="[ CLICK HERE ]" /> <meta property="og:site_name" content="Happy Navratri" /> <link rel="icon" type="image/png" sizes="32x32" href="path of your icon">
Stylesheet
I am using bootstrap 4 and google font for neon effects.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Sofia:&effect=neon' rel='stylesheet'>
Setting up a background image
<body style="background-image : url( 'https://64.media.tumblr.com/3982b8412d11beff9f0a13e98fa1a585/tumblr_ovv15g1TTw1qeyvpto1_500.gifv')">
Setting up a marquee tag
To fixed the position of marquee tags, i have created sides, sideleft and sideright style classes
In Style
.sides {
position: fixed;
width: auto;
height: 100%;
top: 1%;
color: #000;
}
.sideleft {
left: 1%;
}
.sideright {
right: 1%;
}
In Body
<marquee class="sides sideleft" behavior="scroll" direction="up" scrolldelay="5">
<img src="add your animated icon here" height="25px" width="25px" /><br>
<img src="add your animated icon here" height="25px" width="25px" /><br/>
<!-- add more -->
</marquee>
<marquee class="sides sideright" behavior="scroll" direction="down" scrolldelay="5">
<img src="add your animated icon here" height="25px" width="25px" /><br/>
<img src="add your animated icon here" height="25px" width="25px" /><br/>
<!-- add more -->
</marquee>
User name Place Holder
<h2 class="font-effect-neon " id="visitorName"></h2>
Image and Message
Add your image and messages and use to animate
In Style
@keyframes pulse {
0%,
100% {
transform: scale(1.1);
}
50% {
transform: scale(1);
}
}
.msg {
color: blue;
font: 100 1.5em/1 Oswald, sans-serif;
line-height: 1.5;
font-weight: bold;
}
.shadowred {
text-shadow: 1px 1px 3px white, 1px 1px 3px white, -1px -1px 3px white, -1px -1px 3px white;
color: red;
}
.shadowyellow {
text-shadow: 1px 1px 3px #FF0000, 1px 1px 3px #FF0000, -1px -1px 3px #FF0000, -1px -1px 3px #FF0000;
color: yellow;
}
In Body
<img src="path to image" style="animation: pulse 2.5s infinite; max-width:200px; width:80%;"><br/>
<div class="msg">
<p class='shadowred'>
рд▓рд╛рд▓ рд░рдВрдЧ рдХреА рдЪреБрдирд░реА рд╕реЗ <br/>рд╕рдЬрд╛ рдорд╛рдБ рдХрд╛ рджрд░рдмрд╛рд░;<br/>рд╣рд░реНрд╖рд┐рдд рд╣реБрдЖ рд╕рдВрд╕рд╛рд░!<br/>рдирдиреНрд╣реЗрдВ рдирдиреНрд╣реЗрдВ реШрджрдореЛрдВ рд╕реЗ,<br/> рдорд╛рдБ рдЖрдпреЗ рдЖрдкрдХреЗ рджреНрд╡рд╛рд░;<br/> рдореБрдмрд╛рд░рдХ рд╣реЛ рдЖрдкрдХреЛ <br/>рдирд╡рд░рд╛рддреНрд░реА рдХрд╛ рддреНрдпреЛрд╣рд╛рд░! <br/>!! рдЬрдп рдорд╛рддрд╛ рджреА !!
</p>
<p class='shadowyellow'>
!! рдкрд╣рд▓реЗ рдорд╛рдБ рдХреА рдкреВрдЬрд╛,<br>рдЙрд╕рдХреЗ рдмрд╛рдж рдХреЛрдИ рдХрд╛рдо рджреВрдЬрд╛ !!
</p>
</div>
Form & Share Button
<div class="fixed-bottom p-3">
<div id="form">
<div class="input-group input-group-lg">
<input type="text" name="name" id="nameTextBox" class="form-control" placeholder="Enter your Name" required>
<div class="input-group-append">
<a class="btn btn-success btn-lg" onclick="createGreeting()">Go</a>
</div>
</div>
</div>
<a class="sharebtn btn btn-success" href="javascript:void(0)" onclick="shareActionWA()">
<img src="whatsapp image path">
<b style="font-size: 15px;position: relative;top: -3px;margin: 0 10px;">Share with your Friends</b>
<img src="whatsapp image path">
</a>
</div>
The Script
Every time script shows the name, but from where you get this name. Suppose your URL name like http://www.example.com/index.html, than how you get the name of a person? So, whenever the user enters the name the URL will change to http://www.example.com/index.html?name=Balvinder.
To get name form url check the below script
var jqs = function(sParam) {
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split("&");
for (var i = 0; i <
sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split("=");
if (sParameterName[0] === sParam) {
return sParameterName[1];
}
}
};
var name = decodeURI(jqs("qs"));
if (typeof jqs("qs") === "undefined") {
name = "";
}
And to check if name is there, run checkname function. This function check if name is provided than display in the user name place hoder.
var checkName = function() {
if (name.length !== 0) {
name = name.replace(/-/g, " ");
document.querySelector("#visitorName").innerHTML = name;
} else {
document.querySelector("#visitorName").innerHTML = "";
}
};
checkName();
Next, keep the share button hidden until unless the user clicks on the go button. you can do this by hiding the “sharebtn” in style.
In Style
.sharebtn {
display: none;
}
Whenever users enter the name click on the go button “createGreeting” function will call. This will get the name form the input box and show in the user name placeholder and hid the form and display the “sharebtn”.
var createGreeting = function() {
sname = document.querySelector("#nameTextBox").value;
sname = sname.replace(/@/g, "-");
sname = sname.replace(/%40/g, "-");
sname = sname.replace(/\./g, "-");
if (sname.trim() != "") {
document.querySelector("#form").style.display = "none";
document.querySelector(".sharebtn").style.display = "block";
document.querySelector("#visitorName").innerHTML = sname;
window.scrollTo(0, 0);
} else {
//alert("Please Type Your Name First");
document.getElementById("nameTextBox").focus();
}
}
Finally, When users click on the share button it will open the WhatsApp URL with your message in App or in web-based on which device you are using.
Read Also Share web page like a native app
var shareActionWA = function() {
var shareString = "";
var whatsappHref;
shareString += "*" + sname + "*";
shareString += " рдиреЗ рдЖрдкрдХреЗ рд▓рд┐рдП рдХреБрдЫ рдЦрд╛рд╕ ЁЯОБрднреЗрдЬрд╛ рд╣реИ%0AЁЯЩП%0AЁЯСЗЁЯСЗЁЯСЗЁЯСЗ %0A"
shareString += (window.location.href.split("?")[0] + "?bl=" + sname).replace("#", "").replace(/ /g, "-");
whatsappHref = "whatsapp://send?text=" + shareString;
window.location.href = whatsappHref;
};
Conclusion
The viral script is great, you can use them with no issue. Never use the viral script with Adsense code and other Ad click program. This is not a good practice. The good use of a viral script is to promote your brands.
And instead of copy & paste, try to create your own script code. You can use above code for reference.
