# Добавление кнопки Webim в Email

В данной статье мы внедрим кнопку сервиса **Webim** в Ваше сообщение электронной почты формата HTML. В результате получатель письма сможет перейти к чату с Вашим консультантом.

## Получение изображения кнопки Webim

Для получения изображения кнопки **Webim** необходимо отправить запрос следующего вида:

```
https://{account_name}.webim.ru/webim/button.php?button-name=baloon_blue.gif&force-status=on
```

Где `account_name` — название Вашего аккаунта **Webim**.

Если Ваш аккаунт размещён не на серверах **Webim**, запрос будет иметь вид:

```
https://chat.mycompany.com/webim/button.php?button-name=baloon_blue.gif&force-status=on
```

## Описание параметров запроса /webim/button.php:

| Название параметра | Описание                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
|--------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `button-name`      | Имя изображения кнопки, которое загружается с сервера в момент открытия сообщения в почтовом клиенте.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `force-status`     | Отвечает за статус кнопки. Если значение параметра `'force-status=on'`, то всегда будет отображаться кнопка статуса Онлайн. Если значение параметра `'force-status=off'`, то всегда будет отображаться кнопка статуса Офлайн. Если параметр не указан, статус кнопки будет зависеть от наличия операторов Онлайн:<br>• Если в момент открытия письма в почтовом клиенте в сети были операторы со статусом Онлайн, то отобразится кнопка со статусом Онлайн.<br>• Если в момент открытия письма в почтовом клиенте в сети не было ни одного оператора Онлайн, то отобразится кнопка со статусом Офлайн. |

Обратите внимание, что на статус кнопки не влияет параметр **Показывать офлайн-кнопку** в настройках кнопки. Офлайн-кнопка будет отображаться независимо от значения этого параметра.

## Стандартные изображения кнопок Webim

