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 helps you 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.

Use the Chatbot block in your application

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

  1. In your application, 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 – to be obtained from the Direct Line channel configuration page of your Web App Bot resource on Azure Portal

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

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

    • IsInline – a boolean which specifies how to display the chatbot UI within the screen

  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 Modules 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.

  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?