Rasa Webchat + docker showing blank

I have setup rasa using docker, but I am not able to open webchat. It seems to connect but the page remains blank.

Following are the steps to replicate;

#create the directory
mkdir rasatest && cd  rasatest

#Init the project
sudo docker run -it --rm --user 1000 -v $(pwd)/app:/app rasa/rasa:latest-full init --no-prompt

#Change right for docker to work properly
cd .. && chmod -R  777 rasatest  && cd  rasatest

#Change credentials as follows
nano app/credentials.yml

      user_message_evt: user_uttered
      bot_message_evt: bot_uttered
      session_persistence: true

docker run --name=rasatest --user 1000 -v $(pwd)/app/app:/app -p "5005:5005" rasa/rasa:latest-full run -m models --enable-api --cors "*" --debug

Rasa webchat is as follows;



    <div id="webchat"></div>
    <script src="https://cdn.jsdelivr.net/npm/rasa-webchat"></script>

        document.addEventListener("DOMContentLoaded", () => {

            !(function () {
                let e = document.createElement("script"),
                    t = document.head || document.getElementsByTagName("head")[0];
                (e.src =
                    (e.async = !0),
                    (e.onload = () => {
                                customData: { language: "en" },
                                socketUrl: "http://localhost:5005",
                                // add other props here
                    t.insertBefore(e, t.firstChild);




The generated page is totally blank and on inspecting the following is the html output.

<div id="rasaWebchatPro">
      <div class="" style="display: none;"></div>

If I change the chat page to following chatting interfaces it is working.

What could be the issue rasa-webchat?

Is there a way to change rasa-webchat from socket to webhook?

Facing the same issue.