| Имя изображения кнопки  | Изображение онлайн-кнопки                                       | Изображение офлайн-кнопки                                               |
|-------------------------|-----------------------------------------------------------------|-------------------------------------------------------------------------|
| `baloon_mini_blue.gif`  | ![Кнопка чата, стиль baloon_mini_blue, статус онлайн](https://webim.ru/kb/img/for-admins/install-button-email/baloon_mini_blue.svg)  | ![Кнопка чата, стиль baloon_mini_blue, статус офлайн](https://webim.ru/kb/img/for-admins/install-button-email/baloon_mini_blue_offline.svg)  |
| `baloon_mini_green.gif` | ![Кнопка чата, стиль baloon_mini_green, статус онлайн](https://webim.ru/kb/img/for-admins/install-button-email/baloon_mini_green.svg) | ![Кнопка чата, стиль baloon_mini_green, статус офлайн](https://webim.ru/kb/img/for-admins/install-button-email/baloon_mini_green_offline.svg) |
| `circle2_blue.gif`      | ![Кнопка чата, стиль circle2_blue, статус онлайн](https://webim.ru/kb/img/for-admins/install-button-email/circle2_blue.svg)      | ![Кнопка чата, стиль circle2_blue, статус офлайн](https://webim.ru/kb/img/for-admins/install-button-email/circle2_blue_offline.svg)      |
| `circle2_green.gif`     | ![Кнопка чата, стиль circle2_green, статус онлайн](https://webim.ru/kb/img/for-admins/install-button-email/circle2_green.svg)     | ![Кнопка чата, стиль circle2_green, статус офлайн](https://webim.ru/kb/img/for-admins/install-button-email/circle2_green_offline.svg)     |
| `circle_blue.gif`       | ![Кнопка чата, стиль circle_blue, статус онлайн](https://webim.ru/kb/img/for-admins/install-button-email/circle_blue.svg)       | ![Кнопка чата, стиль circle_blue, статус офлайн](https://webim.ru/kb/img/for-admins/install-button-email/circle_blue_offline.svg)       |
| `circle_green.gif`      | ![Кнопка чата, стиль circle_green, статус онлайн](https://webim.ru/kb/img/for-admins/install-button-email/circle_green.svg)      | ![Кнопка чата, стиль circle_green, статус офлайн](https://webim.ru/kb/img/for-admins/install-button-email/circle_green_offline.svg)      |
| `square_cyan.gif`       | ![Кнопка чата, стиль square_cyan, статус онлайн](https://webim.ru/kb/img/for-admins/install-button-email/square_cyan.svg)       | ![Кнопка чата, стиль square_cyan, статус офлайн](https://webim.ru/kb/img/for-admins/install-button-email/square_cyan_offline.svg)       |
| `square_green.gif`      | ![Кнопка чата, стиль square_green, статус онлайн](https://webim.ru/kb/img/for-admins/install-button-email/square_green.svg)      | ![Кнопка чата, стиль square_green, статус офлайн](https://webim.ru/kb/img/for-admins/install-button-email/square_green_offline.svg)      |
| `oval_blue.gif`         | ![Кнопка чата, стиль oval_blue, статус онлайн](https://webim.ru/kb/img/for-admins/install-button-email/oval_blue.svg)         | ![Кнопка чата, стиль oval_blue, статус офлайн](https://webim.ru/kb/img/for-admins/install-button-email/oval_blue_offline.svg)         |
| `oval_green.gif`        | ![Кнопка чата, стиль oval_green, статус онлайн](https://webim.ru/kb/img/for-admins/install-button-email/oval_green.svg)        | ![Кнопка чата, стиль oval_green, статус офлайн](https://webim.ru/kb/img/for-admins/install-button-email/oval_green_offline.svg)        |
| `oval_blue_l.gif`       | ![Кнопка чата, стиль oval_blue_l, статус онлайн](https://webim.ru/kb/img/for-admins/install-button-email/oval_blue_l.svg)       | ![Кнопка чата, стиль oval_blue_l, статус офлайн](https://webim.ru/kb/img/for-admins/install-button-email/oval_blue_l_offline.svg)       |
| `oval_green_l.gif`      | ![Кнопка чата, стиль oval_green_l, статус онлайн](https://webim.ru/kb/img/for-admins/install-button-email/oval_green_l.svg)      | ![Кнопка чата, стиль oval_green_l, статус офлайн](https://webim.ru/kb/img/for-admins/install-button-email/oval_green_l_offline.svg)      |
| `oval_blue_r.gif`       | ![Кнопка чата, стиль oval_blue_r, статус онлайн](https://webim.ru/kb/img/for-admins/install-button-email/oval_blue_r.svg)       | ![Кнопка чата, стиль oval_blue_r, статус офлайн](https://webim.ru/kb/img/for-admins/install-button-email/oval_blue_r_offline.svg)       |
| `oval_green_r.gif`      | ![Кнопка чата, стиль oval_green_r, статус онлайн](https://webim.ru/kb/img/for-admins/install-button-email/oval_green_r.svg)      | ![Кнопка чата, стиль oval_green_r, статус офлайн](https://webim.ru/kb/img/for-admins/install-button-email/oval_green_r_offline.svg)      |
| `baloon_blue.gif`       | ![Кнопка чата, стиль baloon_blue, статус онлайн](https://webim.ru/kb/img/for-admins/install-button-email/baloon_blue.svg)       | ![Кнопка чата, стиль baloon_blue, статус офлайн](https://webim.ru/kb/img/for-admins/install-button-email/baloon_blue_offline.svg)       |
| `baloon_green.gif`      | ![Кнопка чата, стиль baloon_green, статус онлайн](https://webim.ru/kb/img/for-admins/install-button-email/baloon_green.svg)      | ![Кнопка чата, стиль baloon_green, статус офлайн](https://webim.ru/kb/img/for-admins/install-button-email/baloon_green_offline.svg)      |
| `foval_cyan.gif`        | ![Кнопка чата, стиль foval_cyan, статус онлайн](https://webim.ru/kb/img/for-admins/install-button-email/foval_cyan.svg)        | ![Кнопка чата, стиль foval_cyan, статус офлайн](https://webim.ru/kb/img/for-admins/install-button-email/foval_cyan_offline.svg)        |
| `foval_purple.gif`      | ![Кнопка чата, стиль foval_purple, статус онлайн](https://webim.ru/kb/img/for-admins/install-button-email/foval_purple.svg)      | ![Кнопка чата, стиль foval_purple, статус офлайн](https://webim.ru/kb/img/for-admins/install-button-email/foval_purple_offline.svg)      |

Таким образом, Вы можете создать кнопку с использованием статического изображения, либо использовать динамическое изображение, зависящее от наличия операторов «онлайн».

## Создание кнопки Webim для открытия чата из сообщения электронной почты

  1. В Ваше сообщение электронной почты формата HTML добавьте следующий код:

     ```
     <a href="https://{account_name}.webim.ru/webim/client.php">
     <img src="https://{account_name}.webim.ru/webim/button.php?button-name=baloon_blue.gif&force-status=on" />
     </a>
     ```

     Где `account_name` — название Вашего аккаунта **Webim**.

     Если получатель письма должен попадать в определённое размещение, добавьте к URL страницы `client.php` параметр `location`:

     ```
     https://{account_name}.webim.ru/webim/client.php?location={location_name}
     ```

     Пример:

     ```
     https://webim.webim.ru/webim/client.php?location=no_auth_web
     ```

     Пример готового сообщения:

     ```
     <h1>Моё письмо формата HTML</h1><pre>

     У Вас остались вопросы?

     <a href="https://webim.webim.ru/webim/client.php?location=no_auth_web">
     <img src="https://webim.webim.ru/webim/button.php?button-name=baloon_blue.gif&force-status=on" alt="Открыть чат Webim" />
     </a>
     ```

  1. Отправьте Ваше сообщение электронной почты получателю, используя удобный вам способ.

     ![Пример полученного пользователем сообщения](https://webim.ru/kb/img/for-admins/install-button-email/email-button-prev1.webp){ style="width: 547px; max-width: 100%" }

## Создание ссылки без использования изображения кнопки Webim

Вы также можете создать любую удобную Вам ссылку, которая будет перенаправлять пользователя в чат **Webim**. Для такой ссылки Вы можете использовать своё изображение. Либо Вы можете создать текстовую ссылку на Ваш чат.

  1. Для создания ссылки на чат добавьте в атрибут href Вашей ссылки следующий URL-адрес, перенаправляющий пользователя к Вашему чату:

     ```
     https://{account_name}.webim.ru/webim/client.php
     ```

     Где `account_name` — название Вашего аккаунта **Webim**.

     Если пользователь должен попадать в определённое размещение, добавьте к URL параметр `location`:

     ```
     https://{account_name}.webim.ru/webim/client.php?location={location_name}
     ```

     Если Ваш аккаунт размещён не на серверах **Webim**, ссылка будет иметь вид:

     ```
     https://chat.mycompany.com/webim/client.php
     ```

     Пример готового сообщения электронной почты формата HTML с использованием текстовой ссылки:

     ```
     <h1>Моё письмо формата HTML</h1><pre>

     У Вас остались вопросы?

     <a href="https://webim.webim.ru/webim/client.php?location=no_auth_web">
     Напишите нам!
     </a>
     ```

  1. Отправьте Ваше сообщение электронной почты получателю, используя удобный вам способ.

     ![Пример полученного пользователем сообщения](https://webim.ru/kb/img/for-admins/install-button-email/email-button-prev2.webp){ style="width: 439px; max-width: 100%" }

!!! Note "Важно"
    При переходе по ссылке у пользователя будет открыт чат **Webim** на весь экран.

    ![Пример чата, открытого после перехода по ссылке](https://webim.ru/kb/img/for-admins/install-button-email/window-chat.webp){ style="width: 340px; max-width: 100%" }

В результате получатель имеет возможность перейти к чату **Webim** прямо из письма!

---

Источник: https://webim.ru/kb/for-admins/install-button-email.html
