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

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

@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.

@nik202 please can I communicate with you privately

@sleekmike please check this for GUI customization

@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>

@sleekmike Rasa Web chat customizing buttons,colors alligning etc

@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!!

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

@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

@sleekmike Many congratulations :handshake:

1 Like

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

@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

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

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

yes it worked like magic :slight_smile:

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