diff --git a/server.js b/server.js
index 6a3cc5d..627be7a 100644
--- a/server.js
+++ b/server.js
@@ -38,7 +38,9 @@ app.use(renderer)
 // Views
 
 app.get('/', (req, res) => {
-  res.render('index')
+  res.render('index', {
+    baseUrl: req.protocol + '://' + req.headers.host,
+  })
 })
 
 app.get('/fetch/', (req, res) => {
diff --git a/static/bookmarklet.js b/static/bookmarklet.js
index d4084c8..1dc78bf 100644
--- a/static/bookmarklet.js
+++ b/static/bookmarklet.js
@@ -1,6 +1,6 @@
 (() => {
 
-  const baseUrl = 'http://localhost:4000'
+  const baseUrl = document.querySelector('[data-seance-url]').dataset.seanceUrl || 'http://localhost:4000'
 
   function resetTitle() {
     document.title = document.title.replace('[Loading...] ', '')
diff --git a/views/index.vue b/views/index.vue
index 51b75c0..c607922 100644
--- a/views/index.vue
+++ b/views/index.vue
@@ -29,7 +29,7 @@
       <h1 class="title">{{ title }}</h1>
       <form action="/fetch/medium/" method="post">
         <input type="search" class="input is-medium is-rounded is-focused" placeholder="Enter a Medium link..."/>
-        <p>or, use the bookmarklet <a class="button is-primary is-small" href="javascript:(()=>{document.title='[Loading...] '+document.title;s=document.createElement('script');s.src='http://localhost:4000/bookmarklet.js';document.body.appendChild(s)})()">Add to Seance</a></p>
+        <p>or, use the bookmarklet <a class="button is-primary is-small" :href="bookmarklet">Add to Seance</a></p>
       </form>
     </div>
 
@@ -43,7 +43,12 @@
       return {
         title: 'Seance',
         user: null,
-        host: 'http://localhost:4000',
+        baseUrl: 'http://localhost:4000',
+      }
+    },
+    computed: {
+      bookmarklet () {
+        return `javascript:(()=>{document.title='[Loading...] '+document.title;s=document.createElement('script');s.src='${this.baseUrl}/bookmarklet.js';s.dataset.seanceUrl='${this.baseUrl}';document.body.appendChild(s)})()`
       }
     }
   }