Integrating Chatbot-Widget ((https://github.com/JiteshGaikwad/Chatbot-Widget) ) to a Wordpress site?

Rasa Open Source
1

Please who has been able to successfully integrate the chatbot in this repo: GitHub - JiteshGaikwad/Chatbot-Widget to a Wordpress site?

2

@sleekmike What you trying to archive? You can integrate this Github Repo on Wordpress site but it will overlap with the Wordpress pages. Even the GUI will also changed.

3

@nik202 please can I communicate with you privately

6

@sleekmike please check this for GUI customization

7 
@sleekmike 
> <div id="webchat">
> </div>
> <script src="https://cdn.jsdelivr.net/npm/rasa-webchat/lib/index.min.js"></script>
> <link rel="stylesheet" type="text/css" href="https://">
> <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"),
>     (e.async = !0),
>     (e.onload = () => {
>       window.WebChat.default(
>         { 
>           selector: "#webchat",
>     initPayload: "/get_started",
>     customData: {"language": "en"}, // arbitrary custom data. Stay minimal as this will be added to the socket
>     socketUrl: "http://localhost:5005",
>     customMessageDelay: (message) => {
>     let delay = message.length * 30;
>     if (delay > 3 * 200) delay = 3 * 200;
>     if (delay < 100) delay = 100;
>     return delay;
>   },
>     
>     socketPath: "/socket.io/",
>     title: "Street Bot",
>     tooltipPayload: "/get_started",
>     tooltip: true,    
>     tooltipDelay: 500,
>     subtitle: "Powered by XYZ",
>     connectingText: "Waiting for server...",
>     profileAvatar: "https://",
>     openLauncherImage: "https://",
> 
>     params: {"storage": "session"}, 
>     
>     mainColor: "#ffd600",
>     userBackgroundColor: "#ffd600",
>     userTextColor: "#cde9ce",
>     showMessageDate: false,
>     inputTextFieldHint: "Hi.Type your message here...",
>     badge: " ",
>     displayUnreadCount: true,
>     isChatOpen: false,
>     embedded: false,
>     showCloseButton: true,
>     fullScreenMode: true,
>     showFullScreenButton: true,
>     docViewer: false,
>     
>    
>         },
>         null
>       );
>     }),
>     t.insertBefore(e, t.firstChild);
> })();
> 
> 
> 
> </script>
8

@sleekmike Rasa Web chat customizing buttons,colors alligning etc

9

@sleekmike for style.css

.rw-conversation-container
  |-- .rw-header
        |-- .rw-title
        |-- .rw-close-function
        |-- .rw-loading
  |-- .rw-messages-container
        |-- .rw-message
              |-- .rw-client
              |-- .rw-response
        |-- .rw-replies
              |-- .rw-reply
              |-- .rw-response
        |-- .rw-snippet
              |-- .rw-snippet-title
              |-- .rw-snippet-details
              |-- .rw-link
        |-- .rw-imageFrame
        |-- .rw-videoFrame
  |-- .rw-sender
        |-- .rw-new-message
        |-- .rw-send

For example: In style.css

> 
> .rw-conversation-container .rw-widget-container{
>     position: fixed;
>     bottom: 13%;
>     right: 42px;
>     height: 720px;
>     width: 420px;
>     background: #db5d28;
>     border-radius: 10px 10px 10px 10px;
>     box-shadow: 0 0px 1px 0 rgba(0, 0, 0, 0.16), 0 0px 10px 0 #00000096;
>     
> }

It is just a example, try see the main webchat GitHub and customised as per your need. Good luck with the project!!

10

@sleekmike https://drive.recmail.net/

11

@nik202 Thanks for your assistance in helping me resolve the issue that I was having, I have now integrated Rasa-webchat to my Wordpress site.

1 Like
12

@sleekmike Many congratulations :handshake:

1 Like
15

Hello @nik202, Please how to I format the response/replies of the bot if its a very long text to newline. Thanks

16

@sleekmike I will suggest, if you have longer text message, as I seen your mail. I will suggest provide the URL link like

domain.yml under your response

Your text you want to show( not much as it will looks odd in the small widget screen) [read more…] (https:rasa.com]

Example from my other thread solution:

utter_what:
 - text: | 
       - what
       - are
       - you
       - doing
       - today 
       - ?

This will come line by line, within a few sec.

Next, separate line in one output:

utter_what:
  - text : " what \n
             are\n
             you \n 
             doing\n
             today\n
             ?"

Do, share the text only few sentences, else customer or user will be bored. Try make a bullet points.

Good Luck! Got it?

1 Like
17

Thanks a lot mate, will try it like you just depicted :slight_smile:

18

@sleekmike Did you managed? I hope you did? Right

19

yes it worked like magic :slight_smile:

20

@sleekmike Next time please make new thread for your record. Thanks.

1 Like
21

hey @nik202 I have a question (I hope it’s not that stupid :sweat_smile:). So I open my index.php file from my WordPress site, but there is no body section. It has only main and div. where should I put this code? Is it ok to add inside the main tag?

22

@EvanMath You need to put the rasawebchat code in insert header and footer body section, that plugin should be there in setting, if not add new plugin please, do update the version to 1.0.1 if you are using rasa 2.3.X version below that 1.0.0.

1 Like