diff --git a/package-lock.json b/package-lock.json
index b3111a3..380114f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4670,6 +4670,11 @@
         "mime-types": "^2.1.12"
       }
     },
+    "form-urlencoded": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/form-urlencoded/-/form-urlencoded-1.2.0.tgz",
+      "integrity": "sha1-Fs4sr6dtLki55ROrcjIorqWZM5Y="
+    },
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -4824,14 +4829,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4851,8 +4854,7 @@
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
@@ -5000,7 +5002,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -6637,6 +6638,11 @@
       "integrity": "sha1-vsECT4WxvZbL6kBbI8FK1kQ6b4E=",
       "dev": true
     },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+    },
     "lodash.kebabcase": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
@@ -8459,8 +8465,7 @@
     "querystring": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
-      "dev": true
+      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA="
     },
     "querystring-es3": {
       "version": "0.2.1",
@@ -8808,8 +8813,7 @@
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
-      "dev": true
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
     "resolve": {
       "version": "1.10.0",
@@ -10324,6 +10328,33 @@
         }
       }
     },
+    "unsplash-js": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/unsplash-js/-/unsplash-js-4.8.0.tgz",
+      "integrity": "sha1-ilqMy985QQ/7n91fBO0mUepkQ0k=",
+      "requires": {
+        "form-urlencoded": "1.2.0",
+        "lodash.get": "4.4.2",
+        "querystring": "0.2.0",
+        "url-parse": "1.2.0"
+      },
+      "dependencies": {
+        "querystringify": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-1.0.0.tgz",
+          "integrity": "sha1-YoYkIRLFtxL6ZU5SZlK/ahP/Bcs="
+        },
+        "url-parse": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.2.0.tgz",
+          "integrity": "sha512-DT1XbYAfmQP65M/mE6OALxmXzZ/z1+e5zk2TcSKe/KiYbNGZxgtttzC0mR/sjopbpOXcbniq7eIKmocJnUWlEw==",
+          "requires": {
+            "querystringify": "~1.0.0",
+            "requires-port": "~1.0.0"
+          }
+        }
+      }
+    },
     "upath": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/upath/-/upath-1.1.0.tgz",
diff --git a/package.json b/package.json
index f52ae71..31b09c5 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "deploy-dev": "npm run build-dev && .\\deploy.bat"
   },
   "dependencies": {
+    "unsplash-js": "^4.8.0",
     "vue": "^2.5.21"
   },
   "devDependencies": {
@@ -36,8 +37,8 @@
       "parser": "babel-eslint"
     },
     "globals": {
-        "CustomElement": false
-      }
+      "CustomElement": false
+    }
   },
   "postcss": {
     "plugins": {
diff --git a/src/App.vue b/src/App.vue
index 7fd7270..eb1ed7a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,19 +1,24 @@
 /* global CustomElement */
 <template>
   <div id="app" v-if="loaded">
-    <input :disabled="element.disabled" v-model="element.value" placeholder="edit me">
-    <p>Saved: {{ value }}</p>
-    <p>AK: {{ element.config.accessKey }}</p>
-    <p>SK: {{ element.config.secretKey }}</p>
+    <input :disabled="element.disabled" v-model="searchTerm" placeholder="edit me">
+    <button @click="searchPhotos">Search</button>
+    <p>Saved: {{ value }} {{ height }}</p>
+    <pre v-html="searchResults"></pre>
   </div>
 </template>
 
 <script>
+import Unsplash, { toJson } from 'unsplash-js'
+
 export default {
   name: 'app',
   data: function () {
     return {
       loaded: false,
+      searchTerm: "",
+      searchResults: "",
+      height: "",
       element: {},
       configuration: {}
     }
@@ -21,6 +26,38 @@ export default {
   computed: {
     value() {
       return this.element.value
+    },
+    unsplashInstance() {
+      return this.loaded
+        ? new Unsplash({
+            applicationId: this.element.config.accessKey,
+            secret: this.element.config.secretKey
+          })
+        : null
+    }
+  },
+  methods: {
+    searchPhotos() {
+      if(this.unsplashInstance && this.searchTerm) {
+        this.unsplashInstance.search.photos(this.searchTerm)
+        .then(toJson)
+        .then(json => {
+          this.searchResults = json
+        })
+      }
+    },
+    updateSize() {
+      // Update the custom element height in the Kentico UI.
+      const height = Math.max(
+        document.body.scrollHeight,
+        document.body.offsetHeight,
+        document.documentElement.clientHeight,
+        document.documentElement.scrollHeight,
+        document.documentElement.offsetHeight
+      )
+
+      this.height = height
+      CustomElement.setHeight(height);
     }
   },
   watch: {
@@ -32,15 +69,19 @@ export default {
   },
   created: function() {
     CustomElement.init((element, context) => {
-    // Set up the element with initial value
-    this.element = element
-    this.context = context
-    this.loaded = true
-    // console.log(element)
-    // console.log(context)
-})
+      // Set up the element with initial value
+      this.element = element
+      this.context = context
+      this.loaded = true
+      this.updateSize()
+    })
+  },
+  updated: function() {
+    this.updateSize()
   }
 }
+
+
 </script>
 
 <style>