Fail to load webchat bot on webpage using ngrok

Hello there I hosted a HTML page on Google Sites to try run my chatbot. The HTML page used the code from this webchat code here . I just changed the localhost part with the ngrok url. My ngrok url forwarded http://localhost:5005.

If i opened the webpage on computer in the same network, the chatbot is loaded. (Notice the blue balloon there)

But when I open the webpage on another computer outside the network, the blue balloon chat is not there.

To what I understand, ngrok secure a tunnel to expose your localhost to the web but please correct me if I’m wrong. Below is the code that I use on my HTML file. Feel free to help!

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Test Lisa</title>
 
  <link rel="stylesheet" href="css/styles.css?v=1.0">

</head>
<body>
<div id="webchat"></div>
<script src="https://cdn.jsdelivr.net/npm/rasa-webchat/lib/index.min.js"></script>
<script>
  WebChat.default.init({
    selector: "#webchat",
    initPayload: "/greet",
    customData: {"language": "en"}, // arbitrary custom data. Stay minimal as this will be added to the socket
    socketUrl: "https://ngrokurl.ngrok.io",
    socketPath: "/socket.io/",
    title: "Lisa",
    subtitle: "Chat with the new Edaran Bot!",
    params: {"storage": "session"} // can be set to "local"  or "session". details in storage section.
  })
</script>
</body>
</html>