Adding a User Engagement Bar to your Website

Gaining customers is the start, retaining them is another matter. This article provides the code to add a user engagement bar to your website.

Gaining customers is the start, retaining them is another matter. A user engagement bar provides all of the means of engagement you offer in one box, making it easier for customers to connect with your business. This article provides the code to add a user engagement bar to your website.

Below is the HTML, CSS, and JavaScript required.

Step 1 - connect-bar.html

<section class="ct-newsletter-section hidden-print">
  <div class="container">
    <h2 class="ct-section-header">CONNECT WITH WEBCORPCO</h2>
    <div class="ct-newsletter-inline">
      <a class="ct-newsletter-inline__facebook" target="_blank" href="/"><i class="fa fa-facebook"></i><span>facebook</span></a> <a class="ct-newsletter-inline__twitter" target="_blank" href="/"><i class="fa fa-twitter"></i><span>twitter</span></a>
      <div class="ct-newsletter-inline__form">
        <form class="ct-newsletter" action="/" enctype="multipart/form-data" method="post" name="contentForm">
          <label for="newsletter">Get Updates from WEBCORPCO in your inbox</label>
          <div class="form-inline">
            <input id="newsletter" name="newsletter" placeholder="Enter Your Email Address" type="text"> <button class="btn btn-dark" type="submit">SEND</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

Step 2 - connect-bar.css

Download the CSS below and include it in your web page

connect-bar.css

Step 3 - Add the includes below to your web page

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="connect-bar.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

In this article, Solodev showed you how to add a customer engagement bar to your website. By adding this functionality to your website, you increase the chances of users interacting with your website rather than simply looking at it.

Download from Github

Share on Facebook Tweet It