diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3629a9f230..ee92a953f9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -91,6 +91,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fix [#2415](https://github.com/microsoft/BotFramework-WebChat/issues/2415) and [#2416](https://github.com/microsoft/BotFramework-WebChat/issues/2416). Fix receipt card rendering, by [@compulim](https://github.com/compulim) in PR [#2417](https://github.com/microsoft/BotFramework-WebChat/issues/2417)
 -  Fix [#2415](https://github.com/microsoft/BotFramework-WebChat/issues/2415) and [#2416](https://github.com/microsoft/BotFramework-WebChat/issues/2416). Fix Adaptive Cards cannot be disabled on-the-fly, by [@compulim](https://github.com/compulim) in PR [#2417](https://github.com/microsoft/BotFramework-WebChat/issues/2417)
 -  Fix [#2360](https://github.com/microsoft/BotFramework-WebChat/issues/2360). Timestamp should update on language change, by [@compulim](https://github.com/compulim) in PR [#2414](https://github.com/microsoft/BotFramework-WebChat/pull/2414)
+-  Fix [#2428](https://github.com/microsoft/BotFramework-WebChat/issues/2428). Should interrupt speech synthesis after microphone button is clicked, by [@compulim](https://github.com/compulim) in PR [#2429](https://github.com/microsoft/BotFramework-WebChat/pull/2429)
 
 ### Added
 
diff --git a/__tests__/speech.synthesis.js b/__tests__/speech.synthesis.js
index 5a8aa48f32..f10b141096 100644
--- a/__tests__/speech.synthesis.js
+++ b/__tests__/speech.synthesis.js
@@ -1,6 +1,7 @@
 import { timeouts } from './constants.json';
 
 import minNumActivitiesShown from './setup/conditions/minNumActivitiesShown';
+import negateCondition from './setup/conditions/negate';
 import speechRecognitionStartCalled from './setup/conditions/speechRecognitionStartCalled';
 import speechSynthesisUtterancePended from './setup/conditions/speechSynthesisUtterancePended';
 
@@ -98,4 +99,29 @@ describe('speech synthesis', () => {
 
     expect((await pageObjects.getConsoleLogs()).filter(([type]) => type === 'error')).toEqual([]);
   });
+
+  test('should stop synthesis after clicking on microphone button', async () => {
+    const { driver, pageObjects } = await setupWebDriver({
+      props: {
+        webSpeechPonyfillFactory: () => window.WebSpeechMock
+      }
+    });
+
+    await pageObjects.sendMessageViaMicrophone('echo Hello, World!');
+
+    await expect(speechRecognitionStartCalled().fn(driver)).resolves.toBeFalsy();
+    await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+
+    await expect(pageObjects.startSpeechSynthesize()).resolves.toHaveProperty(
+      'text',
+      'Echoing back in a separate activity.'
+    );
+
+    await driver.wait(speechSynthesisUtterancePended(), timeouts.ui);
+
+    await pageObjects.clickMicrophoneButton();
+
+    await expect(speechRecognitionStartCalled().fn(driver)).resolves.toBeTruthy();
+    await driver.wait(negateCondition(speechSynthesisUtterancePended()), timeouts.ui);
+  });
 });
diff --git a/packages/component/src/SendBox/MicrophoneButton.js b/packages/component/src/SendBox/MicrophoneButton.js
index b7e138a272..97de6addca 100644
--- a/packages/component/src/SendBox/MicrophoneButton.js
+++ b/packages/component/src/SendBox/MicrophoneButton.js
@@ -52,6 +52,7 @@ const connectMicrophoneButton = (...selectors) => {
       setSendBox,
       startDictate,
       stopDictate,
+      stopSpeakingActivity,
       webSpeechPonyfill: { speechSynthesis, SpeechSynthesisUtterance } = {}
     }) => ({
       click: () => {
@@ -59,6 +60,7 @@ const connectMicrophoneButton = (...selectors) => {
           stopDictate();
           setSendBox(dictateInterims.join(' '));
         } else {
+          stopSpeakingActivity();
           startDictate();
         }
 
diff --git a/packages/embed/package-lock.json b/packages/embed/package-lock.json
index 903f9a3e71..dbeda5a7a2 100644
--- a/packages/embed/package-lock.json
+++ b/packages/embed/package-lock.json
@@ -2677,9 +2677,9 @@
 			"dev": true
 		},
 		"csv-parse": {
-			"version": "4.4.5",
-			"resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-4.4.5.tgz",
-			"integrity": "sha512-koPV9m9AjNJCK3ig4ErgRJalZsLxWI7NP0Fd3+CO9hgDZt3FSljTeESnfWTbyRc8qk/3/LgX1s5naDqLxiuK9w==",
+			"version": "4.4.7",
+			"resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-4.4.7.tgz",
+			"integrity": "sha512-QfjZ9mhBHcNDUM7Ab1sLC5HNa7wVFSl5jDK3lpM0YyvAUb9bVgO1Veht13tWJno8cEZ2eSowFDwcvRCO4BVvNA==",
 			"dev": true
 		},
 		"csv-stringify": {
@@ -4433,9 +4433,9 @@
 			"dev": true
 		},
 		"handlebars": {
-			"version": "4.1.2",
-			"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.2.tgz",
-			"integrity": "sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==",
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.3.1.tgz",
+			"integrity": "sha512-c0HoNHzDiHpBt4Kqe99N8tdLPKAnGCQ73gYMPWtAYM4PwGnf7xl8PBUHJqh9ijlzt2uQKaSRxbXRt+rZ7M2/kA==",
 			"dev": true,
 			"requires": {
 				"neo-async": "^2.6.0",
diff --git a/samples/06.a.cognitive-services-bing-speech-js/index.html b/samples/06.a.cognitive-services-bing-speech-js/index.html
index 04dce91054..083c2d3133 100644
--- a/samples/06.a.cognitive-services-bing-speech-js/index.html
+++ b/samples/06.a.cognitive-services-bing-speech-js/index.html
@@ -56,7 +56,7 @@
         }
 
         // Pass a Web Speech ponyfill factory to renderWebChat.
-        // You can also use your own speech engine given it is compliant to W3C Web Speech API, https://w3c.github.io/speech-api/.
+        // You can also use your own speech engine given it is compliant to W3C Web Speech API: https://w3c.github.io/speech-api/.
         // For implementor, look at createBrowserWebSpeechPonyfill.js for details.
         window.WebChat.renderWebChat(
           {
diff --git a/samples/06.b.cognitive-services-bing-speech-react/index.html b/samples/06.b.cognitive-services-bing-speech-react/index.html
index f41dd8f2ae..a62b286979 100644
--- a/samples/06.b.cognitive-services-bing-speech-react/index.html
+++ b/samples/06.b.cognitive-services-bing-speech-react/index.html
@@ -68,7 +68,7 @@
         }
 
         // Pass a Web Speech ponyfill factory to renderWebChat.
-        // You can also use your own speech engine given it is complaint to W3C Web Speech API, https://w3c.github.io/speech-api/.
+        // You can also use your own speech engine given it is complaint to W3C Web Speech API: https://w3c.github.io/speech-api/.
         // For implementor, look at createBrowserWebSpeechPonyfill.js for details.
         render(
           <ReactWebChat directLine={createDirectLine({ token })} webSpeechPonyfillFactory={webSpeechPonyfillFactory} />,
diff --git a/samples/06.c.cognitive-services-speech-services-js/README.md b/samples/06.c.cognitive-services-speech-services-js/README.md
index 46c4160088..7d7ef76a05 100644
--- a/samples/06.c.cognitive-services-speech-services-js/README.md
+++ b/samples/06.c.cognitive-services-speech-services-js/README.md
@@ -34,100 +34,72 @@ Cognitive Services Speech Services has published a new API to provide speech rec
 
 ## Completed code
 
-#### Using subscription key
-
-> This approach is for demonstration purposes only. In production code, you should always store the subscription key on a secured token server. The token server should only send out limited authorization code. This [article on authorizations](https://docs.microsoft.com/en-us/azure/cognitive-services/speech/api-reference-rest/websocketprotocol#authorization) outlines the authorization process.
-
-In this portion, we are hardcoding the subscription key in the client code.
-
-Here is the finished `index.html` for subscription key flow:
+### Using authorization token
 
 ```diff
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <title>Web Chat: Cognitive Services Speech Services using JavaScript</title>
-
-    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
-    <style>
-      html, body { height: 100% }
-      body { margin: 0 }
-
-      #webchat {
-        height: 100%;
-        width: 100%;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="webchat" role="main"></div>
-    <script>
-      (async function () {
-        const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
-        const { token } = await res.json();
-
-+       const searchParams = new URLSearchParams(window.location.search);
-
-+       const subscriptionKey = searchParams.get('s');
-
-+       const webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
-+           region: searchParams.get('r') || 'westus',
-+           subscriptionKey
-+         });
+  <!DOCTYPE html>
+  <html lang="en-US">
+    <head>
+      <title>Web Chat: Cognitive Services Speech Services using JavaScript</title>
+      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
+      <style>
+        html, body { height: 100% }
+        body { margin: 0 }
+
+        #webchat {
+          height: 100%;
+          width: 100%;
         }
+      </style>
+    </head>
+    <body>
+      <div id="webchat" role="main"></div>
+      <script>
++       function createFetchSpeechServicesCredentials() {
++         let expireAfter = 0;
++         let lastResult = {};
++
++         return async () => {
++           if (Date.now() > expireAfter) {
++             const speechServicesTokenRes = await fetch('https://webchat-mockbot.azurewebsites.net/speechservices/token', { method: 'POST' });
++
++             lastResult = await speechServicesTokenRes.json();
++             expireAfter = Date.now() + 300000;
++           }
++
++           return lastResult;
++         }
++       }
++
++       const fetchSpeechServicesCredentials = createFetchSpeechServicesCredentials();
++
++       async function fetchSpeechServicesRegion() {
++         return (await fetchSpeechServicesCredentials()).region;
++       }
++
++       async function fetchSpeechServicesToken() {
++         return (await fetchSpeechServicesCredentials()).token;
++       }
+
+        (async function () {
+          const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
+          const { token } = await res.json();
+
++         const webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
++           authorizationToken: fetchSpeechServicesToken,
++           region: await fetchSpeechServicesRegion()
++         });
 
-        window.WebChat.renderWebChat({
-          directLine: window.WebChat.createDirectLine({ token }),
-+         webSpeechPonyfillFactory
-        }, document.getElementById('webchat'));
-
-        document.querySelector('#webchat > *').focus();
-      })().catch(err => console.error(err));
-    </script>
-  </body>
-</html>
-```
-
-#### Using authorization token
+          window.WebChat.renderWebChat({
+            directLine: window.WebChat.createDirectLine({ token }),
++           webSpeechPonyfillFactory
+          }, document.getElementById('webchat'));
 
-```diff
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <title>Web Chat: Cognitive Services Speech Services using JavaScript</title>
-    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
-    <style>
-      html, body { height: 100% }
-      body { margin: 0 }
-
-      #webchat {
-        height: 100%;
-        width: 100%;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="webchat" role="main"></div>
-    <script>
-      (async function () {
-        const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
-        const { token } = await res.json();
-
-+         const res = await fetch('https://webchat-mockbot.azurewebsites.net/speechservices/token', { method: 'POST' });
-+         const { region, token: authorizationToken } = await res.json();
-
-+         const webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({ authorizationToken, region });
-
-        window.WebChat.renderWebChat({
-          directLine: window.WebChat.createDirectLine({ token }),
-+         webSpeechPonyfillFactory
-        }, document.getElementById('webchat'));
-
-        document.querySelector('#webchat > *').focus();
-      })().catch(err => console.error(err));
-    </script>
-  </body>
-</html>
+          document.querySelector('#webchat > *').focus();
+        })().catch(err => console.error(err));
+      </script>
+    </body>
+  </html>
 ```
 
 # Further reading
diff --git a/samples/06.c.cognitive-services-speech-services-js/index.html b/samples/06.c.cognitive-services-speech-services-js/index.html
index 915b20c1eb..7c39629406 100644
--- a/samples/06.c.cognitive-services-speech-services-js/index.html
+++ b/samples/06.c.cognitive-services-speech-services-js/index.html
@@ -28,39 +28,62 @@
   <body>
     <div id="webchat" role="main"></div>
     <script>
+      // Create a function to fetch the Cognitive Services Speech Services credentials.
+      // The async function created will hold expiration information about the token and will return cached token when possible.
+      function createFetchSpeechServicesCredentials() {
+        let expireAfter = 0;
+        let lastResult = {};
+
+        return async () => {
+          // Fetch a new token if the existing one is expiring.
+          // The following article mentioned the token is only valid for 10 minutes.
+          // We will invalidate the token after 5 minutes.
+          // https://docs.microsoft.com/en-us/azure/cognitive-services/authentication#authenticate-with-an-authentication-token
+          if (Date.now() > expireAfter) {
+            const speechServicesTokenRes = await fetch(
+              'https://webchat-mockbot.azurewebsites.net/speechservices/token',
+              { method: 'POST' }
+            );
+
+            lastResult = await speechServicesTokenRes.json();
+            expireAfter = Date.now() + 300000;
+          }
+
+          return lastResult;
+        };
+      }
+
+      const fetchSpeechServicesCredentials = createFetchSpeechServicesCredentials();
+
+      async function fetchSpeechServicesRegion() {
+        return (await fetchSpeechServicesCredentials()).region;
+      }
+
+      async function fetchSpeechServicesToken() {
+        return (await fetchSpeechServicesCredentials()).token;
+      }
+
       (async function() {
         // In this demo, we are using Direct Line token from MockBot.
         // Your client code must provide either a secret or a token to talk to your bot.
-        // Tokens are more secure. To learn about the differences between secrets and tokens
+        // Tokens are more secure. To learn about the differences between secrets and tokens.
         // and to understand the risks associated with using secrets, visit https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication?view=azure-bot-service-4.0
 
         const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
         const { token } = await res.json();
 
-        // To run this demo, you can either use our authorization token, or provide your own subscription key thru ?s=BING_SPEECH_SUBSCRIPTION_KEY
-        const searchParams = new URLSearchParams(window.location.search);
-        const subscriptionKey = searchParams.get('s');
-        let webSpeechPonyfillFactory;
-
-        if (subscriptionKey) {
-          // In case you are using your own subscription key, please note that client should always authenticate against your server
-          // to avoid exposing the subscription key to any part of your client code.
-          webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
-            region: searchParams.get('r') || 'westus',
-            subscriptionKey
-          });
-        } else {
-          const res = await fetch('https://webchat-mockbot.azurewebsites.net/speechservices/token', { method: 'POST' });
-          const { region, token: authorizationToken } = await res.json();
+        // Create the ponyfill factory function, which can be called to create a concrete implementation of the ponyfill.
+        const webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
+          // We are passing the Promise function to the authorizationToken field.
+          // This function will be called every time the token is being used.
+          authorizationToken: fetchSpeechServicesToken,
 
-          webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
-            authorizationToken,
-            region
-          });
-        }
+          // In contrast, we are only fetching the region once.
+          region: await fetchSpeechServicesRegion()
+        });
 
         // Pass a Web Speech ponyfill factory to renderWebChat.
-        // You can also use your own speech engine given it is compliant to W3C Web Speech API, https://w3c.github.io/speech-api/.
+        // You can also use your own speech engine given it is compliant to W3C Web Speech API: https://w3c.github.io/speech-api/.
         // For implementor, look at createBrowserWebSpeechPonyfill.js for details.
         window.WebChat.renderWebChat(
           {
diff --git a/samples/06.d.speech-web-browser/index.html b/samples/06.d.speech-web-browser/index.html
index 7957a3a904..89cd2ab830 100644
--- a/samples/06.d.speech-web-browser/index.html
+++ b/samples/06.d.speech-web-browser/index.html
@@ -40,7 +40,7 @@
         const { token } = await res.json();
 
         // Pass a Web Speech ponyfill factory to renderWebChat.
-        // You can also use your own speech engine given it is complaint to W3C Web Speech API, https://w3c.github.io/speech-api/.
+        // You can also use your own speech engine given it is complaint to W3C Web Speech API: https://w3c.github.io/speech-api/.
         // For implementor, look at createBrowserWebSpeechPonyfill.js for details.
         window.WebChat.renderWebChat(
           {
diff --git a/samples/06.e.cognitive-services-speech-services-with-lexical-result/README.md b/samples/06.e.cognitive-services-speech-services-with-lexical-result/README.md
index 72f095be96..94e185edf7 100644
--- a/samples/06.e.cognitive-services-speech-services-with-lexical-result/README.md
+++ b/samples/06.e.cognitive-services-speech-services-with-lexical-result/README.md
@@ -27,27 +27,15 @@ We'll start by using the [Cognitive Services Speech Services sample](./../06.c.c
 
 The main change you will need to make, regardless of whether you are using the subscription key or authorization token, is adding the value `'lexical'` to a `textNormalization` key in your `webSpeechPonyFillFactory` object.
 
-Subscription key:
-
-```diff
-webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
-  region: searchParams.get('r') || 'westus',
-  subscriptionKey,
-+ textNormalization: 'lexical'
-});
-```
-
-Authorization Token:
-
 ```diff
-   const res = await fetch('https://webchat-mockbot.azurewebsites.net/speechservices/token', { method: 'POST' });
-   const { region, token: authorizationToken } = await res.json();
-
-   webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
-     authorizationToken,
-     region,
-+    textNormalization: 'lexical'
-   });
+    const res = await fetch('https://webchat-mockbot.azurewebsites.net/speechservices/token', { method: 'POST' });
+    const { region, token: authorizationToken } = await res.json();
+
+    webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
++     authorizationToken: fetchSpeechServicesToken,
++     region: await fetchSpeechServicesRegion()
++     textNormalization: 'lexical'
+    });
 ```
 
 # Further reading
diff --git a/samples/06.e.cognitive-services-speech-services-with-lexical-result/index.html b/samples/06.e.cognitive-services-speech-services-with-lexical-result/index.html
index 71651f85cd..0835c983d4 100644
--- a/samples/06.e.cognitive-services-speech-services-with-lexical-result/index.html
+++ b/samples/06.e.cognitive-services-speech-services-with-lexical-result/index.html
@@ -28,6 +28,41 @@
   <body>
     <div id="webchat" role="main"></div>
     <script>
+      // Create a function to fetch the Cognitive Services Speech Services credentials.
+      // The async function created will hold expiration information about the token and will return cached token when possible.
+      function createFetchSpeechServicesCredentials() {
+        let expireAfter = 0;
+        let lastResult = {};
+
+        return async () => {
+          // Fetch a new token if the existing one is expiring.
+          // The following article mentioned the token is only valid for 10 minutes.
+          // We will invalidate the token after 5 minutes.
+          // https://docs.microsoft.com/en-us/azure/cognitive-services/authentication#authenticate-with-an-authentication-token
+          if (Date.now() > expireAfter) {
+            const speechServicesTokenRes = await fetch(
+              'https://webchat-mockbot.azurewebsites.net/speechservices/token',
+              { method: 'POST' }
+            );
+
+            lastResult = await speechServicesTokenRes.json();
+            expireAfter = Date.now() + 300000;
+          }
+
+          return lastResult;
+        };
+      }
+
+      const fetchSpeechServicesCredentials = createFetchSpeechServicesCredentials();
+
+      async function fetchSpeechServicesRegion() {
+        return (await fetchSpeechServicesCredentials()).region;
+      }
+
+      async function fetchSpeechServicesToken() {
+        return (await fetchSpeechServicesCredentials()).token;
+      }
+
       (async function() {
         // In this demo, we are using Direct Line token from MockBot.
         // Your client code must provide either a secret or a token to talk to your bot.
@@ -37,32 +72,19 @@
         const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
         const { token } = await res.json();
 
-        // To run this demo, you can either use our authorization token, or provide your own subscription key thru ?s=BING_SPEECH_SUBSCRIPTION_KEY
-        const searchParams = new URLSearchParams(window.location.search);
-        const subscriptionKey = searchParams.get('s');
-        let webSpeechPonyfillFactory;
-
-        if (subscriptionKey) {
-          // In case you are using your own subscription key, please note that client should always authenticate against your server
-          // to avoid exposing the subscription key to any part of your client code.
-          webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
-            region: searchParams.get('r') || 'westus',
-            subscriptionKey,
-            textNormalization: 'lexical'
-          });
-        } else {
-          const res = await fetch('https://webchat-mockbot.azurewebsites.net/speechservices/token', { method: 'POST' });
-          const { region, token: authorizationToken } = await res.json();
+        // Create the ponyfill factory function, which can be called to create a concrete implementation of the ponyfill.
+        const webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
+          // We are passing the Promise function to the authorizationToken field.
+          // This function will be called every time the token is being used.
+          authorizationToken: fetchSpeechServicesToken,
 
-          webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
-            authorizationToken,
-            region,
-            textNormalization: 'lexical'
-          });
-        }
+          // In contrast, we are only fetching the region once.
+          region: await fetchSpeechServicesRegion(),
+          textNormalization: 'lexical'
+        });
 
         // Pass a Web Speech ponyfill factory to renderWebChat.
-        // You can also use your own speech engine given it is compliant to W3C Web Speech API, https://w3c.github.io/speech-api/.
+        // You can also use your own speech engine given it is compliant to W3C Web Speech API: https://w3c.github.io/speech-api/.
         // For implementor, look at createBrowserWebSpeechPonyfill.js for details.
         window.WebChat.renderWebChat(
           {
diff --git a/samples/06.f.hybrid-speech/README.md b/samples/06.f.hybrid-speech/README.md
index d5007486ab..8d3e77c21f 100644
--- a/samples/06.f.hybrid-speech/README.md
+++ b/samples/06.f.hybrid-speech/README.md
@@ -47,11 +47,14 @@ async function createHybridPonyfillFactory({ authorizationToken, region }) {…}
 Create two ponyfills, one from Speech Services and the other from Web Speech.
 
 ```diff
-async function createHybridPonyfillFactory({ authorizationToken, region }) {
-+ const speechServicesPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({ authorizationToken, region });
-+ const webSpeechPonyfillFactory = await window.WebChat.createBrowserWebSpeechPonyfillFactory();
-…
-};
+  async function createHybridPonyfillFactory({ authorizationToken, region }) {
++   const speechServicesPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
++     authorizationToken: fetchSpeechServicesToken,
++     region: await fetchSpeechServicesRegion()
++   });
++   const webSpeechPonyfillFactory = await window.WebChat.createBrowserWebSpeechPonyfillFactory();
+  …
+  };
 ```
 
 Combine into one ponyfill the features you want to pull from Web Speech and Speech Services respectively
@@ -61,11 +64,11 @@ Combine into one ponyfill the features you want to pull from Web Speech and Spee
 + return options => {
 +   const speechServicesPonyfill = speechServicesPonyfillFactory(options);
 +   const webSpeechPonyfill = webSpeechPonyfillFactory(options);
-
++
 +   return {
 +     SpeechGrammarList: webSpeechPonyfill.SpeechGrammarList,
 +     SpeechRecognition: webSpeechPonyfill.SpeechRecognition,
-
++
 +     speechSynthesis: speechServicesPonyfill.speechSynthesis,
 +     SpeechSynthesisUtterance: speechServicesPonyfill.SpeechSynthesisUtterance
 +   }
@@ -87,59 +90,95 @@ Finally, pass your new ponyfill factory into `renderWebChat`.
 Here is the finished `index.html`:
 
 ```diff
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <title>Web Chat: Hybrid speech engine using JavaScript</title>
-    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
-    <style>
-      html, body { height: 100% }
-      body { margin: 0 }
-
-      #webchat {
-        height: 100%;
-        width: 100%;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="webchat" role="main"></div>
-    <script>
-      (async function () {
-        const directLineTokenRes = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
-        const { token } = await directLineTokenRes.json();
-
-        const speechServicesTokenRes = await fetch('https://webchat-mockbot.azurewebsites.net/speechservices/token', { method: 'POST' });
-        const { region, token: authorizationToken } = await speechServicesTokenRes.json();
-
-+       async function createHybridPonyfillFactory({ authorizationToken, region }) {
-+         const speechServicesPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({ authorizationToken, region });
-+         const webSpeechPonyfillFactory = await window.WebChat.createBrowserWebSpeechPonyfillFactory();
-
-+         return options => {
-+           const speechServicesPonyfill = speechServicesPonyfillFactory(options);
-+           const webSpeechPonyfill = webSpeechPonyfillFactory(options);
-
-+           return {
-+             SpeechGrammarList: webSpeechPonyfill.SpeechGrammarList,
-+             SpeechRecognition: webSpeechPonyfill.SpeechRecognition,
-
-+             speechSynthesis: speechServicesPonyfill.speechSynthesis,
-+             SpeechSynthesisUtterance: speechServicesPonyfill.SpeechSynthesisUtterance
-+           }
+  <!DOCTYPE html>
+  <html lang="en-US">
+    <head>
+      <title>Web Chat: Hybrid speech engine using JavaScript</title>
+      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
+      <style>
+        html, body { height: 100% }
+        body { margin: 0 }
+
+        #webchat {
+          height: 100%;
+          width: 100%;
+        }
+      </style>
+    </head>
+    <body>
+      <div id="webchat" role="main"></div>
+      <script>
+        function createFetchSpeechServicesCredentials() {
+          let expireAfter = 0;
+          let lastResult = {};
+
+          return async () => {
+            if (Date.now() > expireAfter) {
+              const speechServicesTokenRes = await fetch('https://webchat-mockbot.azurewebsites.net/speechservices/token', { method: 'POST' });
+
+              lastResult = await speechServicesTokenRes.json();
+              expireAfter = Date.now() + 300000;
+            }
+
+            return lastResult;
+          }
+        }
+
+        const fetchSpeechServicesCredentials = createFetchSpeechServicesCredentials();
+
+        async function fetchSpeechServicesRegion() {
+          return (await fetchSpeechServicesCredentials()).region;
+        }
+
+        async function fetchSpeechServicesToken() {
+          return (await fetchSpeechServicesCredentials()).token;
+        }
+
+        (async function () {
+          const directLineTokenRes = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
+          const { token } = await directLineTokenRes.json();
+
+          const speechServicesTokenRes = await fetch('https://webchat-mockbot.azurewebsites.net/speechservices/token', { method: 'POST' });
+          const { region, token: authorizationToken } = await speechServicesTokenRes.json();
+
+-         const webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
+-           authorizationToken: fetchSpeechServicesToken,
+-           region: await fetchSpeechServicesRegion()
+-         });
+
++         async function createHybridPonyfillFactory({ authorizationToken, region }) {
++           const speechServicesPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
++             authorizationToken: fetchSpeechServicesToken,
++             region: await fetchSpeechServicesRegion()
++           });
++
++           const webSpeechPonyfillFactory = await window.WebChat.createBrowserWebSpeechPonyfillFactory();
++
++           return options => {
++             const speechServicesPonyfill = speechServicesPonyfillFactory(options);
++             const webSpeechPonyfill = webSpeechPonyfillFactory(options);
++
++             return {
++               SpeechGrammarList: webSpeechPonyfill.SpeechGrammarList,
++               SpeechRecognition: webSpeechPonyfill.SpeechRecognition,
++
++               speechSynthesis: speechServicesPonyfill.speechSynthesis,
++               SpeechSynthesisUtterance: speechServicesPonyfill.SpeechSynthesisUtterance
++             }
++           };
 +         };
-+       };
-
-        window.WebChat.renderWebChat({
-          directLine: window.WebChat.createDirectLine({ token }),
-+         webSpeechPonyfillFactory: await createHybridPonyfillFactory({ authorizationToken, region })
-        }, document.getElementById('webchat'));
-
-        document.querySelector('#webchat > *').focus();
-      })().catch(err => console.error(err));
-    </script>
-  </body>
-</html>
+
+          window.WebChat.renderWebChat({
+            directLine: window.WebChat.createDirectLine({ token }),
+-           webSpeechPonyfillFactory
++           webSpeechPonyfillFactory: await createHybridPonyfillFactory({ authorizationToken, region })
+          }, document.getElementById('webchat'));
+
+          document.querySelector('#webchat > *').focus();
+        })().catch(err => console.error(err));
+      </script>
+    </body>
+  </html>
 ```
 
 # Further Reading
diff --git a/samples/06.f.hybrid-speech/index.html b/samples/06.f.hybrid-speech/index.html
index c4a70fa176..14c69c626a 100644
--- a/samples/06.f.hybrid-speech/index.html
+++ b/samples/06.f.hybrid-speech/index.html
@@ -28,6 +28,41 @@
   <body>
     <div id="webchat" role="main"></div>
     <script>
+      // Create a function to fetch the Cognitive Services Speech Services credentials.
+      // The async function created will hold expiration information about the token and will return cached token when possible.
+      function createFetchSpeechServicesCredentials() {
+        let expireAfter = 0;
+        let lastResult = {};
+
+        return async () => {
+          // Fetch a new token if the existing one is expiring.
+          // The following article mentioned the token is only valid for 10 minutes.
+          // We will invalidate the token after 5 minutes.
+          // https://docs.microsoft.com/en-us/azure/cognitive-services/authentication#authenticate-with-an-authentication-token
+          if (Date.now() > expireAfter) {
+            const speechServicesTokenRes = await fetch(
+              'https://webchat-mockbot.azurewebsites.net/speechservices/token',
+              { method: 'POST' }
+            );
+
+            lastResult = await speechServicesTokenRes.json();
+            expireAfter = Date.now() + 300000;
+          }
+
+          return lastResult;
+        };
+      }
+
+      const fetchSpeechServicesCredentials = createFetchSpeechServicesCredentials();
+
+      async function fetchSpeechServicesRegion() {
+        return (await fetchSpeechServicesCredentials()).region;
+      }
+
+      async function fetchSpeechServicesToken() {
+        return (await fetchSpeechServicesCredentials()).token;
+      }
+
       (async function() {
         // In this demo, we are using Direct Line token from MockBot.
         // Your client code must provide either a secret or a token to talk to your bot.
@@ -47,9 +82,18 @@
 
         // We are creating a hybrid ponyfill factory that will merge the result of two ponyfill factories together.
         async function createHybridPonyfillFactory({ authorizationToken, region }) {
+          // Create the ponyfill factory function, which can be called to create a concrete implementation of the ponyfill.
           const speechServicesPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory(
-            { authorizationToken, region }
+            {
+              // We are passing the Promise function to the authorizationToken field.
+              // This function will be called every time the token is being used.
+              authorizationToken: fetchSpeechServicesToken,
+
+              // In contrast, we are only fetching the region once.
+              region: await fetchSpeechServicesRegion()
+            }
           );
+
           const webSpeechPonyfillFactory = await window.WebChat.createBrowserWebSpeechPonyfillFactory();
 
           return options => {
@@ -70,7 +114,7 @@
         }
 
         // Pass a Web Speech ponyfill factory to renderWebChat.
-        // You can also use your own speech engine, given it is compliant to W3C Web Speech API, https://w3c.github.io/speech-api/.
+        // You can also use your own speech engine, given it is compliant to W3C Web Speech API: https://w3c.github.io/speech-api/.
         // For implementation, look at createBrowserWebSpeechPonyfill.js for details.
         window.WebChat.renderWebChat(
           {
diff --git a/samples/06.g.select-voice/README.md b/samples/06.g.select-voice/README.md
index b0bbb7522d..5e18accc91 100644
--- a/samples/06.g.select-voice/README.md
+++ b/samples/06.g.select-voice/README.md
@@ -37,24 +37,13 @@ When Web Chat synthesizes an activity, it will call the `selectVoice` function w
 In the sample code below, if the activity is for language "zh-HK", we will use a voice with keyword "TracyRUS". Otherwise, it will choose a voice with keyword "JessaNeural" over "Jessa".
 
 ```diff
-  const directLineTokenResponse = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
-  const { token } = await directLineTokenResponse.json();
-
-  const speechTokenResponse = await fetch('https://webchat-mockbot.azurewebsites.net/speechservices/token', { method: 'POST' });
-  const { region, token: authorizationToken } = await speechTokenResponse.json();
-
-  webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({ authorizationToken, region });
-
   window.WebChat.renderWebChat({
     directLine: window.WebChat.createDirectLine({ token }),
 +   selectVoice: (voices, activity) =>
-+     // If the activity is in zh-HK, use a voice with keyword "TracyRUS" (Cantonese).
-+     // Otherwise, use "JessaNeural" (preferred) or "Jessa".
-+     activity.locale === 'zh-HK' ?
-+       voices.find(({ name }) => /TracyRUS/iu.test(name))
-+     :
-+       voices.find(({ name }) => /JessaNeural/iu.test(name))
-+       || voices.find(({ name }) => /Jessa/iu.test(name)),
++     activity.locale === 'zh-HK'
++     ? voices.find(({ name }) => /TracyRUS/iu.test(name))
++     : voices.find(({ name }) => /JessaNeural/iu.test(name)) ||
++       voices.find(({ name }) => /Jessa/iu.test(name)),
     webSpeechPonyfillFactory
   }, document.getElementById('webchat'));
 ```
@@ -62,23 +51,12 @@ In the sample code below, if the activity is for language "zh-HK", we will use a
 ## Completed code
 
 ```js
-const directLineTokenResponse = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
-const { token } = await directLineTokenResponse.json();
-
-const speechTokenResponse = await fetch('https://webchat-mockbot.azurewebsites.net/speechservices/token', { method: 'POST' });
-const { region, token: authorizationToken } = await speechTokenResponse.json();
-
-webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({ authorizationToken, region });
-
 window.WebChat.renderWebChat({
   directLine: window.WebChat.createDirectLine({ token }),
   selectVoice: (voices, activity) =>
-    // If the activity is in zh-HK, use a voice with keyword "TracyRUS" (Cantonese).
-    // Otherwise, use "JessaNeural" (preferred) or "Jessa".
-    activity.locale === 'zh-HK' ?
-      voices.find(({ name }) => /TracyRUS/iu.test(name))
-    :
-      voices.find(({ name }) => /JessaNeural/iu.test(name))
+    activity.locale === 'zh-HK'
+    ? voices.find(({ name }) => /TracyRUS/iu.test(name))
+    : voices.find(({ name }) => /JessaNeural/iu.test(name))
       || voices.find(({ name }) => /Jessa/iu.test(name)),
   webSpeechPonyfillFactory
 }, document.getElementById('webchat'));
diff --git a/samples/06.g.select-voice/index.html b/samples/06.g.select-voice/index.html
index 6b03d71f42..561a62e064 100644
--- a/samples/06.g.select-voice/index.html
+++ b/samples/06.g.select-voice/index.html
@@ -28,6 +28,41 @@
   <body>
     <div id="webchat" role="main"></div>
     <script>
+      // Create a function to fetch the Cognitive Services Speech Services credentials.
+      // The async function created will hold expiration information about the token and will return cached token when possible.
+      function createFetchSpeechServicesCredentials() {
+        let expireAfter = 0;
+        let lastResult = {};
+
+        return async () => {
+          // Fetch a new token if the existing one is expiring.
+          // The following article mentioned the token is only valid for 10 minutes.
+          // We will invalidate the token after 5 minutes.
+          // https://docs.microsoft.com/en-us/azure/cognitive-services/authentication#authenticate-with-an-authentication-token
+          if (Date.now() > expireAfter) {
+            const speechServicesTokenRes = await fetch(
+              'https://webchat-mockbot.azurewebsites.net/speechservices/token',
+              { method: 'POST' }
+            );
+
+            lastResult = await speechServicesTokenRes.json();
+            expireAfter = Date.now() + 300000;
+          }
+
+          return lastResult;
+        };
+      }
+
+      const fetchSpeechServicesCredentials = createFetchSpeechServicesCredentials();
+
+      async function fetchSpeechServicesRegion() {
+        return (await fetchSpeechServicesCredentials()).region;
+      }
+
+      async function fetchSpeechServicesToken() {
+        return (await fetchSpeechServicesCredentials()).token;
+      }
+
       (async function() {
         // In this demo, we are using Direct Line token from MockBot.
         // Your client code must provide either a secret or a token to talk to your bot.
@@ -39,14 +74,14 @@
         });
         const { token } = await directLineTokenResponse.json();
 
-        const speechTokenResponse = await fetch('https://webchat-mockbot.azurewebsites.net/speechservices/token', {
-          method: 'POST'
-        });
-        const { region, token: authorizationToken } = await speechTokenResponse.json();
+        // Create the ponyfill factory function, which can be called to create a concrete implementation of the ponyfill.
+        const webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
+          // We are passing the Promise function to the authorizationToken field.
+          // This function will be called every time the token is being used.
+          authorizationToken: fetchSpeechServicesToken,
 
-        webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
-          authorizationToken,
-          region
+          // In contrast, we are only fetching the region once.
+          region: await fetchSpeechServicesRegion()
         });
 
         window.WebChat.renderWebChat(
diff --git a/samples/06.h.cognitive-services-speech-recognition-only/README.md b/samples/06.h.cognitive-services-speech-recognition-only/README.md
new file mode 100644
index 0000000000..bd78607387
--- /dev/null
+++ b/samples/06.h.cognitive-services-speech-recognition-only/README.md
@@ -0,0 +1,196 @@
+# Sample - Using speech recognition only
+
+A simple web page that uses speech-to-text only and disable text-to-speech. This sample makes changes that are based off of the [Cognitive Services Speech Services sample](./../06.c.cognitive-services-speech-services-js/README.md).
+
+# Test out the hosted sample
+
+-  [Try out MockBot](https://microsoft.github.io/BotFramework-WebChat/06.h.cognitive-services-speech-recognition-only)
+
+# How to run locally
+
+-  Fork this repository
+-  Navigate to `/Your-Local-WebChat/samples/06.h.cognitive-services-speech-recognition-only` in command line
+-  Run `npx serve`
+-  Browse to [http://localhost:5000/](http://localhost:5000/)
+
+# Things to try out
+
+-  Use the microphone button: you should be able to provide commands to the bot via speech
+-  Speak `echo 123`: the bot reply with "Echoing back in a separate activity" and "123"
+
+# Code
+
+> Jump to [completed code](#completed-code) to see the end-result `index.html`.
+
+### Goals of this bot
+
+The `index.html` page has one main goal:
+
+-  To enable speech by using different engines:
+   -  Speech-to-text: Cognitive Services Speech Services engine
+   -  Text-to-speech: disabled
+
+We will start by using the [Cognitive Services Speech Services sample](./../06.c.cognitive-services-speech-services-js/README.md) as our Web Chat template.
+
+> Web browser speech package is available in the Web Chat core bundle and the full bundle, and you can use either CDN in your bot.
+
+This sample creates a new ponyfill factory by using speech-to-text engine from Cognitive Services Speech Services. By creating our own ponyfill we are able to pick and choose which aspects to use from which engine.
+
+Create an async factory called `createSpeechRecognitionOnlyPonyfillFactory` that will build our hybrid.
+
+```js
+async function createSpeechRecognitionOnlyPonyfillFactory() {…}
+```
+
+Create a ponyfill factory from Speech Services.
+
+```diff
+  const speechServicesPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory(
+    {
++     authorizationToken: fetchSpeechServicesToken,
++     region: await fetchSpeechServicesRegion()
+    }
+  );
+```
+
+Then return a new ponyfill factory that will call the one from Speech Services, but partially return the result.
+
+```diff
+…
++   return options => {
++     const speechServicesPonyfill = speechServicesPonyfillFactory(options);
++
++     return {
++       SpeechGrammarList: speechServicesPonyfill.SpeechGrammarList,
++       SpeechRecognition: speechServicesPonyfill.SpeechRecognition
++     };
++   };
+  };
+
+```
+
+Finally, pass your new ponyfill factory into `renderWebChat`.
+
+```diff
+  window.WebChat.renderWebChat({
+    directLine: window.WebChat.createDirectLine({ token }),
++   webSpeechPonyfillFactory: await createSpeechRecognitionOnlyPonyfillFactory()
+  }, document.getElementById('webchat'));
+```
+
+## Completed code
+
+Here is the finished `index.html`:
+
+```diff
+  <!DOCTYPE html>
+  <html lang="en-US">
+    <head>
+      <title>Web Chat: Speech recognition only</title>
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
+      <style>
+        html,
+        body {
+          height: 100%;
+        }
+        body {
+          margin: 0;
+        }
+
+        #webchat {
+          height: 100%;
+          width: 100%;
+        }
+      </style>
+    </head>
+    <body>
+      <div id="webchat" role="main"></div>
+      <script>
+        function createFetchSpeechServicesCredentials() {
+          let expireAfter = 0;
+          let lastResult = {};
+
+          return async () => {
+            if (Date.now() > expireAfter) {
+              const speechServicesTokenRes = await fetch(
+                'https://webchat-mockbot.azurewebsites.net/speechservices/token',
+                { method: 'POST' }
+              );
+
+              lastResult = await speechServicesTokenRes.json();
+              expireAfter = Date.now() + 300000;
+            }
+
+            return lastResult;
+          };
+        }
+
+        const fetchSpeechServicesCredentials = createFetchSpeechServicesCredentials();
+
+        async function fetchSpeechServicesRegion() {
+          return (await fetchSpeechServicesCredentials()).region;
+        }
+
+        async function fetchSpeechServicesToken() {
+          return (await fetchSpeechServicesCredentials()).token;
+        }
+
+        (async function() {
+          const directLineTokenRes = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', {
+            method: 'POST'
+          });
+
+          const { token } = await directLineTokenRes.json();
+
+-         const webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
+-           authorizationToken: fetchSpeechServicesToken,
+-           region: await fetchSpeechServicesRegion()
+-         });
+
++         async function createSpeechRecognitionOnlyPonyfillFactory() {
++           const speechServicesPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory(
++             {
++               authorizationToken: fetchSpeechServicesToken,
++               region: await fetchSpeechServicesRegion()
++             }
++           );
++
++           return options => {
++             const speechServicesPonyfill = speechServicesPonyfillFactory(options);
++
++             return {
++               SpeechGrammarList: speechServicesPonyfill.SpeechGrammarList,
++               SpeechRecognition: speechServicesPonyfill.SpeechRecognition
++             };
++           };
++         }
+
+          window.WebChat.renderWebChat(
+            {
+              directLine: window.WebChat.createDirectLine({ token }),
+-             webSpeechPonyfillFactory
++             webSpeechPonyfillFactory: await createSpeechRecognitionOnlyPonyfillFactory()
+            },
+            document.getElementById('webchat')
+          );
+
+          document.querySelector('#webchat > *').focus();
+        })().catch(err => console.error(err));
+      </script>
+    </body>
+  </html>
+```
+
+# Further Reading
+
+-  [Cognitive Speech Speech Services](https://azure.microsoft.com/en-us/services/cognitive-services/speech-services/)
+-  [W3C Web Speech API](https://w3c.github.io/speech-api/)
+-  [JavaScript Factory Functions with ES6+](https://medium.com/javascript-scene/javascript-factory-functions-with-es6-4d224591a8b1)
+
+-  [Cognitive Services Speech Services bot](https://microsoft.github.io/BotFramework-WebChat/06.c.cognitive-services-speech-services-js) | [(Cognitive Services Speech Services source code)](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.c.cognitive-services-speech-services-js)
+-  [Speech Web browser bot](https://microsoft.github.io/BotFramework-WebChat/06.f.hybrid-speech) | [(Speech Web browser source code)](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/06.f.hybrid-speech)
+
+## Full list of Web Chat hosted samples
+
+View the list of [available Web Chat samples](https://github.com/microsoft/BotFramework-WebChat/tree/master/samples) -->
diff --git a/samples/06.h.cognitive-services-speech-recognition-only/index.html b/samples/06.h.cognitive-services-speech-recognition-only/index.html
new file mode 100644
index 0000000000..034d6d71c5
--- /dev/null
+++ b/samples/06.h.cognitive-services-speech-recognition-only/index.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <title>Web Chat: Speech recognition only</title>
+    <!-- Cognitive Services Speech Services adapter is only available in full bundle -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!--
+      This CDN points to the latest official release of Web Chat. If you need to test against Web Chat's latest bits, please refer to pointing to Web Chat's MyGet feed:
+      https://github.com/microsoft/BotFramework-WebChat#how-to-test-with-web-chats-latest-bits
+    -->
+    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
+    <style>
+      html,
+      body {
+        height: 100%;
+      }
+      body {
+        margin: 0;
+      }
+
+      #webchat {
+        height: 100%;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="webchat" role="main"></div>
+    <script>
+      // Create a function to fetch the Cognitive Services Speech Services credentials.
+      // The async function created will hold expiration information about the token and will return cached token when possible.
+      function createFetchSpeechServicesCredentials() {
+        let expireAfter = 0;
+        let lastResult = {};
+
+        return async () => {
+          // Fetch a new token if the existing one is expiring.
+          // The following article mentioned the token is only valid for 10 minutes.
+          // We will invalidate the token after 5 minutes.
+          // https://docs.microsoft.com/en-us/azure/cognitive-services/authentication#authenticate-with-an-authentication-token
+          if (Date.now() > expireAfter) {
+            const speechServicesTokenRes = await fetch(
+              'https://webchat-mockbot.azurewebsites.net/speechservices/token',
+              { method: 'POST' }
+            );
+
+            lastResult = await speechServicesTokenRes.json();
+            expireAfter = Date.now() + 300000;
+          }
+
+          return lastResult;
+        };
+      }
+
+      const fetchSpeechServicesCredentials = createFetchSpeechServicesCredentials();
+
+      async function fetchSpeechServicesRegion() {
+        return (await fetchSpeechServicesCredentials()).region;
+      }
+
+      async function fetchSpeechServicesToken() {
+        return (await fetchSpeechServicesCredentials()).token;
+      }
+
+      (async function() {
+        // In this demo, we are using Direct Line token from MockBot.
+        // Your client code must provide either a secret or a token to talk to your bot.
+        // Tokens are more secure. To learn about the differences between secrets and tokens
+        // and to understand the risks associated with using secrets, visit https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication?view=azure-bot-service-4.0
+
+        const directLineTokenRes = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', {
+          method: 'POST'
+        });
+
+        const { token } = await directLineTokenRes.json();
+
+        // We are creating a ponyfill factory that will only return speech recognition part.
+        async function createSpeechRecognitionOnlyPonyfillFactory() {
+          // Create the ponyfill factory function, which can be called to create a concrete implementation of the ponyfill.
+          const speechServicesPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory(
+            {
+              // We are passing the Promise function to the authorizationToken field.
+              // This function will be called every time the token is used.
+              authorizationToken: fetchSpeechServicesToken,
+
+              // In contrast, we are only fetching the region once.
+              region: await fetchSpeechServicesRegion()
+            }
+          );
+
+          return options => {
+            const speechServicesPonyfill = speechServicesPonyfillFactory(options);
+
+            // We are only returning the speech recognition part of the ponyfill, not the speech synthesis part.
+            return {
+              SpeechGrammarList: speechServicesPonyfill.SpeechGrammarList,
+              SpeechRecognition: speechServicesPonyfill.SpeechRecognition
+            };
+          };
+        }
+
+        // Pass a Web Speech ponyfill factory to renderWebChat.
+        // You can also use your own speech engine, given it is compliant to W3C Web Speech API: https://w3c.github.io/speech-api/.
+        // For implementation, look at createBrowserWebSpeechPonyfill.js for details.
+        window.WebChat.renderWebChat(
+          {
+            directLine: window.WebChat.createDirectLine({ token }),
+            webSpeechPonyfillFactory: await createSpeechRecognitionOnlyPonyfillFactory()
+          },
+          document.getElementById('webchat')
+        );
+
+        document.querySelector('#webchat > *').focus();
+      })().catch(err => console.error(err));
+    </script>
+  </body>
+</html>