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.

Image Removed

Implementation Steps

Create a Yellow.ai Chatbot

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

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.

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

Integrating into Joget Application

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

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.

Download Demo App

• APP_ChatbotApp-1-20230710224433.jwa