diff --git a/app/views/paginable/templates/_publicly_visible.html.erb b/app/views/paginable/templates/_publicly_visible.html.erb
index 0db6cae..069cc52 100644
--- a/app/views/paginable/templates/_publicly_visible.html.erb
+++ b/app/views/paginable/templates/_publicly_visible.html.erb
@@ -25,7 +25,7 @@
           </td>
           <td class="text-center">
             <%= direct_link(template) %>
-            <a data-toggle="modal" data-target="#link-modal"><span class="fa fa-clipboard"></span></a>
+            <a class="copy-link" data-toggle="modal" data-target="#link-modal"><span class="fa fa-clipboard"></span></a>
           </td>
         </tr>
       <% end %>
diff --git a/lib/assets/javascripts/application.js b/lib/assets/javascripts/application.js
index bae67df..1640fe2 100644
--- a/lib/assets/javascripts/application.js
+++ b/lib/assets/javascripts/application.js
@@ -45,3 +45,4 @@
 import './views/users/notification_preferences';
 import './views/users/admin_grant_permissions';
 import './views/super_admin/notifications/edit';
+import './views/public_templates/show';
diff --git a/lib/assets/javascripts/views/public_templates/show.js b/lib/assets/javascripts/views/public_templates/show.js
new file mode 100644
index 0000000..16bf07f
--- /dev/null
+++ b/lib/assets/javascripts/views/public_templates/show.js
@@ -0,0 +1,15 @@
+$(() => {
+  $('.copy-link').click((e) => {
+    const link = $(e.currentTarget).siblings('.direct-link');
+
+    $('#link-modal').on('show.bs.modal', () => {
+      $('#link').val(link.attr('href'));
+    });
+  });
+
+  $('#copy-link-btn').click(() => {
+    $('#link').select();
+    // eslint-disable-next-line
+    document.execCommand('copy');
+  });
+});