<h4>Generate mailto: links for Intercom</h4>
  <div class="form-group">
    <label for="subject">Subject</label>
    <input type="text" class="form-control" id="subject" aria-describedby="emailHelp" placeholder="Enter subject">
    <small id="emailHelp" class="form-text text-muted">Leave blank for no subject.</small>
  </div>

  <div class="form-group">
    <label for="to">Email to send to</label>
    <input type="email" class="form-control" id="to" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">Leave blank if unknown.</small>
  </div>

  <div class="form-group">
    <label for="cc">Email to CC</label>
    <input type="email" class="form-control" id="cc" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">Leave blank for no cc.</small>
  </div>

<div class="form-group">
    <label for="text">Email content (you can use custom tags)</label>
    <textarea class="form-control" id="text" rows="8">Hey there,

I need your help installing Upscope (a screen sharing software we need) on our website.
You can find the instructions here: https://xyz.com/install/{{ company.remote_company_id }}

Feel free to ask if you have any questions.

{{ first_name }}</textarea>
  </div>
  <button class="btn btn-primary" onClick="insertLink()">Generate link</button>
  <button class="btn btn-secondary" onClick="tryLink()">Try it yourself</button>

<br />
<br />
  <div class="form-group">
    <label for="link">Link</label>
    <input type="text" class="form-control" id="link" disabled>
  </div>

function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*"]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

function getLink(encodeEverything) {
  var subject = document.getElementById('subject').value,
      to = document.getElementById('to').value || '',
      cc = document.getElementById('cc').value,
      text = document.getElementById('text').value;
  encodeEverything = encodeEverything || false;
  var link = 'mailto:' + to + '?';
  if(subject)
     link += 'subject=' + fixedEncodeURIComponent(subject) + '&';
  
  if(cc)
     link += 'cc=' + cc + '&';
  
  link += 'body=';
  
  link += fixedEncodeURIComponent(text);
  
  if(!encodeEverything){
    link = link.split(encodeURIComponent('{{ ')).join('{{ ')
    .split(encodeURIComponent(' }}')).join(' }}')
    .split(encodeURIComponent('{{')).join('{{')
    .split(encodeURIComponent('}}')).join('}}');
  }
  
  return link;
}

function insertLink() {
  var link = getLink();
  document.getElementById('link').value = link;
}

function tryLink() {
  window.open(getLink(true));
}