Try this, add this javascript to your theme

document.addEventListener('DOMContentLoaded', function() {
  const footerNav = document.querySelector('#ipsMobileFooter');
  if (footerNav) {
    footerNav.addEventListener('click', function(event) {
      const target = event.target;
      const liElement = target.closest('li.ipsMobileFooter__item[data-el="chat"]');
      if (liElement && footerNav.contains(liElement)) {
        // Your code to execute when the specific <li> is clicked
        console.log('Clicked on the <li> with data-el="chat" inside #ipsMobileFooter');
		const realIcon = document.getElementById("floating-chat-icon");
        realIcon?.click();
      }
    });
  }
});

This will do when you click on your own icon, javascript triggers, a click on the other icon.

const realIcon = document.getElementById("floating-chat-icon");
realIcon?.click();

I think that should work.

Don't forget to change this like for you footer button: <li data-el="more" class="ipsMobileFooter__item"> to <li data-el="chat" class="ipsMobileFooter__item"> Only at your button, Not the Menu button.

Edited May 14, 20251 yr by Moestuin

Thank you, @Moestuin. I've done all that. And what do I do with the following line?

22 hours ago, Moestuin said:

<a href="http://www.test.com" class="ipsMobileFooter__link" aria-controls='ipsOffCanvas--navigation' aria-expanded='false' data-ipscontrols">

I'm guessing this:

<button class="ipsMobileFooter__link" aria-controls='ipsOffCanvas--notifications' aria-expanded='false' data-ipscontrols data-ipsoffcanvascontent>

Edit: heh - no. That, of course, brings up notifications.

Can you remove the entire <a
also few lines down the </a>

I see that is not working. See PM.

2 minutes ago, Moestuin said:

Can you remove the entire <a
also few lines down the </a>

Functionally, that works. But it messes up the button: the icon is display left-top of the button, and hover effects have disappeared.

So I placed back the button line I suggested a little further up and removed:

 aria-controls='ipsOffCanvas--notifications'

It seems to now work flawlessly! I will test it out more fully, and there are a few other things to take of (removing the original button, and change when the regular button (for PC ) is triggered. But I am pretty sure I can work out how to do them.

Thank you so much @Moestuin ! :-)

4 minutes ago, Moestuin said:

I see that is not working. See PM.

Ah. Only just seen this. I'll check.

Ok, do your button like tike this:

<button class="ipsMobileFooter__link" aria-expanded="false" data-chat-trigger="true">

change javascript to:

document.addEventListener('DOMContentLoaded', function () {
  const customChatButton = document.querySelector('[data-chat-trigger="true"]');
  if (customChatButton) {
    customChatButton.addEventListener('click', function () {
      const realIcon = document.getElementById('floating-chat-icon');
      realIcon.click();
    });
  }
});

just hide the orginal chat button on mobile:

css style
@media (max-width: 768px) {

#floating-chat-icon {

display: none !important;

}

}

Edited May 14, 20251 yr by Moestuin

3 minutes ago, Moestuin said:

Ok, do your button like tike this:

<button class="ipsMobileFooter__link" aria-expanded="false" data-chat-trigger="true">

change javascript to:

document.addEventListener('DOMContentLoaded', function () {
  const customChatButton = document.querySelector('[data-chat-trigger="true"]');
  if (customChatButton) {
    customChatButton.addEventListener('click', function () {
      const realIcon = document.getElementById('floating-chat-icon');
      realIcon.click();
    });
  }
});

OK. It is working at the moment (or appears to be), but I'll as you advise there. I'll report back in a few moments.

Yes - that works!! Thank you, @Moestuin.

On 5/13/2025 at 5:48 PM, Moestuin said:

Correction to css:

.ipsMobileFooter {
  position: fixed;       /* Fixes the footer relative to the viewport */bottom: 0;             /* Positions it at the bottom of the screen */left: 0;               /* Aligns it to the left edge */width: 100%;           /* Makes it span the full width */z-index: 9999;         /* Ensures it stays on top of other elements */
}
.ipsMobileFooter:nth-of-type(2) {
  display: none;
}
@media (max-width: 768px) {
    .ipsLayout__app {
    margin-bottom: 55px;
    }
}

