Hi all, that my first tutorial and easy. Sometimes happens that a visitor on your website doesn´t realize that there is the possibility to chat with your bot. To call the attention of the user or to offer more Help trough the Chat option is a nice way to have more features for the User and is more attractive too. Here is what I have done: Hopefully not to complicated 😅 Result is this, as show case example:

@narrow-agent-91470 So i just copy and paste it?

Right, make sure you change the parts needed

How should I place the image

in the img folder of your website

i dont got that

you can make the image as big or small you like to, just adjust the CSS

its only a test site

but you access the HTML code, isn´t it

yeah

you have access to the different folders to, where you store the CSS and images?

its only index.html file lol

I got you, but does your website has images?

no

ok then make a folder that you call img

so dekstop ok

there you have your index.html

thats right

Best is if you create a folder that says something like Website, then store your index.html inside and create there the folder for images called img

done

have you an image already?

yeah

what´s the name and format?

png format

ok

so know how do I add the image

on your botpress site you have two codes, for your bot

yes

then

ima try and make one with CHATgpt 🙂

then you put this code: window.addEventListener("DOMContentLoaded", function() { var popupDisplayed = false; function showPopup() { if (!popupDisplayed) { // Create the pop-up element var popup = document.createElement("div"); popup.className = "popup"; // Create the pop-up image var popupImage = document.createElement("img"); popupImage.src = "img/123.png"; /* Replace 'path/to/designed-image.png' with the actual path to your designed image */ popup.appendChild(popupImage); // Append the pop-up to the body document.body.appendChild(popup); popupDisplayed = true; } } function showChatWidget() { var chatWidget = document.getElementById("botpress-webchat"); chatWidget.style.display = "block"; document.body.removeChild(document.getElementById("popup")); } // Show the pop-up when scrolling down a few lines window.addEventListener("scroll", function() { if (window.scrollY > 100) { // Adjust the scroll position as needed showPopup(); } }); // Show the chat widget when the pop-up is clicked document.addEventListener("click", function(event) { var popup = document.getElementById("popup"); if (event.target === popup) { showChatWidget(); } }); });

oh thanks !

I have already added the image

nevermind

that would be the part of adding the img: popupImage.src = "img/123.png"; /* Replace 'path/to/designed-image.png' with the actual path to your designed image */

how can ichange the path

popupImage.src = "img/123.png"; popupImage.src decribes the variable = "img/123.png" is the image path img is the folder and 123.png is the image name

so i just copy it

yes

this is already yours complete I adjusted https://discordapp.com/channels/1108396290624213082/1163498688220500079/1163508333374865418

ok

then you put the second botpress script from your botpress site

below everything right?

done

alright, then run your page and check it out

nothing happens 😄

can you make a screenshot

you have made a script file?

what should I fix

open the index.html

ok

below the footer there you paste alll the code

where is that 😄

wait

what should I do with it

wait

ty mate

should I put this code in the css chatbot styler or html in my site ?

can u help me with that?

Hey RonRonXR I am sorry, but my health conditions are not the best at this moment. Am not able to be active at that point. Really sorry and hoppe you understand.

feel good nrother