This is a step-by-step guide to add the chatbot UI block to an OutSystems app. To have a functional chatbot, you also need a logic to handle the responses. Create an FAQ chatbot for your app provides detailed instructions for an FAQ bot. If you're implementing advanced use cases, check Create advanced logic and reply with cards.
You need to install the OutSystems.AI Chatbot component to follow the guide.
Follow these steps to add the chatbot UI block to your app.
- Create a new Reactive Web App and add a module of the same type to it. You can also use an existing Reactive Web App.
Open the Manage Dependencies dialog (press Ctrl+Q). Search for
Chatbot. Select Chatbot in the producers pane, and then select all elements in the elements pane. Click Apply.
With this you add elements from the Chatbot component to create UI and configure the chatbot.
Add a Screen to the module. Alternatively, if you're using an existing app, open a Screen.
Add the chatbot block to the Screen. Navigate to Interface > (you app) > UI Flows > Chatbot > Components. Drag the Chatbot Block to the Screen. The Chatbot preview now shows in the Screen.
Select the Chatbot component Block. In the properties, locate DirectLineSecret. Paste the direct line key from Azure, surrounded by the quotation marks.
Direct line secret is a value from the Azure bot service. Depending on how you got to this step, you need to do one of the following:
Publish your app and test the chatbot. Enter a message in the chat window. If you get replies from the chatbot, then your chatbot is working correctly.
You can now start developing a more complex chatbot.
For information on how to configure other parameters, including the welcome message, check the chatbot reference.
This section contains some of the issues you may run into while developing your chat but, as well as information how to fix those issues.
Bad argument: invalid token or secret
If you get an error with the message "Bad argument: invalid token or secret message" after you run the app with the chatbot, check if the direct line value is valid.