Chatbot Integration

Introduction

Integrating a chatbot into your Joget application can significantly enhance user interaction by providing automated support, answering queries, and guiding users through the application. In this guide, you'll learn how to integrate a chatbot using the Yellow.ai platform.

How does it work?

The integration involves creating a chatbot on the Yellow.ai platform and embedding it into your Joget application through custom JavaScript. Once implemented, the chatbot will be available on every page of your Joget application and ready to assist users in real time.

Steps to Implement the Chatbot:

Create a Yellow.ai chatbot

Go to Yellow.ai to register an account and log in.
Go to the top-left corner of the dashboard and click Channels > Chat Widget to modify your chatbot's appearance. Customize your bot as needed by referring to Yellow.ai's documentation.
Get Bot ID from url https://cloud.yellow.ai/bot/<BOT_ID>/overview to be used in Integrating into Joget Application step.

Integrate into Joget application

Open any Joget Application and go to UI Builder > Settings > Advanced section.

Add this code to Custom JavaScript field (modify ymConfig's Bot ID based on the Bot ID retrieved from the Yellow.ai URL).

$(document).on('page_loaded', function() {
    var d = document,
    i = function() {
        i.c(arguments)
    };
    var e = d.createElement("script");
    e.type = "text/javascript", e.async = !0, e.src = "https://cdn.yellowmessenger.com/plugin/widget-v2/latest/dist/main.min.js";
    var t = d.getElementsByTagName("script")[0];
    t.parentNode.insertBefore(e, t)
                 
    window.ymConfig = {"bot":"x1687447674367","host":"https://r3.cloud.yellow.ai"};
   
    var w = window,
    ic = w.YellowMessenger;
    if ("function" === typeof ic) ic("reattach_activator"), ic("update", ymConfig);
});