Introduction
While building a SAP Conversational AI chatbot agent for customer PoC, a lot of time we use Webchat as a user front-channel which let us deploy a chatbot straight to a website. The Webchat is supported by all mobile and desktop browsers in their latest versions. Internet Explorer support starts at version 9.0.
It's good to know that we are not restricted by default Webchat channel capabilities, but we can further enhance it with extra capabilities (i.e. speech recognition, add file upload, etc) since the SAP Conversational AI Webchat channel codes are open-source; you can view it Github repository link here.
However please take note that we will need to rebuild and self-host the Webchat file after customising the Webchat (no worries it's just one .js file).
Customise Webchat Channel
For simplification, this technical article will only show you how you can embed and play video directly on enhanced Webchat channel instead of appearing as a normal link.
Prerequisites
- Basic understanding of SAP Conversational AI project.
- Basic understanding of html5 and javascript. For more advanced customisation, it's recommended that you also know React and Redux since the Webchat is built using React and Redux.
- Nodejs and npm installed for building Webchat source codes.
Step 1: Clone Webchat source code
Download (or Git clone) the Webchat source code from its Github repository page: https://github.com/SAPConversationalAI/Webchat
Step 2: Modify Picture.js to accept video URL
Locate and edit
src > components > Message > Picture.js.Added the following code modification (in below example, I enhance it to accept YouTube video only, but you can also enhance it to include other video platform such as Vimeo):
const Picture = ({ content, onImageLoaded }) => {
if (content && sanitizeUrl(content) === 'about:blank') {
return null
}
if (content.includes('youtube.com/embed')) {
return <iframe width='100%' height='auto' src={content} />
}
return <img onLoad={onImageLoaded} src={content} className={'RecastAppPicture CaiAppPicture'} />
}From the code above, if the image source content (URL) contains
youtube.com/embed it will embed the video iframe which allow user to preview and play the video directly on Webchat channel; otherwise it will load the image content instead.Step 3: Rebuild Webchat for production
Check out the guide here on rebuilding the Webchat source codes: https://github.com/SAPConversationalAI/Webchat/blob/master/README.md
$> npm run buildThis will generate new
webchat.js in dist folder when above script run successfully.Step 4: Self-host and use generated webchat.js
Next step, just grab and host the generated
webchat.js. You can bundle it together web app, or upload to any web server; most importantly the URL of that webchat.js has to be accessible from public internet.To use it instead of the default one provided by SAP Conversational AI, you need to set up the Webchat channel in the CONNECT tab of your bot project . You'll be using the same script as the default installation, but you have to replace the
src field by your own URL of generated webchat.js.<script
src="YOUR_WEBCHAT_URL"
...
></script>Step 5: Add video URL and test Webchat
Go to BUILD tab of your bot project, and access / create new bot skill.
Access
Actions, and send message as Image:Insert any YouTube embed link (i.e. https://www.youtube.com/embed/bPITHEiFWLc) in the Image field.
When you test it you should see the YouTube video preview with play button instead of pure YouTube link - see the demo in action:
Note: test it on production environment directly, not via TEST bot available in bot project.
Conclusion
SAP Conversational AI platform gives you lots of flexibility here; it gives us a freedom to customise or enhance our own version of Webchat channel with additional capability on-top of other standard user channels which you can view it here.
For more information about SAP Conversational AI:
- SAP Managed Tags:
4 Comments
