Hii @nik202 hope you are doing well.I have now my website on Wordpress as you asked me about this .Now I want to integrate it with that website.I looked for many post but didn’t find so I am posting this may be you can help.Thanks in advance
You may enjoy this Youtube tutorial on the topic. It’s about adding Rasa to static HTML sites but it may serve as an inspiration for how to do it with Wordpress.
Hi @Rishabhh17 yes I am fine thanks for asking, I wish the same for you. Can you please share the steps till now what you had done? and what is the frontend you want to integrate with rasa?
Hii @nik202 I have created the rasa project deployed the rasa on my Azure instance using Docker-compose. In the Project directory there are theses files.
1.actions
2.data
3.models
4.tests
5.bot.svg
6.config.yml
7.credentials.yml
8.docker-compose.yml
9.Dockerfile
10.domain.yml
11.endpoints.yml
12.index.html
13.out.log
14.robo.svg
Now I have added my index.html file script in my wordpress website.So its showing the bot but not the (bot icon and bot avatar). Is this the right way or something different ?
@Rishabhh17 what you means by this So its showing the bot but not the (bot icon and bot avatar) ? can you explain.
@nik202 See in the above files there is are three files.
- Index.html(When click on this file it opens up the file on local) 2.bot.svg(Bot avatar to be used for my chatbot) 3.robo.svg(Bot icon to be used )
What i want is when I open my website then it will show me the bot as it opens up on my local.
@Rishabhh17 can you share me the snippet code which you are using for Wordpress ?
@nik202 This I am pasting in my wordpress website’s (script)
<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(
{
initPayload: '/greet',
customData: { language: "en"},
socketUrl: "https://bc53-52-178-39-237.ngrok.io",
socketpath: null,
title: 'Smart-HR',
subtitle:'Powered by BASF GD Team',
profileAvatar:"./robo.svg",
openLauncherImage:"./bot.svg",
showMessageDate: true,
params: {
images: {
dims:{
width: 300,
height: 200,
}
},
storage: "session"
}
},
null
);
}),
t.insertBefore(e, t.firstchild);
})();
</script>
In this script there is a profileAvatar and openLauncherImage.
@Rishabhh17 why there is this part is null?
socketpath: null, → socketPath: "/socket.io/",
hope you mention the socketio in credentials.yml
@Rishabhh17 you need to mention the proper URL path or relative or absolute path for profile and open launcher
@nik202 Yeah I have mentioned that in credentials.yml
rest:
# # you don't need to provide anything here - this channel doesn't
# # require any credentials
#facebook:
# verify: "<verify>"
# secret: "<your secret>"
# page-access-token: "<your page access token>"
#slack:
# slack_token: "<your slack token>"
# slack_channel: "<the slack channel>"
# slack_signing_secret: "<your slack signing secret>"
socketio:
user_message_evt: user_uttered
bot_message_evt: bot_uttered
session_persistence: false
@Rishabhh17 I hope you getting my points? Just remember your rasa and rasa open source run while using Azure (docker)
@nik202 I mean where to place those files so that they can easily retrieve the files using the path in wordpress.
@Rishabhh17 any where, from where you can get the URL link, even on google drive etc
@nik202 Ok means like this as i mentioned below
<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(
{
initPayload: '/greet',
customData: { language: "en"},
socketUrl: "https://bc53-52-178-39-237.ngrok.io",
socketpath: "/socket.io/",
title: 'Smart-HR',
subtitle:'Powered by BASF GD Team',
profileAvatar:"<URL HERE>",
openLauncherImage:"<URL HERE>,
showMessageDate: true,
params: {
images: {
dims:{
width: 300,
height: 200,
}
},
storage: "session"
}
},
null
);
}),
t.insertBefore(e, t.firstchild);
})();
</script>
profileAvatar: "https://",
openLauncherImage: "https://",
Even check this thread for your reference: Integrating Chatbot-Widget ((https://github.com/JiteshGaikwad/Chatbot-Widget) ) to a Wordpress site? - #9 by nik202
Ok @nik202 I will implement it and if this works then close this thread for other and mark this as a solution.I will let you know if this works.Thank you @nik202
Hii @nik202 I have tried but didnt works, See what I did was save the both files in google drive and make it public and then paste the URL but still didnt work for me. Belwo is the script
<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(
{
initPayload: '/greet',
customData: { language: "en"},
socketUrl: "https://bc53-52-178-39-237.ngrok.io",
socketpath: "/socket.io/",
title: 'Smart-HR',
subtitle:'Powered by BASF GD Team',
profileAvatar:"https://drive.google.com/file/d/1EVbVW7jOHodtGdy8JzmXRN2lax2bnqDb/view?usp=sharing",
openLauncherImage:"https://drive.google.com/file/d/1sIH7jSQYemCvflVz_l9_Yt3wYE3b1Q-p/view?usp=sharing",
showMessageDate: true,
params: {
images: {
dims:{
width: 300,
height: 200,
}
},
storage: "session"
}
},
null
);
}),
t.insertBefore(e, t.firstchild);
})();
</script>
@Rishabhh17 what issue you are seeing? can you share the screenshot or error?
profileAvatar:"https://drive.google.com/uc?id=1EVbVW7jOHodtGdy8JzmXRN2lax2bnqDb",
openLauncherImage:"https://drive.google.com/uc?id=1sIH7jSQYemCvflVz_l9_Yt3wYE3b1Q-p",
try use this please.
