Adding a custom chat-bubble notifier
# 📖tutorials
c
This tutorial is based on the method @famous-jewelry-85388 suggested [here](https://discordapp.com/channels/1108396290624213082/1150055906051104798/1154098452821712927) This tutorial is a simple example of how to add a chat-bubble notifier on your website to incentivize the user to interact with your chatbot. In this example, the pop-up would appear if the user has been on the website for 3 seconds but you can modify it as per your needs. The chat bubble is a custom component that I created and not a part of the botpress chatbot. Disclaimer: I am not a frontend developer and have extremely limited js and css experience so it is very likely that the js and css code here does not follow best practices so keep that in mind if you decide to copy code from this tutorial. # How it works - I create a custom css class to use for formatting the chat bubble. - I then create a div for the chat bubble. In this example the location of the chat bubble is hard-coded to be above the botpress chat widget. Feel free to make adjustments here as needed. This div starts off hidden. - I use a variable
isChatOpen
to keep track of whether the chat window is open or closed. I need this because I only want the chat bubble to show up if the user receives a message when the chat window is closed. - When the chatbot component has loaded and is ready to be interacted with, I start a 3 second timer at the end of which I send a custom trigger to the chatbot using the sendPayload method. - When the bot receives the trigger, it sends the user a welcome message using the text card and then uses the
Send Custom Event
card to send the website the same message. - The website catches this event and displays it in the chat bubble if the chat window is closed. It does not display the message if the chat window is open. # Botpress Studio Setup I use a very simple chatbot for this setup. I have attached screenshot of what I used. #Demo See the attached screen recording to see it in action.
c
Amazinnnnnngg! 😍 ❤️ thank you @cool-summer-17043
c
I just realized I forgot to attach the html file I refer to in the post. I'm attaching it here.
d
@cool-summer-17043 Can you tell where this html file has to be placed in the workflow and which card is it ? Thanks for the tutorial on it its pretty cool!
c
@damp-hydrogen-36195 The html file is meant to serve as an example of code you would add to your web site. It is not part of the Botpress workflow. Let me know if you have any follow up questions.
d
Ohk. I thought you added something to the botpress online in a card
f
@cool-summer-17043 thanks for the credits 🙂 And thanks for making it beautifully 😄
j
1: where do i put the code ? (sorry if thats a dumb question)
2: what links do i have to change and do i have to change anythign ?
c
The code I have in the html file would go in your website code. You would only add the parts you need from the html file into your website code. The code I have is only meant to serve as an example so rather than copy-pasting the entire code you would just use it as a guide to figure out what you would need to add. You definitely need to chage the bot web integration scripts, you would replace this with the version from your own published bot:
Copy code
<script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
    <script src="https://mediafiles.botpress.cloud/3545a018-f728-4255-86f3-896b946851d4/webchat/config.js" defer></script>
The rest of the code may or may not need changes based on what you're trying to achieve. A couple of examples would be: - If you want to make your own chat bubble design, you will need to change the css and html div you add for that component - If you want to change when and how the chat bubble shows up, that portion of the code would need to change
j
thanks
what are these links for ?
i dont do code 😦
f
This task needs JS awarness and CSS awarness
m
How high are the chances of managing to do this without any coding experience
Alright should you add your own to botpress links like to your own bot
And the code between the botpress pre configured code
c
Hey @brainy-summer-1041 , Can you confirm that you’re just trying to use the html file (with the embed lines changed to point to your own bot)? Can you also confirm that the bot you are embedding is set up to receive a trigger as well as send a custom event back with the “msg” field populated as shown in the botpress studio screenshot?
m
Yeah so my own botpress script code things like the links they should be on the places normally right then I where on the same page I think
Sorry😂
So would you take the code and place it between the botpress pre configured code
Or you will have to put your own links in there right
The chat bubble html is empty for me
j
hi
c
@brainy-summer-1041 Sounds like all you have done is replace the the 2 script lines to point to your bot. In addition to doing that, you need to make sure your bot has a custom trigger to start the conversation and is using the
Send Custom Event
card to send the message you want to display in the chat bubble in the expected format as shown in the botpress studio screenshot I have attached above. Have you done that part? If you don't send a message to display on the chat bubble, it won't show up. I have also set it up to make sure the chat bubble will only show up when the chat window is closed. If you open the chat window, the chat bubble will be hidden.
m
I can’t see what’s in the file
Damm😂 thanks
c
Thanks guys @brainy-summer-1041 & @cool-summer-17043 !👍
d
There is an extensions tab in Vs code. over there type "open in browser"
It is good to have this, can right click the file you are working on and open it in your default browser
m
Thanks i didn’t get any of that 😂
c
You can open and edit the file if you would like using notepad or any similar text editor. Just drag and drop the file into one
m
Can you download it with chrome
Like a chrome laptop
c
Hey guys @mysterious-cricket-72777 @jolly-policeman-82775 please DM each other next time, this doesn't really serve the community. 😆 Especially not under this tutorial.
All good. Just want to make sure we stay relevant in the various threads & channels 😊
e
@cool-summer-17043 There is a problem that needs to be solved like when you scroll down to the webpage the bubble stay there as static but the chatbot icon moves along the way.
c
@early-tent-72819 If I’m not mistaken the problem you’re describing can be fixed by adjusting the css on the chat bubble. Unfortunately, I can’t help you with that since I have close to zero experience with that (my background is in Robotics). The css used in the tutorial is just meant to serve as a reference, perhaps someone who actually knows css can help
a
Works for me but there is an easy thing to miss, don't forget to actually type in {{event.conversationId}} in the send custom event trigger because the Composer placeholder is also {{event.conversationId}} making the Conversation ID in fact empty
c
@bright-magazine-792 could you please help with css here?
a
I got i to be working fine here and modified the css: https://globespirit.com/OLEO-Chatbot/index8.html
now I am struggling to get it to work in wordpress, anybody managed?
m
I’m having trouble with the code
q
are you using wpcode plugin?
a
yes I am using same WPcode, then putting the css in the template custom css
b
any updates for the non-coders? ❤️ i would like to learn to implement this as well
c
@early-train-33247 👀
c
Can anyone provide support here I have no coding experience, I added the send custom event I need to make the trigger now I believe but I can't see what to do for this. I've attached a picture of my botpress studio. If anyone can help I'll also provide my current website code.
e
Hey @clever-wire-32453 what's the content of your "Send Custom Event" card?
c
@early-train-33247
I dont think its right i just have no idea what to do
e
ooh there is a typo in the first input
it should be {{event.conversationId}}
the casing matters 😉
c
ahhh okay
then what do i need to do?
It seems the first example on here has another custom trigger
or was that the conversation started one i have
e
Update the Conversation ID field with
{{event.conversationId}}
c
yep done that
I meant like what do i need to do from here
where does it link to?
e
Connect it to the intro node
c
thank you btw
e
Where you make a question
c
Like this?
@early-train-33247
e
That's right, try it out
Actually you need a Trigger first
Take a look at the screenshots and the tutorial at the beggining of the post
a
Works?
@late-appointment-26662
Can u help me with that?
Can anyone help me with that?
c
What do you need help with?
a
How do I implement the code? And where?
How do I add the pop up message
l
How do we make the bot window pop up when a customer opens the website
c
The code needs to be added to the website where you want the bot to show up. The html file is just an example for a very simple website. The exact place depends on what tool you used to create your website. For example, wordpress, squarespace etc. The code in the html file gets the pop-up message from botpress. In the example, the message you want to display is sent to the website through the send custom event card.
In the example code, when the page and bot widget is loaded we start a timer. Once it counts down, the website sends a trigger to the botpress bot to start the conversation and the bot sends an event to the website with the conversation starter message. The website then displays this as a pop-up. The reason for doing it this way is to make sure the message in the pop-up matches the first message in the bot. If you don’t need them to match, you could simply this a lot
a
I do not need it to be the same message, so where do I need to put the code if it is a Shopify store?
And what code?
Can you maybe hop on a call for like 5 min and help me and my friend?
c
It would go into the website code. I am not sure what platform was used to build that store website. The code that needs to be added is the code in the html file shared in my second message I sent on this post.
I can’t do a call right now but you can dm me and we can find some time to look into this
a
Ty brother
j
Hello, where should i put in the code.
Im using WOrdpress
Ok, i understand now, but it doesnt work
11 Views