How to remove the chat caption from the webchat of chat bot

Question

I have created a chatbot using MS Bot Framework and bot application, in C#. I added the Web chat to my html website through iframe got from bot framework.

Now I want to delete the chat caption which is embedded with the Web chat. Instead of that I want to add my Chat bot's name. So how can i edit my html code to remove the Chat caption..

Answer 1

As you are aware, when you use webchat, an iframe is loaded in your webpage which renders your bot. So you can't really change anything inside the iframe via JavaScript unless its exposed. Hence you can't change the 'Chat' caption as it is.

But what you can do, is to render your own webchat using directline as mentioned in How to add Web Chat to your website . Here you have full control over what is rendered and how its rendered.

Once you have setup the chat using the above mentioned link, you can find and modify the following code block in Chat.tsx file.

<div className="wc-header">
    <span>{ typeof state.format.chatTitle === 'string' ? state.format.chatTitle : state.format.strings.title }</span>
</div>

Modify it to below code and compile it:

<span>{ typeof state.format.chatTitle === 'string' ? "Chat bot's name" : "Chat bot's name" }</span>

Or another simpler approach would be to reference the files in CDN and then use JavaScript to change it. Sample code snippet :

document.getElementsByClassName("wc-header")[0].innerHTML = "<span>Chat bot's name</span>"

Answer 2

With this change to botconnector-webchat, you can use top level botchat settings to enable/disable/change the title:

BotChat.App({
  directLine: ...,
  user: ...,
  bot: ...,
  resize: "detect",
  speechOptions: ...,
  chatTitle: false // use this
}, document.getElementById("bot"));