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

**URL:** <https://forum.rasa.com/t/integrating-chatbot-widget-https-github-com-jiteshgaikwad-chatbot-widget-to-a-wordpress-site/44965>\
**Category:** Rasa Open Source\
**Created:** [June 23, 2021, 1:31pm UTC](https://forum.rasa.com/t/integrating-chatbot-widget-https-github-com-jiteshgaikwad-chatbot-widget-to-a-wordpress-site/44965 "2021-06-23T13:31:47Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![sleekmike](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/sleekmike/32/15263_2.png) [@sleekmike](https://forum.rasa.com/u/sleekmike)\
**Post date:** [June 23, 2021, 1:31pm UTC](https://forum.rasa.com/t/integrating-chatbot-widget-https-github-com-jiteshgaikwad-chatbot-widget-to-a-wordpress-site/44965/1 "2021-06-23T13:31:47Z")

</div>

Please who has been able to successfully integrate the chatbot in this repo: [GitHub - JiteshGaikwad/Chatbot-Widget](https://github.com/JiteshGaikwad/Chatbot-Widget) to a Wordpress site?

---

<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:** [June 23, 2021, 1:33pm UTC](https://forum.rasa.com/t/integrating-chatbot-widget-https-github-com-jiteshgaikwad-chatbot-widget-to-a-wordpress-site/44965/2 "2021-06-23T13:33:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sleekmike](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/sleekmike/32/15263_2.png) [@sleekmike](https://forum.rasa.com/u/sleekmike)\
**Post date:** [June 23, 2021, 1:35pm UTC](https://forum.rasa.com/t/integrating-chatbot-widget-https-github-com-jiteshgaikwad-chatbot-widget-to-a-wordpress-site/44965/3 "2021-06-23T13:35:04Z")

</div>

@nik202 please can I communicate with you privately

---

<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:** [June 23, 2021, 3:45pm UTC](https://forum.rasa.com/t/integrating-chatbot-widget-https-github-com-jiteshgaikwad-chatbot-widget-to-a-wordpress-site/44965/6 "2021-06-23T15:45:22Z")

</div>

@sleekmike please check this for GUI customization

> [@Rasa Webchat Integration](http://forum.rasa.com/t/rasa-webchat-integration/19930):
>
> Hi all, I had created a video tutorial in which I have shown how you can connect Rasa bot with the Webchat: [[Rasa Webchat Integration robot] ](https://www.youtube.com/watch?v=J1n3Y8SVxVM)

---

<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:** [June 23, 2021, 4:03pm UTC](https://forum.rasa.com/t/integrating-chatbot-widget-https-github-com-jiteshgaikwad-chatbot-widget-to-a-wordpress-site/44965/7 "2021-06-23T16:03:00Z")

</div>

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

---

<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:** [June 23, 2021, 4:12pm UTC](https://forum.rasa.com/t/integrating-chatbot-widget-https-github-com-jiteshgaikwad-chatbot-widget-to-a-wordpress-site/44965/8 "2021-06-23T16:12:39Z")

</div>

@sleekmike [Rasa Web chat customizing buttons,colors alligning etc](http://forum.rasa.com/t/rasa-web-chat-customizing-buttons-colors-alligning-etc/24716)

---

<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:** [June 23, 2021, 4:21pm UTC](https://forum.rasa.com/t/integrating-chatbot-widget-https-github-com-jiteshgaikwad-chatbot-widget-to-a-wordpress-site/44965/9 "2021-06-23T16:21:34Z")

</div>

@sleekmike for style.css

```auto
.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!!

---

<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:** [June 23, 2021, 4:41pm UTC](https://forum.rasa.com/t/integrating-chatbot-widget-https-github-com-jiteshgaikwad-chatbot-widget-to-a-wordpress-site/44965/10 "2021-06-23T16:41:55Z")

</div>

@sleekmike [https://drive.recmail.net/](https://drive.recmail.net/)

---

<div class="post-metadata">

**Author:** ![sleekmike](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/sleekmike/32/15263_2.png) [@sleekmike](https://forum.rasa.com/u/sleekmike)\
**Post date:** [June 24, 2021, 12:14pm UTC](https://forum.rasa.com/t/integrating-chatbot-widget-https-github-com-jiteshgaikwad-chatbot-widget-to-a-wordpress-site/44965/11 "2021-06-24T12:14:09Z")

</div>

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

---

<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:** [June 24, 2021, 12:19pm UTC](https://forum.rasa.com/t/integrating-chatbot-widget-https-github-com-jiteshgaikwad-chatbot-widget-to-a-wordpress-site/44965/12 "2021-06-24T12:19:13Z")

</div>

@sleekmike Many congratulations 🤝

---

<div class="post-metadata">

**Author:** ![sleekmike](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/sleekmike/32/15263_2.png) [@sleekmike](https://forum.rasa.com/u/sleekmike)\
**Post date:** [July 14, 2021, 10:16pm UTC](https://forum.rasa.com/t/integrating-chatbot-widget-https-github-com-jiteshgaikwad-chatbot-widget-to-a-wordpress-site/44965/15 "2021-07-14T22:16:01Z")

</div>

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

---

<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:** [July 14, 2021, 10:18pm UTC](https://forum.rasa.com/t/integrating-chatbot-widget-https-github-com-jiteshgaikwad-chatbot-widget-to-a-wordpress-site/44965/16 "2021-07-14T22:18:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sleekmike](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/sleekmike/32/15263_2.png) [@sleekmike](https://forum.rasa.com/u/sleekmike)\
**Post date:** [July 14, 2021, 10:34pm UTC](https://forum.rasa.com/t/integrating-chatbot-widget-https-github-com-jiteshgaikwad-chatbot-widget-to-a-wordpress-site/44965/17 "2021-07-14T22:34:21Z")

</div>

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

---

<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:** [July 15, 2021, 3:21pm UTC](https://forum.rasa.com/t/integrating-chatbot-widget-https-github-com-jiteshgaikwad-chatbot-widget-to-a-wordpress-site/44965/18 "2021-07-15T15:21:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sleekmike](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/sleekmike/32/15263_2.png) [@sleekmike](https://forum.rasa.com/u/sleekmike)\
**Post date:** [July 15, 2021, 4:36pm UTC](https://forum.rasa.com/t/integrating-chatbot-widget-https-github-com-jiteshgaikwad-chatbot-widget-to-a-wordpress-site/44965/19 "2021-07-15T16:36:20Z")

</div>

yes it worked like magic 🙂

---

<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:** [July 15, 2021, 4:51pm UTC](https://forum.rasa.com/t/integrating-chatbot-widget-https-github-com-jiteshgaikwad-chatbot-widget-to-a-wordpress-site/44965/20 "2021-07-15T16:51:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![EvanMath](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.rasa.com/evanmath/32/20580_2.png) [@EvanMath](https://forum.rasa.com/u/EvanMath)\
**Post date:** [September 23, 2021, 3:54pm UTC](https://forum.rasa.com/t/integrating-chatbot-widget-https-github-com-jiteshgaikwad-chatbot-widget-to-a-wordpress-site/44965/21 "2021-09-23T15:54:20Z")

</div>

hey @nik202 I have a question (I hope it’s not that stupid 😅). 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?

---

<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:** [September 23, 2021, 5:34pm UTC](https://forum.rasa.com/t/integrating-chatbot-widget-https-github-com-jiteshgaikwad-chatbot-widget-to-a-wordpress-site/44965/22 "2021-09-23T17:34:13Z")

</div>

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