Customising rasa webchat

Rasa Open Source
1

Hi, I want to know whether can I add a watermark in rasa webchat as in the bottom of this screenshot “Powered by ada”? Any suggestion or help would be appreciable.

image
image371×730 30 KB

2

@mangesh Hi! I don’t think so, but If you can clone the repo and add some react code, then you can, else you can add subtitle like this

subtitle: "Powered by XYZ",

3

@nik202 I think adding in subtitle would be a bad idea. Do you know if it is possible in some other frontend like chatroom?

4

@mangesh Sure, You can try this repo GitHub - JiteshGaikwad/Chatbot-Widget , I had implemented the same as you required using this code, its only few lines of code.

In style.css

.keypad1 {
    /* display: none;  */
    background: #F8F8FF;
    height: 30px;
    position: center;
    bottom: 30px;
    width: 100%;
    padding: 5px;
    text-align: center;
    font-size: 12px;
    border-radius: 0px 0px 10px 10px;
   
}

In index.html

<div class="keypad1">
                Powered by  <a href="https://www.rasa.com/">Rasa</a> <img src="static/img/logo.png" style="width:15px;height:15px; margin-bottom: -5px"/> 
              </div>

Hope this code will help, you need to add under keypad div section

Output:

image
image887×180 12.5 KB

Adjust setting of logo, I just did :blush:

Good Luck!

5

@nik202 Thank you so much! I was just finding something like this. Is there a way to add initPayload also with this frontend?

1 Like
6

@mangesh You mean, bot should start the conversation?

7

@nik202 yes

8

@mangesh Yes, you try a bit :slight_smile: else, I will share in the evening. :handshake:

9

@nik202 sure :raised_hands:

10

@nik202 I added below code in chat.js and it worked.

function setFirstResponse() {
showBotTyping();
const text = "Hey"
send(text);
  }
$("#profile_div").one("click", setFirstResponse());

Do you have some useful resources to share for customizing this fronted?

12

@mangesh This code will do what?

13

@nik202 Yes, whenever user clicks on the chatbot for first time to open it, a message on behalf of user will be sent to Rasa server (in my case “Hey”) so the bot will reply for “Hey” which I have set to be my bot’s welcome response.

14

@mangesh Ohh, that one sorry I forgot, you writing code for welcome message by bot? Right

15

@nik202 yes

16

@nik202 My bot-popup intro doesn’t show the text completely. The text gets hidden. I didn’t change anything in its code. are you familiar with this problem?

17

@mangesh In JS folder are you able to see script.js? see the changes and you will be able to see welcome message inside the chat widget.

// ========================== let the bot start the conversation ========================
function action_trigger() {

    // send an event to the bot, so that bot can start the conversation by greeting the user
    $.ajax({
        url: `http://localhost:5005/conversations/${user_id}/execute`,
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify({ "name": "utter_welcome", "policy": "MappingPolicy", "confidence": "0.98" }),
        
        success: function(botResponse, status) {
            console.log("Response from Rasa:", botResponse, "\nStatus: ", status);

            if (botResponse.hasOwnProperty("messages")) {
               
                setBotResponse(botResponse.messages);
                
            }
            $("#userInput").prop('disabled', false);
        },
        error: function(xhr, textStatus, errorThrown) {

            // if there is no response from rasa server
            setBotResponse("");
            console.log("Error from bot end: ", textStatus);
            $("#userInput").prop('disabled', false);
        }
    });
}

Note: The above code is related to GitHub - JiteshGaikwad/Chatbot-Widget not related to rasa webchat

I updated it 2 years back, so I’m not sure, how much rasa new version will adapt.

18

@nik202 Thanks! I’ll try this also and yes I’m quite comfortable with html, css and js/jquery. Can you please also check my bot pop up intro code. I can’t understand why the text is getting partially hidden.

      <div class="tap-target" data-target="profile_div">
    <div class="tap-target-content">
      <h5 class="white-text">Hey there 👋</h5>
      <p class="white-text">Ask me your questions</p>
    </div>
  </div>
</div>
19

@mangesh Please create the different thread for this as it not related to rasa Webchat, seeker will get confused. Thanks.