Viral Script

How to write a viral script?

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:

animated background
Source: Giphy.com

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

animated marquee tag

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.

Enter your name
Ask Name
Share Button
Share Button

User Name Placeholder

You have set a place holder for user name, whenever he/she enter name will display on screen.

Example

Neon Effects
Name placeholder

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.

Neon effect
<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.