# Ngrok doesn't show webchat

**URL:** <https://forum.rasa.com/t/ngrok-doesnt-show-webchat/52126>\
**Category:** Rasa Open Source\
**Created:** [March 22, 2022, 5:39pm UTC](https://forum.rasa.com/t/ngrok-doesnt-show-webchat/52126 "2022-03-22T17:39:50Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![webdev-rohit](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/webdev-rohit/32/18943_2.png) [@webdev-rohit](https://forum.rasa.com/u/webdev-rohit)\
**Post date:** [March 22, 2022, 5:39pm UTC](https://forum.rasa.com/t/ngrok-doesnt-show-webchat/52126/1 "2022-03-22T17:39:50Z")

</div>

Hi @nik202 , I’ve been using Rasa webchat using a custom connector on localhost. Rasa server runs on localhost:5005 and I’m also able to see it properly when I define localhost:5005 as the socketUrl in my frontend. Now, I want to use ngrok and so I copied the ngrok https Url and pasted it as the value for socketUrl properly in my frontend. However, the webchat widget doesn’t show up with ngrok while it was working perfectly fine with localhost. Please help

---

<div class="post-metadata">

**Author:** ![nik202](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/nik202/32/16098_2.png) [@nik202](https://forum.rasa.com/u/nik202)\
**Post date:** [March 22, 2022, 7:16pm UTC](https://forum.rasa.com/t/ngrok-doesnt-show-webchat/52126/2 "2022-03-22T19:16:51Z")

</div>

@webdev-rohit can you share some steps with screenshot and what you are currently doing in steps?

---

<div class="post-metadata">

**Author:** ![webdev-rohit](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/webdev-rohit/32/18943_2.png) [@webdev-rohit](https://forum.rasa.com/u/webdev-rohit)\
**Post date:** [March 23, 2022, 5:26am UTC](https://forum.rasa.com/t/ngrok-doesnt-show-webchat/52126/3 "2022-03-23T05:26:46Z")

</div>

Steps 1: Created a custom channel file for socketio connection and named it in the format - filename.Inputclassname in credentials.yml: ![image](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/3X/b/a/babf894a6631d1dbebd2cecdfa88f74d830598f5.png)

1. Ran rasa server locally i.e. localhost:5005 and in my frontend gave the socketUrl as: ![image](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/3X/2/b/2b4a3d6a9ef07f4447c092efba11f167a5b7b94b.png)

This gives proper output i.e. I’m able to see my webchat widget in browser and also communicate with it.

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/rasa/original/3X/b/4/b451c75839cd5a27f1f29d93123de7145b624399.jpeg)

1. Then, I forwarded port 5005 to ngrok using - ngrok http 5005 command. And changed the socketUrl as show in one of the above screenshots to the newly provided ngrok https Url. The widget doesn’t show up in the browser. This is my issue @nik202

---

<div class="post-metadata">

**Author:** ![nik202](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/nik202/32/16098_2.png) [@nik202](https://forum.rasa.com/u/nik202)\
**Post date:** [March 23, 2022, 12:28pm UTC](https://forum.rasa.com/t/ngrok-doesnt-show-webchat/52126/4 "2022-03-23T12:28:13Z")

</div>

@webdev-rohit Ok means whilst using ngrok and copying the ngrok https inside socketUrl you are not able to run the widget. If yes follow these steps:

1. Create the ngrok account
2. Download the ngrok for your machine
3. Connect and authenticate the tokens
4. Run the ngrok using command: ngrok http 5005
5. paste the https generated link inside socketUrl
6. Done

Ref: [ngrok - secure introspectable tunnels to localhost](https://dashboard.ngrok.com/get-started/setup)

I hope this will help you.

---

<div class="post-metadata">

**Author:** ![webdev-rohit](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/webdev-rohit/32/18943_2.png) [@webdev-rohit](https://forum.rasa.com/u/webdev-rohit)\
**Post date:** [March 23, 2022, 1:14pm UTC](https://forum.rasa.com/t/ngrok-doesnt-show-webchat/52126/5 "2022-03-23T13:14:34Z")

</div>

Okay, thanks @nik202 , will try this and see if it works out or not

---

<div class="post-metadata">

**Author:** ![nik202](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/nik202/32/16098_2.png) [@nik202](https://forum.rasa.com/u/nik202)\
**Post date:** [March 23, 2022, 4:49pm UTC](https://forum.rasa.com/t/ngrok-doesnt-show-webchat/52126/6 "2022-03-23T16:49:28Z")

</div>

@webdev-rohit it should work, you doubt? do share the ngrok console output ok?

---

<div class="post-metadata">

**Author:** ![nik202](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/nik202/32/16098_2.png) [@nik202](https://forum.rasa.com/u/nik202)\
**Post date:** [March 28, 2022, 12:20pm UTC](https://forum.rasa.com/t/ngrok-doesnt-show-webchat/52126/7 "2022-03-28T12:20:23Z")

</div>

@webdev-rohit is this issue solved? if yes please close this thread as solution.

---

<div class="post-metadata">

**Author:** ![webdev-rohit](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/webdev-rohit/32/18943_2.png) [@webdev-rohit](https://forum.rasa.com/u/webdev-rohit)\
**Post date:** [March 29, 2022, 3:57pm UTC](https://forum.rasa.com/t/ngrok-doesnt-show-webchat/52126/8 "2022-03-29T15:57:43Z")

</div>

No, it is not. But, I’m not actually researching more about it now. I’ve switched anyway to deploying rasa x in kubernetes.

---

<div class="post-metadata">

**Author:** ![vio\_lovis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/vio_lovis/32/17910_2.png) [@vio\_lovis](https://forum.rasa.com/u/vio_lovis)\
**Post date:** [March 31, 2022, 7:00am UTC](https://forum.rasa.com/t/ngrok-doesnt-show-webchat/52126/10 "2022-03-31T07:00:34Z")

</div>

Hi @webdev-rohit,   
when running rasa locally and forwarding with ngrok I had the same issue. By inspecting the page I found out, that it was an CORS error - did you check that?

```auto
Access to XMLHttpRequest at 'https://xxxx-xxx-xxx-xx.ngrok.io/socket.io/?EIO=4&transport=polling&t=N-85pBG' from origin 'https://xxx.de' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

```

and:

```auto
 GET https://xxxx-xxx-xxx-xx.ngrok.io/socket.io/?EIO=4&transport=polling&t=N-85pBG net::ERR_FAILED 404

```

I my case (hosting the website on Siteground) the solution was -as explained [here](https://www.siteground.com/kb/cross-origin-resource-sharing-cors/):

In cases where cross-domain scripting is needed, add the following rule in your website’s .htaccess file:

```auto
<ifModule mod_headers.c>
Header set Access-Control-Allow-Origin: *
</ifModule>

```

This header will instruct web browsers on how to use and manage the cross-domain content. The browser then allows access to the content based on its security configuration.

N.B. The above rules will only work if **NGINX Direct Delivery** is disabled. You can deactivate the service from Site Tools → Speed → Caching.

I also needed to clean the cache for the website and I need to redo it everytime I restart ngrok/rasa.

Maybe that helps you?

---

<div class="post-metadata">

**Author:** ![webdev-rohit](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/webdev-rohit/32/18943_2.png) [@webdev-rohit](https://forum.rasa.com/u/webdev-rohit)\
**Post date:** [March 31, 2022, 1:14pm UTC](https://forum.rasa.com/t/ngrok-doesnt-show-webchat/52126/11 "2022-03-31T13:14:16Z")

</div>

Okay, @vio_lovis will surely try doing this sometime and inform here if it works
