If your organisation is seeking ways to lower the cost of its customer interactions, while simultaneously appearing to be innovative, fun and modern, then Bots should be your next new customer channel. (Social media is sooo last year).
Microsoft’s Bot Framework is a great new toolkit that enables you to build human-like dialogs between your customers and your Bot, with the purpose of transacting a specific business scenario – for example, ordering a product.
In Part 1 of this walk-through, I’ll show you to set up the ‘Contoso Flowers’ Bot in Skype to demo a customer interacting with the Bot in order to buy some flowers.
In Part 2 (which I’ve not written yet), we’ll modify the Bot code to create an actual order record in Microsoft Dynamics 365.
Contoso Flowers is a bot demo you can find in the Microsoft BotBuilder-Samples on GitHub, it makes a great demo because it showcases a whole bunch of cool Bot Framework features, including Carousels, Cards and Bing Maps integration.
BTW, I’m not taking credit for the fantastic Bot code (that credit goes to people far more clever than me!), all I’m doing is explaining how to string together the different elements involved.
For this walk-through, you will need:
- The C# “demo-ContosoFlowers” folder downloaded from BotBuilder-Samples
- Microsoft Visual Studio 2015
- The Bot Emulator installed from here
- An Azure subscription
- Visual Studio Tools for Azure installed
Step 1 – Create your Bot
- Go to the Bot Framework, sign in, then click Register a bot
- In the Bot Profile section, add a Name, Handle and Description
- Upload an Icon if you wish
- In the Configuration section, enter https://www.bbc.co.uk
This URL is just a placeholder, we’ll update it later once we know the URL of the Azure Web App where we deploy our bot.
- Click Create Microsoft App ID and password
- Note these down
- Click Create an app password to continue
- IMPORTANT: note this down, you won’t get another chance!
- Click Finish and go back to bot framework
- Confirm the legal bits then click Register
Now you’ll see all the channels where we’ll later be able to deploy our Bot, cool huh?!
Step 2 – Bot Code
- Open the ContosoFlowers solution downloaded from Pre-Requisite 1 in Visual Studio 2015
- Open Web.config
- Under appSettings, enter your BotID (Bot Handle), Microsoft App ID and Microsoft App Password for the Bot you created in Step 1
- Build Solution
Step 3 – Test in the Bot Emulator
At this point, the code should “just work” – but there’s no harm in testing anyway.
- In Visual Studio, select Debug, Any CPU, Microsoft Edge
- Start debugging by clicking Microsoft Edge
- A new browser window will pop up in Edge, copy the URL of this browser window (which should be http://localhost:xxxx)
- Append /api/messages to the end of the URL
- Open the Bot Emulator from Pre-Requisite 3
- Paste the whole, appended URL into the endpoint URL of the Bot Emulator
- Enter your Bot’s Microsoft App ID and Microsoft App Password created in Step 1
- Click Connect
- If all’s running well, you’ll now be able to interact with your Bot in the emulator
- Stop Debugging
Step 4 – Deploy your Bot Code to Azure
Now we’re happy that our bot is working as expected, we can send him (or her) up to its new home in Azure.
- Log on to Azure: http://portal.azure.com/
- Click New, Web + Mobile, Web App, then click Create
- Give your Web App a name, then select a Subscription, Resource Group and Location
- Click Create
- Once the deployment has completed, note down the URL of the Web App (this is what we’ll be replacing our http://www.bbc.co.uk placeholder with shortly)
- Back in Visual Studio, right-mouse click on the ContosoFlowers solution in the Solution Explorer, click Publish
- In the Select a Publish Target dialog box, click Microsoft Azure App Service
- If you’ve got the Visual Studio Tools for Azure installed as per Pre-Requisite 5, and you’ve already signed into your Azure account within Visual Studio, then you’ll simply be presented with a list of your existing Azure Web Apps (in their resource groups). Select the Web App you created above and click OK
- Your connection settings will now be automatically populated in the next dialog, click Publish
Step 5 – Add your Bot to Skype
- Back in the Bot Framework, click on My bots then select your ContosoFlowers bot
- In the Details section, click Edit
- Take the URL of the Web App you created in Step 4
- add an “s” after “http”
- append /api/messages to the end of the URL
- use this amended URL to replace the bbc.co.uk placeholder in the messaging endpoint
- Click Save Changes
- Click Test to test the bot connection. If all goes well you should see the “Endpoint authorization succeeded” message
- In the list of channels, click the Edit button next to Skype
- In the Settings dialog, ensure Enable the bot on Skype, Messages Types and Cards are all switched On
- Click I’m done configuring
- Click Add to Skype
- Then start chatting with your Bot!
Some final thoughts…
- I noticed the Bot doesn’t successfully add to Skype Preview (if you’re a Windows 10 user and have Skype Preview). Best to add to ‘normal’ Skype first, then open in Skype Preview after, if this is your preferred client
- You’ll need to add the Bot to your Skype contacts before you can start interacting with it
- I assume, like me, you’re only building your bot to demo and play around with, therefore there’s no need to Publish your bot via the Bot Framework and make it publically accessible
- If you’re halfway through a bot conversation and want to start again, type stop
- In Part 2 of this post (not yet written), I’ll modify the Bot Code to integrate back to Dynamics 365