Topic: popup Button

[solmaz]

Hi every one
I have below PNG file, that I must use that in bottom of the website's first page.
https://ibb.co/gF5GaQ
When I insert generated code of mibew ,the button appear in the block but it must be popup. You can see my mean in fallowing image:
https://ibb.co/iYRB9k
Would you help me how can I create popup button like below:
https://ibb.co/eK7ON5

Tkanks in advance
Solmaz

[faf]

So, you've added the button to a site. The button showed up. If you've enabled "Tracking and inviting" before you generated the button, you should be able to see visitors on the site on the appropriate page. If you click on a visitor (invite him), the visitor will see the popup. What's the problem?

[MichaelTunnell]

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

Code: [Select]

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

Code: [Select]

style="position: fixed;left: 2.5%;bottom: 2.5%;"Edit these distance values to your liking . . .

You should end up with something like this . . .

Code: [Select]

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

Code: [Select]

#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)

[faf]

Hi, Michael.

My two cents.

1. One should avoid inline styles. It's bad practice because leads to ugly markup and increase the difficulty to maintain the site. Moreover with inline styling all customization will disapear once the button will be regenerated. I strongly advise to use styling by element ID.

2. The right way to have own images is to make a custom style. It's not that hard: just copy an existing style to a new directory and alter it. Otherwise it will be harder to update Mibew Messenger itself.

[solmaz]

Mr michel ,I appreciated your prompt response
I have done your solution and it's working now