diff --git a/sourcing/static/js/build_links.js b/sourcing/static/js/build_links.js
index e5ee16a..4c551cb 100644
--- a/sourcing/static/js/build_links.js
+++ b/sourcing/static/js/build_links.js
@@ -1,3 +1,15 @@
+var spans = {};
+
+function set_span(doc_id, start, length) {
+  spans[doc_id] = {};
+  spans[doc_id]['start'] = start;
+  spans[doc_id]['length'] = length;
+
+  var display_span = $('#' + doc_id + '-span');
+  display_span.text(`${doc_id}: start=${start}, length=${length}`);
+  display_span.show();
+}
+
 function one_line(e, range) {
     var text = e.text();
     var before = text.substring(0, range.startOffset);
@@ -40,10 +52,15 @@ function highlight_selection() {
   var start_element = range.startContainer.parentElement;
   var end_element = range.endContainer.parentElement;
 
+  doc_id = start_element.closest("div.document").id;
+  console.log('document:', doc_id)
+
   var start = parseInt(start_element.getAttribute('data-start')) + range.startOffset;
   var end = parseInt(end_element.getAttribute('data-start')) + range.endOffset;
   var length = end - start;
 
+  set_span(doc_id, start, length);
+
   console.log('start', start, 'length', length);
 
   if (start_element == end_element) {
@@ -66,11 +83,28 @@ function highlight_selection() {
 }
 
 $('#new-link').hide();
+$('#instruction2').hide();
+$('#instruction2').hide();
+$('#left-span').hide();
+$('#right-span').hide();
+$('#save-form').hide();
+
 $('#new-link').click((e) => {
   var selection = window.getSelection();
   highlight_selection();
   selection.removeAllRanges();
   $('#new-link').hide();
+  if ($('#instruction1').is(":visible")) {
+    $('#instruction1').hide();
+    $('#instruction2').show();
+  } else {
+    $('#instruction2').hide();
+    $('input[name="left_start"]').val(spans['left']['start']);
+    $('input[name="left_length"]').val(spans['left']['length']);
+    $('input[name="right_start"]').val(spans['right']['start']);
+    $('input[name="right_length"]').val(spans['right']['length']);
+    $('#save-form').show();
+  }
 });
 
 document.addEventListener('selectionchange', () => {
diff --git a/sourcing/templates/build_links.html b/sourcing/templates/build_links.html
index 9ec9289..2b647ad 100644
--- a/sourcing/templates/build_links.html
+++ b/sourcing/templates/build_links.html
@@ -41,8 +41,8 @@ body, html {
 </style>
 {% endblock %}
 
-{% macro show_doc(doc) %}
-  <div class="card" id="text1">
+{% macro show_doc(doc, name) %}
+  <div class="card document" id="{{ name }}">
     <div class="card-header">{{ doc.raw_title() }}</div>
     <div class="card-body">
 {%- for start, line in iter_lines(doc.text) if line != '\r\n' %}
@@ -59,14 +59,28 @@ body, html {
   <h3>Link builder</h3>
 
   {% if doc1 and doc2 %}
-    <p>Select something in the first document.</p>
+    <p id="instruction1">Select something in the first document.</p>
+    <p id="instruction2">Select something in the second document.</p>
+
+    <div class="margin-bottom-zero" id="left-span"></div>
+    <div class="margin-bottom-zero" id="right-span"></div>
     <button class="btn btn-primary" id="new-link">confirm selection</button>
+
+    <div id="save-form">
+    <form method="POST">
+      <input name="left_start" type="hidden" value="">
+      <input name="left_length" type="hidden" value="">
+      <input name="right_start" type="hidden" value="">
+      <input name="right_length" type="hidden" value="">
+      <input type="submit" class="btn btn-primary" value="save link">
+    </form>
+    </div>
   {% endif %}
 
 </div>
 <div class="col col2">
   {% if doc1 %}
-    {{ show_doc(doc1) }}
+    {{ show_doc(doc1, 'left') }}
   {% else %}
   <h3>select document 1</h3>
   <ul>
@@ -81,7 +95,7 @@ body, html {
 </div>
 <div class="col col3">
   {% if doc2 %}
-    {{ show_doc(doc2) }}
+    {{ show_doc(doc2, 'right') }}
   {% else %}
   <h3>select document 2</h3>
   <ul>
diff --git a/sourcing/view.py b/sourcing/view.py
index 38503ff..3ecafb4 100644
--- a/sourcing/view.py
+++ b/sourcing/view.py
@@ -258,7 +258,32 @@ def delete_item(username, hashid):
     flash('item deleted')
     return redirect_to_home()
 
-@bp.route('/build_links')
+def save_new_xanalink(doc1, doc2):
+    start1 = request.form['left_start']
+    length1 = request.form['left_length']
+    start2 = request.form['right_start']
+    length2 = request.form['right_length']
+
+    assert length1
+    assert length2
+
+    span1 = f'{doc1.external_url},start={start1},length={length1}'
+    span2 = f'{doc2.external_url},start={start2},length={length2}'
+    lines = [
+        'type=',
+        'facet=',
+        'span: ' + span1,
+        'facet=',
+        'span: ' + span2,
+    ]
+
+    text = ''.join(line + '\n' for line in lines)
+
+    obj = XanaLink(user=current_user, text=text)
+    session.add(obj)
+    session.commit()
+
+@bp.route('/build_links', methods=['GET', 'POST'])
 def build_links():
     doc1, doc2 = None, None
     hashid1, hashid2 = None, None
@@ -268,6 +293,11 @@ def build_links():
     if 'doc2' in request.args:
         hashid2 = request.args['doc2']
         doc2 = Item.get_by_hashid(hashid2)
+
+    if request.method == 'POST':
+        save_new_xanalink(doc1, doc2)
+        return redirect(request.full_path)
+
     return render_template('build_links.html',
                            iter_lines=iter_lines,
                            nbsp_at_start=nbsp_at_start,
@@ -424,7 +454,6 @@ def new_xanalink():
     for facet in data['facets']:
         lines += ['facet='] + facet
     text = ''.join(line + '\n' for line in lines)
-    print(text)
     obj = XanaLink(user=current_user, text=text)
     session.add(obj)
     session.commit()