Introduction

In this article, we will show you how to integrate a chatbot to our Joget Application. We use Yellow.ai as the chatbot platform.

Implementation Steps

Create a Yellow.ai Chatbot

1. Go to yellow.ai to register an account and login.

Image Modified

2. Navigate to left up corner to click on "Channels" > "Chat widget" to modify the chatbot appearance.

You can also customise your bot based on your own needs by referring to Yellow.ai's Documentation.

Image Modified

3. Get Bot ID from url https://cloud.yellow.ai/bot/<BOT_ID>/overview to be used in Integrating into Joget Application section.

Image Modified

Integrating into Joget Application

1. Go to any Joget Application > UI Builder > Settings > "Custom JavaScript" placed in the "Advanced" section.

Image Modified

2. Add in this code into "Custom JavaScript" (modify ymConfig's Bot ID based on the Bot ID retrieved from 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);
});

3. Save and Launch App. Now you can see the chatbot in every page of the Joget Application.

Image Modified

Download Demo App

• APP_ChatbotApp-1-20230710224433.jwa