Skip to Content

I have become more interested in chat bots and how they can serve customers.  After a bunch of research and testing I decided to start a project in order to learn about bots.

In this article, I explain steps to integrate chat bots with SAP Web IDE.  I will be using recast.ai to create chat bot, integrate and render the same in ui5. So, friends let get started.

Web IDE For The Front End

I decided to use SAP Web IDE to develop the front end to the project, as Web IDE allows fast yet robust development of sites that can be deployed easily.  Web IDE was the perfect fit for this learning project.

Assumption

  1. You have created bot in recast.ai
  2. You have base knowledge of rest api.

Procedure of Integration and Chat Bot Rendering

Step 1. Invoke recast rest api passing your user slug and token.

a. Redefine onAfterRendering

b.Invoke rest api call to get user unique ID or uuid which would later be used for interaction between the ui5 bot interface and recast intents.

Please find place for your user-slug and token to find out in recast

 

Step 2. Invoke bot popover in the sense render ui

Invoke chat bot by registering enter key with code 13 for chat input. This would enable bot-user chat interactive display on the press even of enter key.

 

Step 3. Fetch response of user chat input based on intent received from recast.

 

Step 4. Create bot message ui based on the response received in step 4 rest call.

Step 5. Add animation to bot message display and after timeout we remove the animation in above step.

 

Last Step 6. Add style class for images in chat display to appear as icon siZe.

 

Conclusion

  1. Refer recast.ai api-reference to know more about connectors.
  2. Chat bot interface can be designed in many ways please find this code pen link.
  3. Whenever, you are doing integration providing correct tokens number, user slug and bot slug(bot name) is important for successful integration.
  4. Please find link to above sample code in github.

Hope it helps 🙂

 

Regards,

Manisha Madhwani

 

 

 

 

 

 

 

To report this post you need to login first.

13 Comments

You must be Logged on to comment or reply to a post.

  1. Sai Giridhar Varanasi

    Well Well Well ! Thank you so much for this Manisha. We completed backend part of one of our chatbot implementation and are waiting to make the UI part. Thanks for giving us a best resource to refer via this blog. This SAPUI5 – Recast.AI integration blog would surely help us a lot.

    Keep writing more!

    (1) 
    1. Evgeniy Kalinogorskiy

      In our solution we are going to little bit different way – we develop own bot server for interaction with sap with inbound text classification and interface with possibility to flexible call any fm inside sap. So we have some benefit now – possible to install locally inside the customers landscape, easy enhance with new function, secured chat with 128 bit  encryption.

      (1) 
      1. Sai Giridhar Varanasi

        Hi Evgeniy,

        Super. Your customized chatbot layer looks very flexible from what you have written. You have included security too! Very nice. We will seek your expertise in this area soon.

        Thanks

        Best,

        Giridhar

        (1) 
  2. BHARANIDHARAN S P M

    Hi Manisha,

    Thanks for your post but it seems that the chatbot interface shows or takes up only 2 inputs. I have replaced with my chatbot but still it shows takes/shows only 2 inputs.

    I could see that the chat interface is from codepen.io but that is working fine there.

    Kindly check the application for any correction required.

    Regards,

    Bharanidharan

    (1) 
    1. Sai Giridhar Varanasi

      Hi Bharanidharan,

      Using this code from from codepen.io we faced this issue too. You need to include a slider in the dialogue component there. All the dialogues are getting rendered on UI but are just hided. Adjusting the CSS also would help you.

      We created our own SAPUI5 based UI now.

      Thanks

      Best,

      Giridhar

      (1) 
        1. Sai Giridhar Varanasi

          Before I share the code, I would like to share the following blog with you wherein they used only SAPUI5 controls. Our code is obsolete now as we are using HTML elements which is against the SAPUI5/Fiori standards. I see you already made a comment over there. You can use the code from our blog and Mikhail’s blog. Please contact Manisha Madhwani for the code.

          https://blogs.sap.com/2018/09/05/conversational-ai-recast.ai-direct-integration-with-sapui5-application/

          Best

          Giridhar on behalf of Manisha.

          (0) 

Leave a Reply