how keep entire link

I found this code and is working fine, from messenger opens whatsapp sending pre-filled message. The problem is the link get cuts by =

Link from Messenger run the script: https://website.com/ShareonWhatsApp.html?text=Hi%20how%20are%20You!%20https://m.me/7673?ref=test--12345

Missing =test--12345

<body>
<script type="text/javascript">
    function getQueryVariable(variable) {
        var query = window
            .location
            .search
            .substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return(false);
    }
    function _isMobile() {
        var isMobile = (/iphone|ipod|android|ie|blackberry/i).test(navigator.userAgent.toLowerCase());
        return isMobile;
    }
    if (_isMobile()) {
        location.assign("whatsapp://send?text=" + getQueryVariable("text"))
    } else {
        location.assign("http://web.whatsapp.com/send?text=" + getQueryVariable("text"))
    }
</script>
Please close this window to get back to Messenger

Solution

You want to send a message on WhatsApp?

//<![CDATA[
/* js/external.js */
var doc, bod, nav, M, I, mobile, WhatMessage; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body; nav = navigator;
M = function(tag){
  return doc.createElement(tag);
}
I = function(id){
  return doc.getElementById(id);
}
mobile = nav.userAgent.match(/Mobi/i);
WhatMessage = function(phone){
  this.phone = phone;
  this.link = function(message, linkText){
    var a = M('a');
    a.textContent = linkText || message;
    a.href = 'https://api.whatsapp.com/send?phone='+this.phone+'&text='+encodeURIComponent(message);
    return a;
  }
}
var wm = new WhatMessage('15551234567'), content = I('content');
content.appendChild(wm.link('See the Message'));
}); // load end
//]]>

/* css/external.css */
*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%;
}
body{
  background:#ccc;
}
#content{
  padding:7px;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script type='text/javascript' src='js/external.js'></script>
  </head>
<body>
  <div id='content'>
  </div>
</body>
</html>

This won't work on on iframe, which this page loads into on this site, so right click and open in a new tab, to see it work. Should work on your site.