index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Surveys that don't suck!">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Boolean - Customer satisfaction surveys</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="./styles/main.css">
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-97482672-4"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        gtag('config', 'UA-97482672-4');
        gtag('config', 'AW-1058603204');
    </script>
    <!-- start Mixpanel -->
    <script type="text/javascript" src="js/mixpanel.js"></script>
    <!-- end Mixpanel -->
    <script>
        var pattern = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
        function submit(target) {
            if (target) {
                var email = document.getElementById('email_id').value;
                document.getElementById('error_msg').style.visibility = 'hidden';
                if (email) {
                    var validEmail = validateEmail(email);
                    if (validEmail) {
                        track(email, target);
                    } else {
                        document.getElementById('error_msg').innerHTML = 'Please provide a valid email address';
                        document.getElementById('error_msg').style.visibility = 'visible';
                    }
                } else {
                    document.getElementById('error_msg').innerHTML = 'Email address is required';
                    document.getElementById('error_msg').style.visibility = 'visible';
                }
            } else {
                var email = document.getElementById('email_id_one').value;
                document.getElementById('error_msg_one').style.visibility = 'hidden';
                if (email) {
                    var validEmail = validateEmail(email);
                    if (validEmail) {
                        track(email, target);
                    } else {
                        document.getElementById('error_msg_one').innerHTML = 'Please provide a valid email address';
                        document.getElementById('error_msg_one').style.visibility = 'visible';
                    }
                } else {
                    document.getElementById('error_msg_one').innerHTML = 'Email address is required';
                    document.getElementById('error_msg_one').style.visibility = 'visible';
                }
            }
        }
        function validateEmail(email) {
            return pattern.test(email);
        }
        function track(email, target) {
            try{
                mixpanel.track('REQUEST_ACCESS', {
                    'email_id': email
                });
                gtag('event', 'conversion', { 'send_to': 'AW-1058603204/wCXZCJP-r5QBEMSB5PgD' });
                gtag('event', 'click', {
                    event_category: 'outbound',
                    event_label: 'Request Access',
                    transport_type: 'beacon'
                })
                sendEmailDetails(email, target);
            } catch(err) {
                sendEmailDetails(email, target);
            }

            if (target) {
                document.getElementById('req_reg').style.display = 'none';
                document.getElementById('req_success').style.display = 'block';
            } else {
                document.getElementById('req_reg_one').style.display = 'none';
                document.getElementById('req_success_one').style.display = 'block';
            }
        }
        function sendEmailDetails(email, target){
            var http = new XMLHttpRequest();
            var url = "https://leads.booleanapp.com/lead/details?email=" + email;

            http.open("GET", url, true);
            // Send the proper header information along with the request
            http.onreadystatechange = function() { // Call a function when the state changes.
                if(http.readyState == 4 && http.status == 200) {
                    if (target) {
                        document.getElementById('req_reg').style.display = 'none';
                        document.getElementById('req_success').style.display = 'block';
                    } else {
                        document.getElementById('req_reg_one').style.display = 'none';
                        document.getElementById('req_success_one').style.display = 'block';
                    }
                }
            }
            http.send();
        }
    </script>