Note: The black footer area was not playing nice with the footer menu bar at some widths - dropping below the menu bar - I had to change @media (max-width: 768px to 979px.

Thanks i have adjusted it aswel.

Hiding the existing footer and attempting to recreate it with your own links isn't the best way to handle this. If elements don't have a hook point you can target, then using Javascript is a simple alternative.

(function(){
	const mobileMoreButton = document.querySelector('[data-ips-hook="mobileFooter"] [data-el="more"]');
	mobileMoreButton.insertAdjacentHTML("beforebegin", `
		<li data-el="chat" class="ipsMobileFooter__item">
			<a href="#" class="ipsMobileFooter__link">
				<span class="ipsMobileFooter__icon">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M88.2 309.1c9.8-18.3 6.8-40.8-7.5-55.8C59.4 230.9 48 204 48 176c0-63.5 63.8-128 160-128s160 64.5 160 128s-63.8 128-160 128c-13.1 0-25.8-1.3-37.8-3.6c-10.4-2-21.2-.6-30.7 4.2c-4.1 2.1-8.3 4.1-12.6 6c-16 7.2-32.9 13.5-49.9 18c2.8-4.6 5.4-9.1 7.9-13.6c1.1-1.9 2.2-3.9 3.2-5.9zM208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 41.8 17.2 80.1 45.9 110.3c-.9 1.7-1.9 3.5-2.8 5.1c-10.3 18.4-22.3 36.5-36.6 52.1c-6.6 7-8.3 17.2-4.6 25.9C5.8 378.3 14.4 384 24 384c43 0 86.5-13.3 122.7-29.7c4.8-2.2 9.6-4.5 14.2-6.8c15.1 3 30.9 4.5 47.1 4.5zM432 480c16.2 0 31.9-1.6 47.1-4.5c4.6 2.3 9.4 4.6 14.2 6.8C529.5 498.7 573 512 616 512c9.6 0 18.2-5.7 22-14.5c3.8-8.8 2-19-4.6-25.9c-14.2-15.6-26.2-33.7-36.6-52.1c-.9-1.7-1.9-3.4-2.8-5.1C622.8 384.1 640 345.8 640 304c0-94.4-87.9-171.5-198.2-175.8c4.1 15.2 6.2 31.2 6.2 47.8l0 .6c87.2 6.7 144 67.5 144 127.4c0 28-11.4 54.9-32.7 77.2c-14.3 15-17.3 37.6-7.5 55.8c1.1 2 2.2 4 3.2 5.9c2.5 4.5 5.2 9 7.9 13.6c-17-4.5-33.9-10.7-49.9-18c-4.3-1.9-8.5-3.9-12.6-6c-9.5-4.8-20.3-6.2-30.7-4.2c-12.1 2.4-24.8 3.6-37.8 3.6c-61.7 0-110-26.5-136.8-62.3c-16 5.4-32.8 9.4-50 11.8C279 439.8 350 480 432 480z"/></svg>
				</span>
				<span class="ipsMobileFooter__text">Chat</span>
			</a>
		</li>
	`);
})();

@Moestuin will understand that far better than me, but I think I get the gist of if it. Thank you @Ehren. I'll test it out later.

Yes that is a more elegant solution, without using an hook, and it also prevents running the code two times.
Later tonight i will adjust my code test it, and post instruction how to alter yours.

Ok works like a charm.

First open you hook, copy out all code to temp txt, then delete the hook.
Open up the css, and delete the CSS

.ipsMobileFooter {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}
.ipsMobileFooter:nth-of-type(2) {
  display: none;
}
@media (max-width: 979px) {
    .ipsLayout__app {
    margin-bottom: 55px;
    }
}

Then go to admin CP, to your theme, then open CSS/Javascript. Open javascript tab to add javascript.

Goto you txt, and copy out your piece of code for the button. From: <li data-el="chat" class="ipsMobileFooter__item"> everything inbetween and </in>

(function(){
	const mobileMoreButton = document.querySelector('[data-ips-hook="mobileFooter"] [data-el="more"]');
	mobileMoreButton.insertAdjacentHTML("beforebegin", `
         COPY THE <li> </li> HERE
	`);
})();

Then save. And it shoot be good.

Thank you @Ehren and @Moestuin. I made the changes you suggested and it seems to work flawlessly.

2 hours ago, Moestuin said:

<li data-el="chat" class="ipsMobileFooter__item"> everything inbetween and </in>

For others that read this, i made a typo. the last </in> should be </li>

Thanks for spotting that @Como