👋 Introducing the Rasa Playground

Integrating Chatbot-Widget to a Wordpress site?

post by sleekmike on Jun 23, 2021

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

• Rasa Chatbot-Widget with html tags

post by nik202 on Jun 23, 2021

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

post by sleekmike on Jun 23, 2021

@nik202 please can I communicate with you privately

post by nik202 on Jun 23, 2021

@sleekmike please check this for GUI customization

post by nik202 on Jun 23, 2021

<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"},
          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);
  })();

post by nik202 on Jun 23, 2021

@sleekmike Rasa Web chat customizing buttons,colors aligning etc

post by nik202 on Jun 23, 2021

1

post by nik202 on Jun 23, 2021

.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;
}

Good luck with the project!!

post by sleekmike on Jul 14, 2021

Hello @nik202, Please how do I format the response/replies of the bot if it's a very long text to newline? Thanks

post by nik202 on Jul 14, 2021

@sleekmike I will suggest, if you have longer text message, provide a link like

domain.yml under your response

Your text you want to show (not much as it will look odd in the small widget screen) read more…

Example from my other thread solution:

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

This will come line by line.

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

Good Luck! Got it?

post by sleekmike on Jul 14, 2021

Thanks a lot mate, will try it as you depicted!

post by nik202 on Jul 15, 2021

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

post by sleekmike on Jul 15, 2021

yes it worked like magic!

post by nik202 on Jul 15, 2021

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