# Customising rasa webchat

**URL:** <https://forum.rasa.com/t/customising-rasa-webchat/46525>\
**Category:** Rasa Open Source\
**Created:** [August 4, 2021, 12:11pm UTC](https://forum.rasa.com/t/customising-rasa-webchat/46525 "2021-08-04T12:11:13Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![mangesh](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mangesh](https://forum.rasa.com/u/mangesh)\
**Post date:** [August 4, 2021, 12:11pm UTC](https://forum.rasa.com/t/customising-rasa-webchat/46525/1 "2021-08-04T12:11:13Z")

</div>

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](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/3X/4/8/48f5f4de5976df9bc8b3c745aa91c8fd0cb16237.png)

---

<div class="post-metadata">

**Author:** ![nik202](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/nik202/32/16098_2.png) [@nik202](https://forum.rasa.com/u/nik202)\
**Post date:** [August 4, 2021, 12:13pm UTC](https://forum.rasa.com/t/customising-rasa-webchat/46525/2 "2021-08-04T12:13:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mangesh](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mangesh](https://forum.rasa.com/u/mangesh)\
**Post date:** [August 4, 2021, 12:18pm UTC](https://forum.rasa.com/t/customising-rasa-webchat/46525/3 "2021-08-04T12:18:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nik202](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/nik202/32/16098_2.png) [@nik202](https://forum.rasa.com/u/nik202)\
**Post date:** [August 4, 2021, 12:22pm UTC](https://forum.rasa.com/t/customising-rasa-webchat/46525/4 "2021-08-04T12:22:12Z")

</div>

@mangesh Sure, You can try this repo [GitHub - JiteshGaikwad/Chatbot-Widget](https://github.com/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](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/3X/8/4/84966c2691dff76858cf9fb7f0b10b9ab53cb852.png)

Adjust setting of logo, I just did 😊

Good Luck!

---

<div class="post-metadata">

**Author:** ![mangesh](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mangesh](https://forum.rasa.com/u/mangesh)\
**Post date:** [August 4, 2021, 12:37pm UTC](https://forum.rasa.com/t/customising-rasa-webchat/46525/5 "2021-08-04T12:37:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nik202](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/nik202/32/16098_2.png) [@nik202](https://forum.rasa.com/u/nik202)\
**Post date:** [August 4, 2021, 12:52pm UTC](https://forum.rasa.com/t/customising-rasa-webchat/46525/6 "2021-08-04T12:52:25Z")

</div>

@mangesh You mean, bot should start the conversation?

---

<div class="post-metadata">

**Author:** ![mangesh](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mangesh](https://forum.rasa.com/u/mangesh)\
**Post date:** [August 4, 2021, 12:53pm UTC](https://forum.rasa.com/t/customising-rasa-webchat/46525/7 "2021-08-04T12:53:15Z")

</div>

@nik202 yes

---

<div class="post-metadata">

**Author:** ![nik202](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/nik202/32/16098_2.png) [@nik202](https://forum.rasa.com/u/nik202)\
**Post date:** [August 4, 2021, 12:54pm UTC](https://forum.rasa.com/t/customising-rasa-webchat/46525/8 "2021-08-04T12:54:30Z")

</div>

@mangesh Yes, you try a bit 🙂 else, I will share in the evening. 🤝

---

<div class="post-metadata">

**Author:** ![mangesh](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mangesh](https://forum.rasa.com/u/mangesh)\
**Post date:** [August 4, 2021, 12:56pm UTC](https://forum.rasa.com/t/customising-rasa-webchat/46525/9 "2021-08-04T12:56:15Z")

</div>

@nik202 sure 🙌

---

<div class="post-metadata">

**Author:** ![mangesh](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mangesh](https://forum.rasa.com/u/mangesh)\
**Post date:** [August 4, 2021, 5:48pm UTC](https://forum.rasa.com/t/customising-rasa-webchat/46525/10 "2021-08-04T17:48:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nik202](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/nik202/32/16098_2.png) [@nik202](https://forum.rasa.com/u/nik202)\
**Post date:** [August 4, 2021, 5:49pm UTC](https://forum.rasa.com/t/customising-rasa-webchat/46525/12 "2021-08-04T17:49:28Z")

</div>

@mangesh This code will do what?

---

<div class="post-metadata">

**Author:** ![mangesh](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mangesh](https://forum.rasa.com/u/mangesh)\
**Post date:** [August 4, 2021, 5:51pm UTC](https://forum.rasa.com/t/customising-rasa-webchat/46525/13 "2021-08-04T17:51:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nik202](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/nik202/32/16098_2.png) [@nik202](https://forum.rasa.com/u/nik202)\
**Post date:** [August 4, 2021, 5:52pm UTC](https://forum.rasa.com/t/customising-rasa-webchat/46525/14 "2021-08-04T17:52:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mangesh](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mangesh](https://forum.rasa.com/u/mangesh)\
**Post date:** [August 4, 2021, 5:53pm UTC](https://forum.rasa.com/t/customising-rasa-webchat/46525/15 "2021-08-04T17:53:26Z")

</div>

@nik202 yes

---

<div class="post-metadata">

**Author:** ![mangesh](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mangesh](https://forum.rasa.com/u/mangesh)\
**Post date:** [August 4, 2021, 5:55pm UTC](https://forum.rasa.com/t/customising-rasa-webchat/46525/16 "2021-08-04T17:55:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nik202](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/nik202/32/16098_2.png) [@nik202](https://forum.rasa.com/u/nik202)\
**Post date:** [August 4, 2021, 5:58pm UTC](https://forum.rasa.com/t/customising-rasa-webchat/46525/17 "2021-08-04T17:58:43Z")

</div>

@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](https://github.com/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.

---

<div class="post-metadata">

**Author:** ![mangesh](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@mangesh](https://forum.rasa.com/u/mangesh)\
**Post date:** [August 4, 2021, 6:08pm UTC](https://forum.rasa.com/t/customising-rasa-webchat/46525/18 "2021-08-04T18:08:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nik202](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/nik202/32/16098_2.png) [@nik202](https://forum.rasa.com/u/nik202)\
**Post date:** [August 4, 2021, 6:13pm UTC](https://forum.rasa.com/t/customising-rasa-webchat/46525/19 "2021-08-04T18:13:39Z")

</div>

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