Indra Ganzorig13 May 2021
You can change the position of your erxes messenger by updating the codes in 2 areas:
- the widget script itself (erxes messenger script)
- the style section (header) of your website
Here is an example of the erxes messenger position change. This article will show you how to position the messenger on the left side.
Widget Script
Please copy the following code and replace the highlighted sections in yellow with your unique details. The brand_id can be found in your erxes Messenger script (Settings/AppStore -> Messenger and click in Install Script).
<script>
window.erxesSettings = {
messenger: {
brand_id: "mhyJXp",
css: '.erxes-messenger {left: 8px; transform-origin: 0% 100%;}',
},
};
(function() {
var script = document.createElement('script');
script.src = "https://fatcatjazzclub.app.erxes.io/widgets/build/messengerWidget.bundle.js";
script.async = true;
var entry = document.getElementsByTagName('script')[0];
entry.parentNode.insertBefore(script, entry);
})();
</script>
window.erxesSettings = {
messenger: {
brand_id: "mhyJXp",
css: '.erxes-messenger {left: 8px; transform-origin: 0% 100%;}',
},
};
(function() {
var script = document.createElement('script');
script.src = "https://fatcatjazzclub.app.erxes.io/widgets/build/messengerWidget.bundle.js";
script.async = true;
var entry = document.getElementsByTagName('script')[0];
entry.parentNode.insertBefore(script, entry);
})();
</script>
Style Section
Please add this code to the style section of your website:
<style>#erxes-messenger-container {
left: 0;
}
#erxes-messenger-iframe {
left: 12px;
}
#erxes-messenger-container:after {
left: -300px;
transform: scaleX(-1);
}
#erxes-messenger-container.erxes-messenger-shown:after {
left: -20px;
}</style>
left: 0;
}
#erxes-messenger-iframe {
left: 12px;
}
#erxes-messenger-container:after {
left: -300px;
transform: scaleX(-1);
}
#erxes-messenger-container.erxes-messenger-shown:after {
left: -20px;
}</style>