Customising rasa webchat

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.

@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",

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

@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="">Rasa</a> <img src="static/img/logo.png" style="width:15px;height:15px; margin-bottom: -5px"/> 

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


Adjust setting of logo, I just did :blush:

Good Luck!

@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

@mangesh You mean, bot should start the conversation?

@nik202 yes

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

@nik202 sure :raised_hands:

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

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

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

@mangesh This code will do what?

@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.

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

@nik202 yes

@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?

@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
        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")) {
            $("#userInput").prop('disabled', false);
        error: function(xhr, textStatus, errorThrown) {

            // if there is no response from rasa server
            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.

@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>

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