In Part 9 of the Kylie Bot series, we published our Bot into the world. The challenge is that we didn't give people a way to access the bot. This post will focus on embedding the bot into a Dynamics 365 Customer Engagement portal that we have created previously. To get started, navigate here. You should see this screen:
You will be prompted to login, so use your Microsoft credentials as follows:
You will also need to enter your password like this:
Next, you should see a page listing your bot and you can then select the bot you wish to use (Kylie Bot) by clicking on the name of the bot.
Next, we will be presented with the landing page for the bot like this:
Click on the 'Get bot embedded codes' button below the two channel lines and you should then be presented with the following dialog:
Make sure you click on the second icon in the dialog and then you will be able to click the link at the bottom of the dialog that says 'Click here to open the Web Chat configuration page'. You should then be presented with the following screen:
Click the 'Add new site' button in the top left corner to then create a website where the embedded bot will be deployed. The following popup should present itself:
Name your website accordingly (its only for reference so an easily identifiable name will do). Next, click on the 'Done' button which should result in the following screen appearing:
Click on the 'Show' link for one of the Secret key fields. You will need to then copy the code from the embed code window and update the 'YOUR_SECRET_HERE' text with the key that you have just shown. Keep this code as we will need it to embed in our portal. Next, Navigate to our Dynamics 365 Customer Engagement instance and then from the menu bar, select the Portals menu item and the the Content Snippets option like this:
You should be presented with a screen like this where you will need to click on the 'Chat Widget Code' line item to open it up:
The 'Chat Widget Code' item will look like this:
You will then need to click on the '</>' button of the Value (HTML) field and update the field with the following code:
<script>
(function () {
var div = document.createElement("div");
document.getElementsByTagName('body')[0].appendChild(div);
div.outerHTML = "<div id='botDiv' style='height: 38px; position: fixed; right:0; bottom: 0; z-index: 1000; background-color: #fff'><div id='botTitleBar' style='height: 38px; width: 400px; position:fixed; cursor: pointer;'></div><iframe width='400px' height='600px' src=' https://webchat.botframework.com/embed/BOTNAME?s=BOT_SECRET></iframe></div>";
document.querySelector('body').addEventListener('click', function (e) {
e.target.matches = e.target.matches || e.target.msMatchesSelector;
if (e.target.matches('#botTitleBar')) {
var botDiv = document.querySelector('#botDiv');
botDiv.style.height = botDiv.style.height == '600px' ? '38px' : '600px';
};
});
}());
</script>
Note that the code contains the sections that you copied earlier. For ease, you can just copy the above and update the BOTNAME and BOT_SECRET text in the above to match that of what you copied earlier. The Chat Widget Code item should now look like this:
Save the record and that's it! You will then be able to navigate to your Dynamics 365 Customer Engagement portal and you should observe the blue chat bar at the bottom right of your screen like this:
Clicking on the blue chat bar will result in the following:
Great stuff, we have now unleashed Kylie Bot into the world and users can interact directly with the bot. Lookout for the next post which will focus on indexing all the content that Kylie Bot can serve, and including several more sources into the search.