> For the complete documentation index, see [llms.txt](https://docs.omnichat.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.omnichat.ai/en/features/tong-xun-qu-dao/wang-zhan-dui-hua-cha-jian/zi-hang-diao-zheng-wang-zhan-dui-hua-cha-jian-wei-zhi.md).

# 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:

```markup
<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 than`15px`will 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 than`15px` 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:

```markup
<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 than`15px`will 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 than`15px` 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：

```markup
<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`

![](https://2848678129-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LaFmilpuDQ-f7VKjHCH%2F-MZkWU5hsmHtydlbx00Q%2F-MZkf91oG1tqLjNfPNEb%2F%E6%88%AA%E5%9C%96%202021-05-03%20%E4%B8%8B%E5%8D%881.19.50.png?alt=media\&token=f7979aef-f152-48ff-8d6a-e7746312816c)

## Adjusting the display size of the website plugin icon

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

```html
<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.

{% hint style="info" %}
**Note: If your website plugin uses a custom website plugin image, please use the following code instead:**
{% endhint %}

```html
<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>
```

<figure><img src="https://2848678129-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3u2I1osIy6mEi07X1z46%2Fuploads%2F3S3SkSa7kmefWyyIjmcD%2F%E8%AA%BF%E6%95%B4%E6%8F%92%E4%BB%B6%E5%A4%A7%E5%B0%8F.png?alt=media&amp;token=1283bdc0-a9b9-44a3-88fa-6f9a915379d7" alt=""><figcaption></figcaption></figure>

## 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:

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

<figure><img src="https://2848678129-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3u2I1osIy6mEi07X1z46%2Fuploads%2F7xfvCi2CftUWbpzK3zsU%2F%E9%9A%B1%E8%97%8F%E6%8F%92%E4%BB%B6.png?alt=media&amp;token=51eb3ca0-3df4-4e22-9815-9310bec9265b" alt=""><figcaption></figcaption></figure>

## 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

{% hint style="info" %}
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.
{% endhint %}

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:

```html
<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>
```

<figure><img src="https://2848678129-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3u2I1osIy6mEi07X1z46%2Fuploads%2Fo5NrGYVcPmUCElAJqmy9%2F%E6%89%8B%E6%A9%9F%E7%89%88.png?alt=media&amp;token=46bcd37f-f78a-4912-83c3-ea329df9328b" alt="" width="375"><figcaption><p>The adjusted result</p></figcaption></figure>