Skip to main content

Extensibility and Integration

 

OutSystems

Setup and use the OutSystems.AI Chatbot component in your OutSystems applications

Chatbots act as a first line-of-communication, providing support to customers while increasing efficiency and customer satisfaction. You can now use the OutSystems.AI Chatbot component to create your own chatbot in your web applications.

Prerequisites:

  1. Create an Azure account.
  2. Create a Web App Bot resource on Azure Portal.
  3. Download OutSystems.AI Chatbot and its dependencies from the Forge and publish them to your Environment.

Use the Chatbot block in your application

To use the Chatbot block in your application, do the following:

  1. Go to Manage Dependencies, select ChatbotWeb and add it as a dependency.

  2. Drag the Chatbot web block to the screen where you want to add it.

  3. Fill the following input fields of the web block:

    • DirectLineSecret – from your Web App Bot resource on Azure Portal, under Bot management, go to Channels, add a Direct Line channel through the respective icon and you’ll be provided with two secret keys. Add any of them to this field.

    • BotName – pick the name to be displayed in the chat UI.

    • WelcomeMessage – choose the first message to be displayed in the chat.

    • IsInline – specify how to display the chatbot UI within the screen through a boolean.

    • StartsClosed - define if the chat window starts opened or closed when in a modal.

  4. Customize the icons in the placeholders of the Chatbot web block.

  5. Publish and test the visual result. You can also interact with the chatbot to confirm that it is correctly linked to your Azure bot.

Create the logic for the bot responses

To create the logic for the bot responses, do the following:

  1. Create a new web application in Service Studio. Choose the Azure Bot Webhook template and create the module.

  2. Publish the module. Ideally, you should move the module you just published to the application to which you’re adding the chatbot.

  3. In Service Center, under the Factory tab, go to eSpaces and search for the module that you created based on the AzureBotWebhook template.

  4. Go to the Site Properties tab and set the MicrosoftClientId and the MicrosoftClientSecret to the credentials of your Web App Bot resource. MicrosoftClientID can be found under Microsoft App ID in the Settings tab of Azure Portal, and the MicrosoftClientSecret is found by clicking in the Manage button next to the Microsoft App ID. You may need to generate a new key to be able to see and copy the Client Secret that is under Value in this page.

  5. In the module created based on the Webhook template, go to the Logic tab and under the Integrations folder, select the PostMessage REST service to follow the comments in logic flow.

  6. In the GetResponseMessage Server Action, add and customize the logic for the bot responses. The following example illustrates how logic can be customized for a bot that predicts the weather.

  7. In the Logic tab, go to Integrations, right-click MessagingWebhook_V1 and click on Open Documentation. A tab will open in your browser with details about the REST service.

  8. Copy the request URL of the service from the tab in the browser.

  9. Go to your Azure Portal and select the respective Web App Bot resource.

  10. Go to the resource settings, paste the copied request URL in the Messaging Endpoint field and save the settings.

Use the ChatbotAdvanced block in your applications

Use the ChatbotAdvanced block to create customized chatbots for your business needs. You can either create your own UI or use any existing, customized UI with the logic we provide in the ChatbotAdvanced block.

  1. In your application, go to Manage Dependencies, select ChatbotWeb, and add the ChatbotAdvanced block and SendMessage Server Action as dependencies.

  2. In the Manage Dependencies window, search for AzureBotFrameworkConnector, go to Structures and select Message.

  3. Drag the ChatbotAdvanced web block to the screen.

  4. Fill the DirectLineSecret input field with the value from the Direct Line channel configuration.

  5. In OnNotify, choose New Screen Action and add the following two local variables to the screen:

    • ConversationId of Text data type
    • ChannelAccount of ChannelAccount data type

  6. In the OnNotify Screen Action, add a Run Server Action and set it to NotifyGetMessage.

  7. Add a JSON Deserialize, set the message output from the NotifyGetMessage as JSON String and the Message structure as Data Type.

  8. Add an If and set the condition to JSONDeserializeMessage.Data.Text <> "". Right-click the IF to swap connectors.

  9. Add an Assign to the False branch of the If. Add the following assignments:

    • ConversationId = JSONDeserializeMessage.Data.Conversation.Id
    • ChannelAccount = JSONDeserializeMessage.Data.From
  10. In the True branch of the If, add a ListAppend to append the messages received to a message list.

  11. Add a new Screen Action to your screen and in the logic flow of the Screen Action, add the Server Action SendMessage from the Chatbot Web component.

  12. In SendMessage, fill the input parameters:

    • ConversationId with the previously created local variable ConversationId
    • DirectLineSecret with the same value used in the block
    • From with the previously created local variable ChannelAccount
    • TextMessage with the message the end-user sends to the bot
  • Was this article helpful?