<script>
document.addEventListener('scroll', function(){
 
    var h =  document.documentElement,
        b =  document.body,
        st =  'scrollTop',
        sh =  'scrollHeight';
 
    var percent = parseInt ( (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100);
 
  console.log(percent + "%");
if (percent == 25)
{
     gtag('event', 'scrolling', {
                    event_category: 'morethan25',
                    event_label: 'homepage',
                    transport_type: 'beacon',
                    'non_interaction': true
                });

}
else if (percent == 50)
{
     gtag('event', 'scrolling', {
                    event_category: 'morethan50',
                    event_label: 'homepage', 
                    transport_type: 'beacon',                 
                    'non_interaction': true
                });

}
else if (percent == 75)
{
     gtag('event', 'scrolling', {
					event_category: 'morethan75',
                    event_label: 'homepage',                  
                    transport_type: 'beacon',
                    'non_interaction': true
                });

}
else if (percent == 90)
{
     gtag('event', 'scrolling', {
					event_category: 'morethan90',
                    event_label: 'homepage',                   
                    transport_type: 'beacon',
                    'non_interaction': true
                });

}
   
});
 
  </script>

</head>

<body>


    <div class="main-container">
        <div class="header">
            <nav>
                <div class="nav-wrapper">
                    <div class="inner-wrap">
                        <img src="images/logo.png" alt="Boolean">
                        <ul class="nav-elements">
                            <li><a href="/blog">Blog</a></li>
                            <li><a href="https://console.booleanapp.com/login">Login</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
        <div class="title-head">
            <span class="main-title">Single Question Customer Satisfaction Surveys</span><br>
            <div class="title-sub-head">
                <span class="sub-title">High Response Rate Guaranteed!</span>
            </div>
        </div>
        <div class="feature-image">
            <div class="request-access">
                <div id="req_reg">
                    <input type="email" id="email_id" required placeholder="Your work email" class="email-input" />
                    <input type="button" class="request-button" value="Request Access" onclick="submit('top')" />
                    <div class="error-msg" id="error_msg"></div>
                </div>
                <div class="request-success" id="req_success">
                    <span>Thank you! We'll be in touch.</span>
                </div>
            </div>
            <div class="no-card">

            </div>
            <div class="chat-bots">
                <img src="images/chatbots.png" alt="Boolean" />
            </div>
        </div>
        <div class="feature-container">
            <div class="feature-title">
                <span class="feature-title-text">
                    FEATURES
                </span>
            </div>
            <div class="feature-content">
                <div class="customizable feature-links feature-hover" onmouseover="displayImage(event, 'customizable')">
                    <div class="image">
                        <img src="images/customizable.png" alt="Customizable" />
                    </div>
                    <p class="title-text">Fully customizable</p>
                    <p class="content-text">Customize the survey email with your own logo, brand name and subject.</p>
                    <div class="mob-feat-img">
                        <img src="images/feat_email2.jpg" alt="Customizable">
                    </div>
                </div>
                <div class="scoring feature-links" onmouseover="displayImage(event, 'scoring')">
                    <div class="image">
                        <img src="images/score.png" alt="Scoring">
                    </div>
                    <p class="title-text">Real time dashboard</p>
                    <p class="content-text">See individual and aggregate responses in our real time dashboard.</p>
                    <div class="mob-feat-img">
                        <img src="images/feat_scoring.jpg" alt="Scoring">
                    </div>
                </div>
                <div class="segmentation feature-links" onmouseover="displayImage(event, 'segmentation')">
                    <div class="image">
                        <img src="images/segmentation.png" alt="Segmentation">
                    </div>
                    <p class="title-text">Segmentation</p>
                    <p class="content-text">Find reasons for positive or negative feedback by segmenting responses.</p>
                    <div class="mob-feat-img">
                        <img src="images/feat_segment.jpg" alt="Segmentation">
                    </div>
                </div>
                <div class="featureimg-wrapper">
                    <div class="feat-img" id="customizable" style="display:block;">
                        <img src="images/feat_email2.jpg" alt="Customizable">
                    </div>
                    <div class="feat-img" id="scoring" style="display:none;">
                        <img src="images/feat_scoring.jpg" alt="Scoring">
                    </div>
                    <div class="feat-img" id="segmentation" style="display:none;">
                        <img src="images/feat_segment.jpg" alt="Segmentation">
                    </div>
                </div>
            </div>
        </div>
        <div class="feature-container">
            <div class="feature-title">
                <span class="feature-title-text">
                    
                </span>
            </div>
            <div class="feature-content">
                <div class="customizable feature-links">
 
                    <div class="image"><img src="images/mailbox.png" alt="Priority" /></div>
                    <p class="title-text">Priority Delivery</p>
                    <p class="content-text">Customize the survey email with your own logo, brand name and subject.</p>
                </div>
                <div class="scoring feature-links">
                    <div class="image"><img src="images/throttle.png" alt="Throttling"/></div>
                    <p class="title-text">Throttling</p>
                    <p class="content-text">Prevent customers from receiving too many surveys.</p>
                </div>
                <div class="segmentation feature-links">
                    <div class="image"><img src="images/api.png" alt="API" /></div>
                    <p class="title-text">API</p>
                    <p class="content-text">Use our API to completely automate survey sending.</p>
                </div>
            </div>
        </div>
                <div class="title-head">
            <span class="main-title">Why Send Satisfaction Surveys?</span><br>
        
        </div>
        <div class="feature-sub-container">
            <div class="feature-content">
                <div class="first-col feature-links">
                    <p class="title-text">Improve Your Product/Service</p>
                    <p class="content-text">Use survey to get actionable feedback from your customers. Use feedback to improve your product/service. See increase customer loyalty. Show customers that you care.</p>
                </div>
                <div class="second-col feature-links">
                    <p class="title-text">Prevent Customer Churn</p>
                    <p class="content-text">Catch your customers before they leave to a competitor. Most customers will silently leave. By sending surveys you can identify these customers and try to retain them.</p>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="company">
                <div class="footer-title">Company</div>
                <div class="content">
                    <p>support@booleanapp.com</p>
                    <a href="/terms.html">
                        <p>Terms of service</p>
                    </a>
                    <a href="/privacy.html">
                        <p>Privacy Policy</p>
                    </a>
                </div>
            </div>
            <div class="product">
                <div class="footer-title">Product</div>
                <div class="content">
                    <a href="https://www.booleanapp.com/docs/" target="_blank">
                        <p>Docs</p>
                    </a>
                    <a href="https://www.booleanapp.com/docs/v1_introduction.html" target="_blank">
                        <p>API</p>
                    </a>
                    <a href="https://listen.booleanapp.com/v1/user/unsubscribe" target="_blank">
                        <p>Unsubscribe</p>
                    </a>
                </div>
            </div>
            <div class="apps">
                <div class="footer-title">App</div>
                <div class="content">
                    <a href="https://play.google.com/store/apps/details?id=com.Boolean" target="_blank">
                        <img src="images/android_app.png" alt="Boolean android app">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <script>
        function displayImage(evt, featureName) {
            var idx, imageContent, featureLinks;
            imageContent = document.getElementsByClassName("feat-img");
            for (idx = 0; idx < imageContent.length; idx++) {
                imageContent[idx].style.display = "none";
            }
            featureLinks = document.getElementsByClassName("feature-links");
            for (idx = 0; idx < featureLinks.length; idx++) {
                featureLinks[idx].className = featureLinks[idx].className.replace("feature-hover", "");
            }
            document.getElementById(featureName).style.display = "block";
            evt.currentTarget.className += " feature-hover";
        }
    </script>
</body>
<p align="center">
    <font size=1>© 2018 Boolean Inc. All rights reserved.</font>
</p>

</html>