Mibew Messenger Community

General => Support => Topic started by: solmaz on July 24, 2017, 09:17:47 AM

Title: popup Button
Post by: solmaz on July 24, 2017, 09:17:47 AM
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

Title: Re: popup Button
Post by: faf on July 25, 2017, 02:05:21 PM
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?
Title: Re: popup Button
Post by: MichaelTunnell on July 26, 2017, 05:42:52 AM
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)
Title: Re: popup Button
Post by: faf on July 26, 2017, 08:30:55 AM
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.
Title: Re: popup Button
Post by: solmaz on July 30, 2017, 04:15:59 AM
Mr michel ,I appreciated your prompt response
I have done your solution and it's working now :)