After upgrading the webchat from 0.6.0 to 1.0.0 toggling the Chat with WebChat.toggle(); stopped working and the browser tells me Uncaught TypeError: WebChat.toggle is not a function.
Did they remove the functionality? Is there something similar now to toggle the webchat? Can someone provide some help?
Some (maybe useful) additional information:
@linhe Are you using Botfront/Rasa-webchat? If yes, can you share the snippet code which you had used for rendering and also please share the rasa version.
@nik202 Thanks for your answer!
Yes, I’m using botfront/rasa-webchat and currently rasa version 1.10.
I’ve got a button where the bot should be toggled on click (worked until the upgrade):
<button onclick="WebChat.toggle();">toggle WebChat</button>
This is the snippet for the bot:
WebChat.default({
selector: "#webchat",
initPayload: '/get_started{"source":"placeholder"}', //change for another source
interval: 1000, // 1000 ms between each message
socketUrl: "http://localhost:5002", // use for local test
socketPath: "/socket.io/", // use for local test
title: "NAME",
inputTextFieldHint: "Tippe hier deine Nachricht",
connectingText: "Waiting for server...",
hideWhenNotConnected: true,
fullScreenMode: false,
profileAvatar: "avatar_icon.png",
openLauncherImage: 'avatar_icon.png',
closeImage: 'myCustomCloseImage_icon_white.png',
params: {
images: {
dims: {
width: 300,
height: 200,
}
},
storage: "session"
}
},
null
);
(The selector also doesn’t seem to work anymore, but that’s ok. I’ll just remove it.)
@linhe Please update the full snippet code which you had copied from the GitHub - botfront/rasa-webchat: A feature-rich chat widget for Rasa and Botfront or which you mentioned in the HTML file.
I’m using this Version of rasa webchat: https://cdn.jsdelivr.net/npm/rasa-webchat@1.0.0/lib/index.js
fullScreenMode is not what I’m looking for.
The chatbot was and is working as designated. Everything is fine and as it should be.
Only the extra button with which the chatbot should be toggable (additionaly to the chatbot icon) is not working anymore because of the WebChat.toggle(); function which seems to not be available anymore. But it worked fine until the webchat upgrade.
I’d just like to know what gets done/called, when the chatbot icon gets clicked. I think before it was the toggle function of the webchat.
The upgrade to the latest versions of everything would be great but is no option at the moment.
@linhe I can rest assure you that I dry run the code to integrate and investigate the issue you stated.Please see the output screens.
Before Toggle:
After:
I can easily able to click on the widget and chat widget is performing well.
What do you mean by this “extra button with which the chatbot should be toggable”, I am curious what you are looking at and want to help you as much to solve your issue.
Can I asked one thing from the above thread why 5002 ?
socketUrl: "http://localhost:5002"
I guess it should be 5005 for localhost?
Another issue: Its should be
window.WebChat.default(
rather this
WebChat.default(
You can use only: params: {"storage": "session"},
Are you saying now you directly seen the chatbot widget screen, without first showing the button as shown in first image i.e before toggle?
Change this and you will first see the button and after click you will see the widget screen.
params: {"storage": "session"},
Thanks and do mention me whilst using @ .
@nik202 thanks for trying to help me!
No, everything on the chatbot itself is fine and working as it should.
My problem is that I have an extra HTML button in my code which should toggle the chatbot the same way as a click on the widget does.
So when the conversation screen is closed it should open and when it is open it should close.
Before there was the toggle function from the Webchat which was doing this and my button was working as intended.
After the upgrade this function seems to be missing so my extra button doesn’t work anymore. So I’m rather just looking for the function which gets called on the click on the chatbot widget so I can call this one also directly on my extra button.
I hope my problem is now clearer.
(All the other things you mentioned are working fine. The 5002 is for developing purposes and is changed for actual usage. The WebChat.default needs to be and is working without the window because I need to check other things before loading the bot. And I have params: {"storage": "session"} there are just additional keys in the params dictionary.)
@linhe Right, Do you have any screenshot or what code have you used, so that I can do at my end. I got it you have extra button hmmm.
@nik202 simply put it somewhere in the html page.
The structure of my index.html looks like this: (Removed not relevant lines of code)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Some HTML page with local chatbot test</title>
<script src="./webchat-1.0.0.js"></script>
<link type="text/css" rel="stylesheet" href="./gui.css" />
</head>
<body>
<!-- some other page content here -->
<button onclick="WebChat.toggle();">toggle WebChat</button>
<!-- more page content -->
<!-- this two div seem like they are also not needed anymore but for the moment i just leave them there -->
<div id="webchat"></div>
<div id="widget-overlay" class="hidden"></div>
<script language="JavaScript">
// some other functions here
document.addEventListener("DOMContentLoaded", function () {
var isIE = /MSIE|Trident/.test(window.navigator.userAgent);
if (!isIE) {
WebChat.default({
selector: "#webchat",
initPayload: '/get_started{"source":"placeholder"}', //change for another source
interval: 1000, // 1000 ms between each message
socketUrl: "http://localhost:5002", // use for local test
socketPath: "/socket.io/", // use for local test
title: "NAME",
inputTextFieldHint: "Tippe hier deine Nachricht",
connectingText: "Waiting for server...",
hideWhenNotConnected: true,
fullScreenMode: false,
profileAvatar: "avatar_icon.png",
openLauncherImage: 'avatar_icon.png',
closeImage: 'myCustomCloseImage_icon_white.png',
params: {
images: {
dims: {
width: 300,
height: 200,
}
},
storage: "session"
}
},
null
);
} /* END - if (!isIE) */
});
</script>
<a class="chatbot_wrapper">
<div class="active_dot"></div>
<div class="chatbot_content toggle_chat"></div>
</a>
</body>
</html>@linhe , Did you get this to work? I need to accomplish the same thing - After 10 seconds I want to toggle.
I ended up using it like this:
onclick=“document.querySelector(’.rw-launcher’).click();return false;”
Let me know if there is a more elegant way
@medicareamaze The solution was to Fork the GitHub Repo and modify it so the WebChat.toggle(); function is available to the outside again. Not nice and was some work but works now 
Your solution looks way simpler than that
hi i want to get different tooltip msg and different payload msg what should i do