'Send' key not working when connecting to chatbot widget index.html

[meg (Jialii)]

Hi, I used the command ‘rasa run -m models --enable-api --cors “*” --debug’ and opened index.html in a browser, but I was not able to send messages when the server is up. It worked for a while until I ran ./ngrok http 5005. I was able to see the chat widget but not exchanging messages.

Here is my index.html

    <script>!(function () {
        let e = document.createElement("script"),
          t = document.head || document.getElementsByTagName("head")[0];
        (e.src =
          "https://cdn.jsdelivr.net/npm/rasa-webchat@1.x.x/lib/index.js"),
          // Replace 1.x.x with the version that you want
          (e.async = !0),
          (e.onload = () => {
            window.WebChat.default(
              {
                initPayload:'/greet',
                customData: { language: "en" },
                socketUrl: "https://localhost:5005",
                // add other props here
              },
              null
            );
          }),
          t.insertBefore(e, t.firstChild);
      })();
      </script>```

Here is my credentials.yml

socketio:
  user_message_evt: user_uttered
  bot_message_evt: bot_uttered
  session_persistence: true

I have uncommented these 2 lines in endpoints.yml

action_endpoint:
 url: "http://localhost:5055/webhook"

Here are some related package versions: Rasa Version : 3.6.2

Minimum Compatible Version: 3.5.0

Rasa SDK Version : 3.6.0

Python 3.10.10

sanic version is 21.12.2

Sanic-Cors version is 2.0.1

sanic-routing version is 0.7.2

Does anyone know what problem this might be?

[rasa_learner (sathishlakshmanan)]

@meg

socketUrl: "https://localhost:5005",

Hi @meg, try with http - socketUrl: "http://localhost:5005"

[meg (Jialii)]

Thank you for helping! This solution does work, but now it shows 2 chatbot widgets, one is the old one with all the styles implemented but I still cannot click the send button, the other one is a new chat widget that appeared after changing my code.

The new widget does not restart after refreshing the page or restarting the program. It also doesn’t have the menu button on the top right corner. Do you know why this might be happening?