A simple web page with a maximized Web Chat and minimal additional components. This bundle does NOT include the following dependencies:
- Adaptive Cards
- Cognitive Services
- Fork this repository
- Navigate to
/Your-Local-WebChat/samples/01.getting-started/h.minimal-markdownin command line - Run
npx serve - Browse to http://localhost:5000/
- Type
markdown: you should see rendered Markdown - Type
card weather: you should see an error stating Adaptive Cards renderer is not found - Type
hello: you should be able to type to the bot and receive a response in plain text
Jump to completed code to see the end-result
index.html.
This code features the minimal scripting the bot needs to host Web Chat with minimum dependencies, but has Markdown-It added for Markdown support.
The index.html page has two main goals.
- To import the Web Chat minimal bundle CDN script
- Enable markdown rendering
This sample starts with the minimal-bundle CDN sample as the base template.
First, add the Markdown-It dependency to our head.
…
<head>
<script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/latest/webchat-minimal.js"></script>
+ <script crossorigin="anonymous" src="https://unpkg.com/markdown-it@8.4.2/dist/markdown-it.min.js"></script>
</head>
…For demonstration purposes, we are using the latest official release of Web Chat at "/latest/webchat-minimal.js". When you are using Web Chat for production, you may lock down on a specific version with the following format: "/4.1.0/webchat-minimal.js".
Next, add and bind the markdown-it object to renderMarkdown:
…
directLine: window.WebChat.createDirectLine({ token }),
+ renderMarkdown: markdownIt.render.bind(markdownIt)
}, document.getElementById('webchat'));
…Here is the finished index.html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Web Chat: Minimal bundle with Markdown</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script crossorigin="anonymous" src="https://unpkg.com/markdown-it@8.4.2/dist/markdown-it.min.js"></script>
<script
crossorigin="anonymous"
src="https://cdn.botframework.com/botframework-webchat/latest/webchat-minimal.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://hawo-mockbot4-token-app.blueriver-ce85e8f0.westus.azurecontainerapps.io/api/token/directline', { method: 'POST' });
const { token } = await res.json();
const markdownIt = window.markdownit();
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({ token }),
renderMarkdown: markdownIt.render.bind(markdownIt)
},
document.getElementById('webchat')
);
document.querySelector('#webchat > *').focus();
})().catch(err => console.error(err));
</script>
</body>
</html>Check out the hosted samples and source code for other CDN bundle options below.
- Full bundle bot | (Full bundle source code)
- Full bundle with polyfills for ES5 browsers bot | (Full bundle with polyfills for ES5 browsers source code)
- Minimal bundle bot | (Minimal bundle source code)
Web Chat bundles sunburst chart - provides a visual of the contents of the various Web Chat bundles
View the list of available Web Chat samples