diff --git a/src/components/ChatWindow.vue b/src/components/ChatWindow.vue
index dc824a08..31145095 100644
--- a/src/components/ChatWindow.vue
+++ b/src/components/ChatWindow.vue
@@ -55,13 +55,16 @@ export default {
     this.isIosSafari = detectIosSafari();
     if (this.isIosSafari === true) {
       EventBus.$on(events.USER_INPUT_FOCUS_CHANGED, (onoff) => {
-        if (!(this.lastScrollY === window.scrollY)) {
-          this.keyboardUp = onoff;
-        } else {
-            this.keyboardUp = true; // Reactive variable, will update style
-        }
-        this.lastScrollY = window.scrollY;
-      });
+        //TODO setTimeout
+        //setTimeout(() => {
+          if (!(this.lastScrollY === window.scrollY)) {
+            this.keyboardUp = onoff;
+          } else {
+              this.keyboardUp = true; // Reactive variable, will update style
+          }
+          this.lastScrollY = window.scrollY;
+        //}, 1000);
+      })
     }
   },
   mounted() {
@@ -153,12 +156,17 @@ export default {
 
 .twc-ios-keyboard-shown {
   transition: 0.3s ease-in-out !important;
-  height: calc(66% - 60px);
-  /* top: 0px; */
+  height: calc(66% - 62px) !important;
+  border: 5px solid green;
+  top: calc(34% + 63px) !important;
+  position: fixed !important;
 }
 .twc-ios-keyboard-hidden {
   transition: 0.2s ease-in-out !important;
-  height: 100%;
+  height: 100% !important;
+  border: 5px solid red;
+  top: 0px !important;
+  position: fixed !important;
 }
 
 .twc-spinner {
diff --git a/src/components/messages/ComboMessage.vue b/src/components/messages/ComboMessage.vue
index 7349eb21..216fb498 100644
--- a/src/components/messages/ComboMessage.vue
+++ b/src/components/messages/ComboMessage.vue
@@ -1,6 +1,28 @@
 <template>
   <ul class="twc-combo">
     <li v-for="(message, idx) in comboitems" :key="idx">
+      <div class="twc-combo-message" v-if="message.type==='linkpreview'">
+        <a :href="message.url || undefined"
+           :title="message.description || this.$t('message.preview_description_not_available')" 
+           target="_blank" class="twc-link-preview">
+          <div class="twc-link-preview-left-column">
+            <img :src="message.image || 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTE1LjE5IDEyMy4zOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTE1LjE5IDEyMy4zOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLW1pdGVybGltaXQ6Mi42MTMxO308L3N0eWxlPjxnPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik05My4xMyw3OS41YzEyLjA1LDAsMjEuODIsOS43NywyMS44MiwyMS44MmMwLDEyLjA1LTkuNzcsMjEuODItMjEuODIsMjEuODJjLTEyLjA1LDAtMjEuODItOS43Ny0yMS44Mi0yMS44MiBDNzEuMzEsODkuMjcsODEuMDgsNzkuNSw5My4xMyw3OS41TDkzLjEzLDc5LjV6IE04LjA4LDAuMjVoOTUuMjhjMi4xNywwLDQuMTEsMC44OSw1LjUzLDIuM2MxLjQyLDEuNDIsMi4zLDMuMzksMi4zLDUuNTN2NzAuMDEgYy0yLjQ2LTEuOTEtNS4yNC0zLjQ0LTguMjUtNC40OFY5Ljk4YzAtMC40My0wLjE2LTAuNzktMC40Ni0xLjA1Yy0wLjI2LTAuMjYtMC42Ni0wLjQ2LTEuMDUtMC40Nkg5Ljk0IGMtMC40MywwLTAuNzksMC4xNi0xLjA1LDAuNDZDOC42Myw5LjE5LDguNDMsOS41OCw4LjQzLDkuOTh2NzAuMDJoMC4wM2wzMS45Ny0zMC42MWMxLjI4LTEuMTgsMy4yOS0xLjA1LDQuNDQsMC4yMyBjMC4wMywwLjAzLDAuMDMsMC4wNywwLjA3LDAuMDdsMjYuODgsMzEuOGMtNC43Myw1LjE4LTcuNjIsMTIuMDgtNy42MiwxOS42NWMwLDMuMjksMC41NSw2LjQ1LDEuNTUsOS40SDguMDggYy0yLjE3LDAtNC4xMS0wLjg5LTUuNTMtMi4zcy0yLjMtMy4zOS0yLjMtNS41M1Y4LjA4YzAtMi4xNywwLjg5LTQuMTEsMi4zLTUuNTNTNS45NCwwLjI1LDguMDgsMC4yNUw4LjA4LDAuMjV6IE03My45OCw3OS4zNSBsMy43MS0yMi43OWMwLjMtMS43MSwxLjkxLTIuOSwzLjYyLTIuNmMwLjY2LDAuMSwxLjI1LDAuNDMsMS43MSwwLjg2bDE3LjEsMTcuOTdjLTIuMTgtMC41Mi00LjQ0LTAuNzktNi43OC0wLjc5IEM4NS45MSw3MS45OSw3OS4xMyw3NC43Nyw3My45OCw3OS4zNUw3My45OCw3OS4zNXogTTgxLjk4LDE4LjE5YzMuMTMsMCw1Ljk5LDEuMjgsOC4wMywzLjMyYzIuMDcsMi4wNywzLjMyLDQuOSwzLjMyLDguMDMgYzAsMy4xMy0xLjI4LDUuOTktMy4zMiw4LjAzYy0yLjA3LDIuMDctNC45LDMuMzItOC4wMywzLjMyYy0zLjEzLDAtNS45OS0xLjI4LTguMDMtMy4zMmMtMi4wNy0yLjA3LTMuMzItNC45LTMuMzItOC4wMyBjMC0zLjEzLDEuMjgtNS45OSwzLjMyLTguMDNDNzYuMDIsMTkuNDQsNzguODYsMTguMTksODEuOTgsMTguMTlMODEuOTgsMTguMTl6IE04NS44Miw4OC4wNWwxOS45NiwyMS42IGMxLjU4LTIuMzksMi41LTUuMjUsMi41LTguMzNjMC04LjM2LTYuNzgtMTUuMTQtMTUuMTQtMTUuMTRDOTAuNDgsODYuMTcsODcuOTksODYuODUsODUuODIsODguMDVMODUuODIsODguMDV6IE0xMDAuNDQsMTE0LjU4IGwtMTkuOTYtMjEuNmMtMS41OCwyLjM5LTIuNSw1LjI1LTIuNSw4LjMzYzAsOC4zNiw2Ljc4LDE1LjE0LDE1LjE0LDE1LjE0Qzk1Ljc4LDExNi40Niw5OC4yNywxMTUuNzgsMTAwLjQ0LDExNC41OEwxMDAuNDQsMTE0LjU4eiIvPjwvZz48L3N2Zz4='"
+                 :alt="message.title || this.$t('message.preview_title_not_available')"
+                 class="twc-link-preview-img"/>
+          </div>
+          <div class="twc-link-preview-right-column">
+            <p class="twc-link-preview-title">{{ message.title || this.$t('message.preview_title_not_available') }}</p>
+            <p class="twc-link-preview-description">{{ message.description ? (message.description.length > 144 ? message.description.substr(0, 144) + '...' : message.description) : this.$t('message.preview_description_not_available') }}</p>
+            <p class="twc-link-preview-domain">{{ (()=>{
+              var s = message.url, n = s.indexOf('://');
+              if (n !== -1) s = s.substring(n + 3);
+              n = s.indexOf('/');
+              return n === -1 ? s : s.substring(0, n);
+            })() }}</p>
+          </div>
+        </a>
+      </div>
+
       <div class="twc-combo-message" v-if="message.type==='text'">
         <div class="twc-text-message">
           <p class="twc-text-message__text" v-html="message.text"></p>
@@ -242,6 +264,15 @@ export default {
     },
   },
   computed: {
+    previewDomain(m) {
+      const s = m.url;
+      if (s) {
+        console.log('t URL', s);
+        s = s.toString();
+        if (s.indexOf('://') === -1) s = "http://" + s;
+        return new URL(s).hostname;
+      }
+    },
     comboitems() {
       return this.message.data.components;
     },
diff --git a/views/index.ejs b/views/index.ejs
index 92a491d5..fcefc57c 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -1,30 +1,58 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8"/>
-    <title>Teneo Web Chat</title>
-    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0 user-scalable=no">
-    <style>
-        body {
-            background: #E5F5FE;
-        }
-    </style>
-</head>
+<meta charset="UTF-8"/>
+<title>Teneo Web Chat</title>
+<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0 user-scalable=no">
+<style>
 
-<body>
-<button onclick="TeneoWebChat.call('reset')">Reset Chat</button>
-<br>
+body {
+    background: #E5F5FE;
+}
+.centerimage {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 400px;
+    height: 300px;
+    margin-top: -150px;
+    margin-left: -200px;
+    z-index: -10;
+}
+.btn {
+    margin-bottom: 5px;
+}
+@media (max-width: 500px) {
+    .centerimage {
+        opacity: 0.3;
+        transition-property: opacity;
+        transition-duration: 0.2s;
+        transition-timing-function: linear;
+    }
+}
+
+
+div.scroll {
+    width: 600px;
+    overflow-x: hidden;
+    text-align: justify;
+}
+
+</style>
 
 <script src="teneo-web-chat.js"></script> <!-- needed for Heroku -->
 <!--<% if(process.env.NODE_ENV === 'development') { %>-->
 
 
 <!--<% } %>-->
-<div id="teneo-web-chat"></div>
+
 <script>
 /* <![CDATA[ */
 
+
+
 window.addEventListener('load', () => {
+
     const element = document.getElementById('teneo-web-chat');
     const teneoProps = {
         'teneoEngineUrl': '<%= process.env.TENEO_ENGINE_URL %>',
@@ -54,22 +82,66 @@ window.addEventListener('load', () => {
     };
     <% if(process.env.NODE_ENV === 'development') { %>
     //Keep last input on up arrow for rapid testing
+    /*
     TeneoWebChat.on('input_submitted', (payload) => {
         window.sessionStorage.setItem('lastSentPhrase', payload.text);
-    })
+    });
     document.addEventListener('keydown', function(e){
         if(e.code === 'ArrowUp') {
             let inputField = document.getElementById('twc-user-input-field');
             inputField.value = window.sessionStorage.getItem('lastSentPhrase')
         }
     });
+    */
     <% } %>
     window.TeneoWebChat.initialize(element, teneoProps);
 });
 
 /* ]]> */
 </script>
+</head>
+
+<body>
+<button onclick="TeneoWebChat.call('reset')">Reset Chat</button>
+
+<!--
+
+<br/>
+<h3>Messages</h3>
+<button class="btn" onclick="TeneoWebChat.call('add_message',textMessageAgent)">Message from agent</button><br>
+
+<h3>Messages with avatar</h3>
+<button class="btn" onclick="TeneoWebChat.call('add_message',textMessageUserAvatar)">Message from user</button><br>
+<button class="btn" onclick="TeneoWebChat.call('add_message',textMessageBotAvatar)">Message from bot</button><br>
+<button class="btn" onclick="TeneoWebChat.call('add_message',textMessageAgentAvatar)">Message from agent</button><br>
 
+<h3>Messages with avatar and dateline</h3>
+<button class="btn" onclick="TeneoWebChat.call('add_message',textMessageUserAvatarDateline)">Message from user</button><br>
+<button class="btn" onclick="TeneoWebChat.call('add_message',textMessageBotAvatarDateline)">Message from bot</button><br>
+<button class="btn" onclick="TeneoWebChat.call('add_message',textMessageAgentAvatarDateline)">Message from agent</button><br>
 
+<h3>Typing indicators</h3>
+<button class="btn" onclick="TeneoWebChat.call('show_typing_indicator',typingIndicatorAgent)">Show agent typing indicator</button><br>
+<button class="btn" onclick="TeneoWebChat.call('show_typing_indicator',typingIndicatorBot)">Show bot typing indicator</button><br>
+<button class="btn" onclick="TeneoWebChat.call('show_typing_indicator',typingIndicatorUser)">Show user typing indicator</button><br>
+
+<button class="btn" onclick="TeneoWebChat.call('hide_typing_indicator',{'author': 'agent'})">Hide agent typing indicator</button><br>
+<button class="btn" onclick="TeneoWebChat.call('hide_typing_indicator',{'author': 'bot'})">Hide bot typing indicator</button><br>
+<button class="btn" onclick="TeneoWebChat.call('hide_typing_indicator',{'author': 'user'})">Hide user typing indicator</button><br>
+
+<h3>Other</h3>
+<button class="btn" onclick="TeneoWebChat.call('disable_user_input')">Disable user input</button><br>
+<button class="btn" onclick="TeneoWebChat.call('enable_user_input')">Enable user input</button><br>
+<button class="btn" onclick="TeneoWebChat.call('maximize')">Maximize</button><br>
+<button class="btn" onclick="TeneoWebChat.on('visibility_changed', function(){console.log('Bad button')})">Bad button!</button>
+
+-->
+
+<div class="scroll">
+    This is a Dummy Paragraph to test vertical and horizontal scrolling. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Kokruous maximus et blandit diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris non ex eget augue lobortis iaculis id a mauris. Sed auctor est quis lectus fringilla pharetra. Mauris efficitur nulla at augue porttitor laoreet. Duis pharetra lectus et fermentum commodo. Sed ullamcorper ante lectus, sit amet facilisis erat auctor quis. Mauris varius pharetra velit, in varius leo consequat sed. Aenean porta lorem non neque feugiat, nec ultrices est commodo. Ut vulputate quis neque sed tincidunt. Suspendisse in ligula accumsan, pharetra libero id, dignissim felis. Morbi scelerisque lacus sed ipsum faucibus suscipit. Vestibulum vitae efficitur nunc. Etiam ornare, risus nec dictum condimentum, ipsum tellus condimentum neque, vitae tempus velit tortor et magna. Vivamus egestas porta lacinia. Aenean interdum, dui ut maximus varius, massa ligula efficitur ex, eget cursus dui diam eget est.
+    Nam quis felis quis ipsum vulputate lobortis vel laoreet mauris. Sed vel nisi quam. Enean id vestibulum lacus, ac faucibus velit. Donec blandit eros dui, ac imperdiet leo convallis vel. Integer molestie purus in placerat varius. Morbi porta porta varius. Nam odio quam, porttitor quis scelerisque nec, sollicitudin a orci. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+</div>
+
+<div id="teneo-web-chat"></div>
 </body>
 </html>