Cách điền trước nội dung SMS qua liên kết trên Website với Navigator

Nếu bạn muốn tạo một trang web giới thiệu các gói khuyến mãi di động. Người dùng truy cập trang, kích hoạt ngay gói khuyến mãi với vài cái nhấp trên màn hình di động. Thật là hấp dẫn và tiện dụng cho người dùng phải không các bạn?

Hình trên có thể là một ví dụ minh họa, người dùng chỉ cần bấm vào nút Đăng Ký, trên điện thoại đã được soạn sẵn nội dung như sau:

1. Tạo giao diện người dùng

Tôi tạo ta một giao diện đơn giản như bên dưới. Bây giờ mời bạn nhấn thử vào nút Đăng Ký xem thế nào nhé.

• XL90U
• 9GBtốc độ cao
• 90.000đ/30 ngày

Chi Tiết Đăng Ký

Và đây là đoạn code để tạo giao diện như trên:

<div class="row-kh">
  <div class="kichhoat">
    <ul>
      <li class="name"><a class="chitiet details boxname" href="/goi-cuoc-xl90u-viettel/">XL90U</a></li>
      <li class="number"><span><span class="big">9GB</span>tốc độ cao</span></li>
      <li class="price">90.000đ/30 ngày</li>
    </ul>
    <a class="chitiet details box-inline" href="javascript:void(0);">Chi Tiết <i class="fa fa-share"></i></a>
    <a class="dangky signup box-inline" onclick="smsbutton('9123','XL90U 0986080055')">Đăng Ký <i class="fa fa-location-arrow"></i></a>
  </div>
</div>

Lưu ý là nút Đăng Ký chỉ hoạt động trên giao diện điện thoại. Phần mẫu tin khuyến mãi trên được tạo bởi đoạn CSS sau:

<style>
  	.row-kh{
  		width: 100%;
  	}
	.kichhoat {
        -webkit-box-shadow: 0px 1px 15px 0px rgb(50 50 50 / 40%);
        -moz-box-shadow: 0px 1px 15px 0px rgba(50, 50, 50, 0.4);
        box-shadow: 0px 1px 15px 0px rgb(50 50 50 / 40%);
        margin: 5px auto;
        border-radius: 20px;
        background: #fff;
        padding: 10px;
        text-align: center;
        position: relative;
      	width: 35%;
    }
  	.kichhoat ul {
        margin-bottom: 10px;
    }
  	.kichhoat .details {
        width: 90px;
        display: block;
        padding: 3px 10px 1px;
        text-align: center;
        background-color: #fff;
        border: 1px solid;
        font-size: 12px;
        border-radius: 10px;
        margin: auto;
        line-height: 17px;
        margin-bottom: 10px;
      	border-color: #00918d;
    }
  	.box-inline {
        width: 110px !important;
        display: inline-block !important;
        padding: 10px !important;
        font-size: 15px !important;
        border-radius: 20px !important;
        margin-left: 5px !important;
    }
  	.kichhoat a.signup, .kichhoat .signup {
        width: 75%;
        cursor: pointer;
        display: block;
        line-height: normal;
        padding: 10px;
        text-align: center;
        color: #fff;
        margin: 0 auto;
        border: 0px;
        font-size: 15px;
        border-radius: 20px;
        margin-bottom: 10px;
        -webkit-box-shadow: 0px 1px 10px 0px rgb(50 50 50 / 50%);
        -moz-box-shadow: 0px 1px 10px 0px rgba(50, 50, 50, 0.5);
        box-shadow: 0px 1px 10px 0px rgb(50 50 50 / 50%);
    }
  	.dangky {
        background-color: #00918d;
    }
  	.kichhoat ul li {
        list-style-type: none;
        color: #000;
      	position: relative;
    	padding: 5px 0px;
    }
  	.kichhoat ul li.price {
        color: #d58530;
    }
  	.kichhoat ul li:before {
        display:none;
    }
</style>

$ads={1}

2. Xây hàm tạo sms body với navigator

Nhưng nút khi người dùng bấm vào nút Đăng Ký thì trình duyệt sẽ chuyển sang giao diện sms của di động bằng cách nào? Đến đây chúng ta sẽ gán cho nút Đăng Ký một đoạn javascript như sau:

<script>
  function smsbutton(num,cont) {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;
    if (/android/i.test(userAgent)) {
      var txtcont = "sms:"+num+"?body="+cont
      	$("a.dangky").attr("href", "sms:"+num+"?body="+cont);
    }
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
      	$("a.dangky").attr("href", "sms:"+num+"&body="+cont);
    }
}
</script>

Khi người dùng bấm vào nút Đăng Ký thì đoạn chương trình javascript này sẽ được thực thi. Đoạn chương trình này mình đã kiểm tra hoạt động tốt trên cả điện thoại sử dụng hệ điều hành Android và IOS. Nếu bạn muốn mở rộng thêm cho người dùng thì có thể tạo thêm cho Windows Phone, RIM, ...