diff --git a/cookbook/templates/url_import.html b/cookbook/templates/url_import.html
index 89b90dcac..f5c66db83 100644
--- a/cookbook/templates/url_import.html
+++ b/cookbook/templates/url_import.html
@@ -41,7 +41,7 @@
         
         <div class="tab-content" id="nav-tabContent">
             <!-- Import URL -->
-            <div class="tab-pane fade show active" id="nav-url" role="tabpanel">
+            <div class="tab-pane fade show active" role="tabpanel">
                 <div class="btn-group btn-group-toggle" data-toggle="buttons">
                     <label class="btn btn-outline-info btn-sm active" @click="automatic=true">
                     <input type="radio"  autocomplete="off" checked> Automatic
@@ -706,6 +706,41 @@
                         this.makeToast(gettext('Error'), msg, 'danger')
                     })
                 },
+                
+                loadBookmarklet: function(id_bkmk) {
+                    let uri = window.location.search.substring(1); 
+                    let params = new URLSearchParams(uri);
+                    q = params.get("id")
+                    console.log(q)
+                    this.error = undefined
+                    this.loading = true
+                    this.$http.get("{% url 'api:bookmarkletimport-list' %}?id=" + id_bkmk ).then((response) => {
+                        console.log(response.data)
+                        this.automatic = false
+                        this.source_data = response.data[0]['html']
+                        this.remote_url = response.data[0]['url']
+                        this.loadSource()
+                    }).catch((err) => {
+                        this.error = err.data
+                        this.loading = false
+                        console.log(err)
+                        this.makeToast(gettext('Error'), gettext('There was an error loading bookmarklet!') + err.bodyText, 'danger')
+                    })
+                },
+                deleteBookmarklet: function(id_bkmk) {
+                    this.error = undefined
+                    this.$http.delete("{% url 'api:bookmarkletimport-list' %}" + id_bkmk +"/").then((response) => {
+                    }).catch((err) => {
+                        this.error = err.data
+                        console.log(err)
+                        this.makeToast(gettext('Error'), gettext('There was an error deleting bookmarklet!') + err.bodyText, 'danger')
+                    })
+                },
+                loadRecipeManual: function () {
+                    this.error = undefined
+                    this.preview = false
+                    this.recipe_data = this.recipe_json
+                },
                 showRecipe: function() {
                     this.preview = false
                     this.recipe_data = this.recipe_json