Rasa webchat widget shows up on local index.html but not shown on wordpress website

Rasa Open Source
1

Hi there, I am deploying a bot to website. The following code works well in a local index.html but not working on a wordpress website. The chat widget didn’t show up on the wordpress website.

In local index.html, it shows:

image
image444×517 34.3 KB 


The code I used:

<script>!(function () {
    let e = document.createElement("script"),
        t = document.head || document.getElementsByTagName("head")[0];
    (e.src =
        "https://cdn.jsdelivr.net/npm/rasa-webchat@1.0.1/lib/index.js"),
        // Replace 1.x.x with the version that you want
        (e.async = !0),
        (e.onload = () => {
        window.WebChat.default(
            {
            selector: "#webchat",
            initPayload: "/greet",
            customData: { language: "en" },
            socketUrl: "http://xx.xxx.xx.xx", // rasa x server url
            socketPath: "/socket.io/",
            title: "Chatbot",
            subtitle: "Help you here",
            params: {"storage": "session"}
            },
            null
        );
        }),
        t.insertBefore(e, t.firstChild);
    })();
</script>
2

@alinalizhang If you are using a rasa x server then you need an HTTPS and Domain Name Sever to mention in the socketUrL. If your website is hosted then try this pointer so that you get to know that your snippet code is working fine. The above snippet code will work fine with >= 2.x and 3.0 as you are using version 1.0.1.

  1. try to mention socketUrl: “http://localhost:80” and check it’s working on not, rasa x server should be running.
  2. You can use ngrok to try to expose port 80 using the command ./ngrok http 80 (Mac or Linux) or ngrok http 80 (window) paste the generated HTTPS code and paste it in socketUrl, rasa x server should be running and your WordPress site should be hosted.

Please share the rasa x version for the same or more details such as your website is hosted, do you have rasa x server Http secure, and do you have DNS for the same.

If you are using rasa open source then process 1 and 2 will be same. But, I suggestedd this solution based on.

I wish this will solve your issue. Good Luck!

3

Hi Nimit, thank you for your suggestions. The rasa x server is hosted on GCP. but it is http instead of https. The rasa x server is up and running. I can access the bot from, let’s say, http:12.345.67.89. Do you know why the widget only shows up in the local index.html?

Btw, the rasa x server requires username and password to login.

4

and Im using rasa/rasa-x:0.42.6 and rasa/rasa:2.8.11-full

5

@alinalizhang Well, I’m sure you are pasting the snippet code in insert header and footer plugin body section. Its the requirement of Rasa X, that we required HTTPs and DNS but if your server and website running on the same server then I guess you can mention.

Check this link for Websocket (socketUrl) : Your Own Website | Connecting to Messaging and Voice Channels

Do check this thread too: What is the best option to deploy rasa chatbot globally?

1 Like
6

The website is hosted on github.io, while the rasa x server is on GCP. They are different servers. In this case, the socket url need to use httpS?

7

@alinalizhang Well, personally I never hosted anything on Github.io, so I can not comment the same, as you stated you are using Wordpress site that’s why provide the detail suggestion and solution. May be in near future for sure :slight_smile: Its in my personal future project list.

Q: You want to deploy on Wordpress or Github ?

Q: Currently where you have pasted the snippet code of Rasa Webchat?

8

Yes, I have another website hosted on wordpress. both of them, wordpress and github.io didn’t show the rasa widget. the widget only pop up in the local index.html.

The files you suggested, because I have deployed with docker compose already. not sure wanna switch to helm. wondering is the issue caused by using http instead of https?

9

the snippet code: insert header and footer plugin body section image

10

@alinalizhang It’s ok, if you are using docker-compose it should work fine, as my bot is also running on the WordPress site.

Right! Take a checklist:

:point_right: did you update the credentials.yml on server whilst mentioning this /etc/rasa or you own directory ?

socketio:
  user_message_evt: user_uttered
  bot_message_evt: bot_uttered
  session_persistence: true

Check with nano credentials.yml and copy and paste the above code and spin the docker containers sudo docker-compose down && docker-compose up -d

11

@alinalizhang Perfect :white_check_mark:

@alinalizhang do update me tomorrow for the same and I’d recommend please see the rasa documentation in detail regarding deployment on your bot on your own website. Ref: Your Own Website

12

It was added yesterday. image

13

@alinalizhang perfect :white_check_mark:

Quite strange, its should work then.

14

Lol. but it still doesn’t work on the wordpress website.

15

fyi, the rasa x server is using http instead of https

16

Yes, I am aware of this fact.

@alinalizhang try second method using ngrok?

Q: Your rasa x running on which port?

17 
  app:
    # replace the image with the one you build 
    # to install dependencies for custom actions
    image: library/XXXXX
    volumes:
      - ./actions:/app/actions
    ports: 
      - 5055:5055
19

@alinalizhang docker-compose.override.yml is not the issue, as it’s used for action_server, but the issue is you can not see the bot widget on the website.

Step-1: Update the credentials with socketIO.

Step-2: Spin the docker container on server, default port is 80

suppose: http://1.2.3.4:80

Step-3: Paste the snippet code inside header and footer on Wordpress.

Step-4: Run the ngrok on server itself in new terminal ngrok http 80 and paste the generated https link inside socketUrl

It should work.

@alinalizhang I confirm that Rasa Webchat is working on Wordpress site for my use case and project.

2 Likes
20

no, it didn’t show up on wordpress. the widget only pops up in the local index.html.

21

trying the step 4. my server is on gcp.