Minimization by Default on mobile devices

Ask the Community General Questions
1

Hello,
may I ask a question?
The audio-player is a real enrichment for my website. However, I have noticed that the widget of the audio-player covers too much in the view for mobile devices. For example, the “AI Chatbot” widget is hidden by the audio-player.
My question is therefore: Is it possible to minimize the audio-player for mobile devices by default? Is there a CSS code for this?
I have attached two screenshots. “Image01” shows the current situation. “Image02” would be the solution.
Again: I want the minimization by default only for the view on mobile devices. I have already tried a few things here and my Custom CSS is already well filled. But I haven’t found a solution for this yet. It would be great if someone could help me. Thanks a lot!

Image01
Image01750×750 25.7 KB

Image02
Image02750×750 31.3 KB

2 Likes
3

Hi there, @Gam :wave:

Your request is with our devs now. I’ll let you know once the solution is ready :slightly_smiling_face:

2 Likes
4

We’ve added this code to the Custom JS field on the Style tab of your widget’s settings:

const isMobile =
  /android|webos|iphone|ipad|ipod|blackberry|windows\sphone/i.test(
    navigator.userAgent
  );

if (isMobile) {
  waitForElement(`[class*="Mobile__StyledMinimizeButton-sc"]`).then(
    (minimizeBtn) => {
      minimizeBtn.click();
    }
  );
}

Check it out and let me know if you like the result :slightly_smiling_face:

2 Likes
5

Oh, wow. Thank you so much!
I’ve been able to test it on two different mobile devices so far.
After a very short delay, the widget minimizes itself. This is exactly the result I wanted. Thank you for your help and adding this code. :+1:
Maybe this post will help other people too facing the same.
Best regards.

3 Likes
6

It’s my pleasure :wink:

If anything else comes up, don’t hesitate to contact us here. We’ll be delighted to help!

1 Like