What's the problem?
solmaz contacted me privately on this issue as well and from that conversation it seems as though they are wanting the engagement button to be a floating element rather than in the location that placed it in the code.
I have added a html block in first page and Inserted generated code for invitation button.But It's not popup and image is showing into the block!
This is done with CSS inside of your Moodle theme. I do not know much about Moodle theming so this response will be answered in a broad aspect.
The default code is made to be placed wherever you put the HTML which is how it is working on your other screenshot (privately shared) but you wanted it to be in a "fixed" position in the browser which requires every content.
The simplest thing to do is to add a
style value to the embed code OR using the
CSS ID of the mibew code.
style = easiest
css id = cleaner code
The choice is up to you.
Style Method How To:FIND
<!-- mibew button --><a id="mibew-agent-button" href="/chat?locale=en" target="_blank" onclick="Mibew.Objects.ChatPopups['597829b5a21c6466'].open();return false;">
ADD (inside the <a> attributes)
style="position: fixed;left: 2.5%;bottom: 2.5%;"
Edit these distance values to your liking . . .
You should end up with something like this . . .
<!-- mibew button --><a id="mibew-agent-button" href="/chat?locale=en" target="_blank" onclick="Mibew.Objects.ChatPopups['597829b5a21c6466'].open();return false;" style="position: fixed;left: 2.5%;bottom: 2.5%;">
plus the rest of the embed code of course.
CSS ID Method How To:ADD the following to your CSS stylesheet file
#mibew-agent-button {position: fixed;left: 2.5%;bottom: 2.5%;}
how can i create my own image according to fallowing?
You just need to replace the images on your server with new images you created. There is an online and an offline image for each button style just replace the style with your new images. (not the cleanest way to do it but is the easiest and fastest way to do it)