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.

Amazinnnnnngg! 😍 ❤️ thank you @cool-summer-17043

I just realized I forgot to attach the html file I refer to in the post. I'm attaching it here.

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

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

Ohk. I thought you added something to the botpress online in a card

@cool-summer-17043 thanks for the credits 🙂 And thanks for making it beautifully 😄

1: where do i put the code ? (sorry if thats a dumb question)

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:

<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

thanks

This task needs JS awarness and CSS awarness

How high are the chances of managing to do this without any coding experience

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?

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

hi

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

I can’t see what’s in the file

Thanks guys @brainy-summer-1041 & @cool-summer-17043 !👍

There is an extensions tab in Vs code. over there type "open in browser"

Thanks i didn’t get any of that 😂

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

Can you download it with chrome

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.

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

@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

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

@bright-magazine-792 could you please help with css here?

I got i to be working fine here and modified the css: https://globespirit.com/OLEO-Chatbot/index8.html

I’m having trouble with the code

are you using wpcode plugin?

yes I am using same WPcode, then putting the css in the template custom css

any updates for the non-coders? ❤️ i would like to learn to implement this as well

@early-train-33247 👀

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.

Hey @clever-wire-32453 what's the content of your "Send Custom Event" card?

ooh there is a typo in the first input

ahhh okay

Update the Conversation ID field with

{{event.conversationId}}

yep done that

Connect it to the intro node

thank you btw

Where you make a question

That's right, try it out

Works?

What do you need help with?

How do I implement the code? And where?

How do we make the bot window pop up when a customer opens the website

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.

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?

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.

Ty brother

Hello, where should i put in the code.