How to Customize Launcher Button Size for Each Device Type

Ask the Community General Questions
1

Howdy,

Your AI Chatbot keeps getting better and better. Thank you for your efforts.

Along that line, would it be possible to introduce additional customization features for your launcher button size settings?

Currently, the AI Chatbot launcher button size I select applies to all device types (mobile, tablet, and desktop). I would like to set a unique launcher button size for each device type. For example, “small” for mobile devices, “medium” for tablets, and “large” for desktops.

Can you help with that? See below screenshot for details.

Thank you!

screenshot-ai-chatbot-launcher-button-size-settings
screenshot-ai-chatbot-launcher-button-size-settings1333×863 62.8 KB

1 Like
3

Hey there, @AeroConsultants :waving_hand:

Many thanks for sharing your thoughts!

I totally agree that it would be handy to have a more flexible size settings for the chat bubble. This idea is already on the Wishlist, feel free to upvote it - Mobile and tablet settings for the chat bubble

As for now, you can change the launcher button size on mobile and tablets using the CSS codes below :wink:

Mobile:

@media (max-width: 500px) {
[class^="FloatingButton__FloatingButtonContainer-sc"] {
  scale: 0.7;
}
}

Tablets:

@media (min-width: 501px) and (max-width: 768px) {
  [class^="FloatingButton__FloatingButtonContainer-sc"] {
    scale: 0.8;
  }
}
1 Like
4

Hey @Max,

Thanks a million. That worked. However, I had to make a few adjustments to your CSS rules to compensate for the coordinate system used by the launcher button. I recommend using the CSS rules provided below and adjust them to suit your needs.

Give them a spin. Salud! :clinking_glasses:

/* Change Launcher Button Size for Desktop, Tablet, and Mobile Devices. */

/* Global and Desktop */

global styles,
[class^='FloatingButton__FloatingButtonContainer-sc'] {
  scale: .9;
  margin-right: .9rem !important;
  margin-bottom: .9rem !important;
}

/* Tablet */

@media (min-width: 501px) and (max-width: 768px) {
  [class^="FloatingButton__FloatingButtonContainer-sc"] {
    scale: 0.9;
    margin-right: 0.625rem !important;
    margin-bottom: 0.625rem !important;
  }
}

/* Mobile */

@media (max-width: 500px) {
  [class^="FloatingButton__FloatingButtonContainer-sc"] {
    scale: 0.8;
    margin-right: 0.625rem !important;
    margin-bottom: 0.625rem !important;
  }
}
1 Like
5

Yep, with the margin values added to the codes, you can additionally control the position of the bubble on different devices :slightly_smiling_face:

1 Like