Adjusting the display of website plugin icon

Move your icon around with some CSS

Adjusting the position of website plugin icon

Paste the following CSS after the </script> tag (two options, Choose according to the position of your wrbsite plugin, left or right.):

If your website plugin is set on the right side, please add the following code:

<style type="text/css">
  #easychat-floating-button {
    bottom: 15px;
    right: 15x;
  }
</style>

• the value (15px) after bottom represents the distance between the bottom edge of the icon and the webpage. For values greater than15pxwill move the icon farther from the bottom edge of the webpage and the exact value will depend on your UI configuration.

• the value (15px) after right represents the distance between the right edge of the icon and the webpage. For values greater than15px will move the icon farther from the right edge of the webpage and the exact value will depend on your UI configuration.

If your website plugin is set on the left side, please add the following code:

<style type="text/css">
  #easychat-floating-button-left {
    bottom: 15px;
    left: 15x;
  }
</style>

• the value (15px) after bottom represents the distance between the bottom edge of the icon and the webpage. For values greater than15pxwill move the icon farther from the bottom edge of the webpage and the exact value will depend on your UI configuration.

• the value (15px) after left represents the distance between the left edge of the icon and the webpage. For values greater than15px will move the icon farther from the left edge of the webpage and the exact value will depend on your UI configuration.

• for bottom / right / left, you don't have to configure all values. If you simply want to move the icon farther from the bottom of the webpage, you don't need to include eft: 15px or right: 15px into CSS, as they are default settings.

Example

If you add the following CSS：

<style type="text/css">
  #easychat-floating-button {
    bottom: 50px;
    right: 50x;
  }
</style>

the distance between the bottom edge of the icon and the webpage is 50px; the distance between the right edge of the icon and the webpage is 50px

Adjusting the display size of the website plugin icon

Paste the following CSS after the </script> tag:

<style type="text/css">
  #easychat-floating-button,
  #easychat-floating-button-left,
  #easychat-floating-button.omnichat-icon-wrapper.plugin-animation,
  #easychat-floating-button-left.omnichat-icon-wrapper.plugin-animation {
    width: 80px !important;
    height: 80px !important;
  }
</style>

width: and height: followed by 80px represent the size of the plugin's display. You can adjust it according to your needs.

Note: If your website plugin uses a custom website plugin image, please use the following code instead:

<style type="text/css">
  #easychat-floating-button,
  #easychat-floating-button-left,
  #easychat-floating-button.omnichat-icon-wrapper.plugin-animation,
  #easychat-floating-button-left.omnichat-icon-wrapper.plugin-animation {
    width: 80px !important;
    height: 80px !important;
  }
  
  #easychat-floating-button #custom-icon-img,
  #easychat-floating-button-left #custom-icon-img {
    width: 80px !important;
    height: 80px !important;
  }
</style>

Hiding the website plugin icon

If you wish to hide the webchat plugin on your website, you can also achieve it using CSS.

Paste the following CSS after the </script> tag:

<style type="text/css">
  #easychat-floating-button,
  #easychat-floating-button-left {
    display: none !important;
  }
</style>

Adjusting the display of the website plugin icon on mobile web pages

On mobile web pages, due to the smaller display area compared to desktop browsers, the webchat plugin may potentially block your website's 'Add to Cart' or 'Checkout' buttons. You can adjust the height and size of the plugin as follows to optimize its appearance

Note: The following code will only adjust the display of the webchat plugin on mobile web pages. If you also need to make adjustments for desktop browsers, you still need to include the CSS code provided in the instructions above.

Paste the following CSS after the </script> tag:

If your plugin code is set on the right side and you wish to reduce the plugin size to 40px and raise its display position to 50px on mobile web pages, please use the following CSS:

<style type="text/css">
@media (max-width: 575px) {
  #easychat-floating-button,
  #easychat-floating-button-left {
    width: 40px !important;
    height: 40px !important;
  }
  
  #easychat-floating-button {
    bottom: 50px;
  }
}
</style>

The adjusted result