Добавление кнопки Webim в E-mail
В данной статье мы внедрим кнопку сервиса 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', то всегда будет отображаться кнопка статуса Офлайн. Если параметр не указан, статус кнопки будет зависеть от наличия операторов Онлайн:
|
Обратите внимание, что на статус кнопки не влияет параметр Показывать офлайн-кнопку в настройках кнопки. Офлайн-кнопка будет отображаться независимо от значения этого параметра.
Стандартные изображения кнопок Webim
| Имя изображения кнопки | Изображение онлайн-кнопки | Изображение офлайн-кнопки |
|---|---|---|
baloon_mini_blue. | ||
baloon_mini_green.gif | ||
circle2_blue.gif | ||
circle2_green.gif | ||
circle_blue.gif | ||
circle_green.gif | ||
square_cyan.gif | ||
square_green.gif | ||
oval_blue.gif | ||
oval_green.gif | ||
oval_blue_l.gif | ||
oval_green_l.gif | ||
oval_blue_r.gif | ||
oval_green_r.gif | ||
baloon_blue.gif | ||
baloon_green. | ||
foval_cyan.gif | ||
foval_purple.gif |
gif
gifТаким образом, Вы можете создать кнопку с использованием статического изображения, либо использовать динамическое изображение, зависящее от наличия операторов «онлайн».
Создание кнопки Webim для открытия чата из сообщения электронной почты
В Ваше сообщение электронной почты формата 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.Пример готового сообщения:
<h2>Моё письмо формата HTML</h2><pre> У Вас остались вопросы? <a href="https://webim.webim.ru/webim/client.php"> <img src="https://webim.
webim.ru/webim/button.php?button-name=baloon_blue.gif&force-status=on" />
</a>
Отправьте Ваше сообщение электронной почты получателю, используя удобный вам способ.
Пример полученного пользователем сообщения
webim.ru/webim/button.php?button-name=baloon_blue.gif&force-status=on" />
</a>
Создание ссылки без использования изображения кнопки Webim
Вы также можете создать любую удобную Вам ссылку, которая будет перенаправлять пользователя в чат онлайн консультанта Webim. Для такой ссылки Вы можете использовать своё изображение. Либо Вы можете создать текстовую ссылку на Ваш чат.
Для создания ссылки на чат добавьте в атрибут href Вашей ссылки следующий URL-адрес, перенаправляющий пользователя к Вашему чату:
https://{account_name}.webim.ru/webim/client.phpГде
account_name— название Вашего аккаунта Webim.Если Ваш аккаунт размещён не на серверах Webim, ссылка будет иметь вид:
https://chat.mycompany.
com/webim/client.php
Пример готового сообщения электронной почты формата HTML с использованием текстовой ссылки:
<h2>Моё письмо формата HTML</h2><pre> У Вас остались вопросы? <a href="https://webim.webim.ru/webim/client.php"> Напишите нам! </a>
Отправьте Ваше сообщение электронной почты получателю, используя удобный вам способ.
Пример полученного пользователем сообщения
com/webim/client.php
Важно
При переходе по ссылке у пользователя будет открыт чат онлайн консультанта
Пример чата, открытого после перехода по ссылке
В результате получатель имеет возможность перейти к чату онлайн консультанта Webim прямо из письма!
Добавление собственной кнопки в редактор — Редактор сообщений
Если существующий CKEditor плагин не доступен, который вам необходим, другой вариант, который может быть подходящим для вас, это создание собственной кнопки.
Что могут делать пользовательские кнопки?
Пользовательские кнопки позволяют вам создавать HTML блоки, вставляемые при нажатии на кнопку на панели инструментов редактора. Блоки, которые вы создали, могут принимать контент от пользователей.
Пользовательские кнопки не имею полноценных возможностей плагина CKEditor — они не могут быть динамическими или использовать Яваскрипт, например. Но для форматирования текста, полученного от пользователя, пользовательская кнопка является лучшим выбором.
Хотя пользовательские кнопки, как правило, довольно просты, мы рекомендуем создавать их только, если у вас есть минимальные знания HTML, иначе обратитесь за помощью на наш форум.
Создание пользовательской кнопки
Для создания пользовательской кнопки, перейдите на страницу Кастомизация > Редактор > Тулбары. Нажмите на «Добавить кнопку» в верхней части страницы и выберите вкладку «Пользовательский». Показанная форма будет иметь следующие поля:
- Заголовок
Всплывающее название кнопки, когда пользователь наводит курсор мыши на кнопку в редакторе. - Иконка
Небольшой графический файл, который будет выступать в качестве иконки кнопки в редакторе. Для поддержки экранов retina, загрузите иконку, бОльшую по размеру в два раза; она будет уменьшена в браузере и показана в высоком разрешении. - Тип
- Линейный — используется, когда HTML вставляется куда-то в строку текста. Не создает новую линию для содержания.
- Однолинейный блок — предназначен для отдельных строк (например заголовков), и размещает блок на новой строке.
- Блок — используется для нескольких строк, и ставит блок на новой линии.
- Использовать опцию?
Пользовательская кнопка может дополнительно принимать значение от пользователя. Эта опция появится в виде всплывающего диалогового окна при клике пользователя на кнопку в редакторе, и введённое пользователем значение передаётся в блок. - Метка опции
Текст показывается пользователю, запрашивающему значение параметра. - HTML
фактический HTML код, который вставит кнопка при использовании в редакторе. Как правило, поддерживается любой HTML код, но он должен быть валидным. В этом HTML коде могут быть использованы специальные теги:- {option}
Если этот параметр используется, этот тег будет заменён введённым пользователем значением, как есть.
Если ваша кнопка позволяет пользователям вводить свой контент в HTML блок, вставьте этот тег, куда пользователь сможет печатать.
- {option}
Нажмите кнопку Сохранить для создания кнопки. Ваша иконка будет отображена в тулбаре «Кнопки не в редакторе», и отсюда вы можете переместить её в рабочий тулбар.
Использование пользовательских стилей
Мы не рекомендуем использовать встроенные в ваш HTML код стили, т.
к. в дальнейшем вы не сможете их обновить (сообщения построены таким образом, что при обновлении пользовательской кнопки, сообщения с устаревшей кнопкой не применят внесённые вами изменения).
Вместо этого предлагается использовать имена классов, и добавить стили для них в ваш файл custom.css. Таким способом вы сможете в дальнейшем изменить свои стили, и все сообщения применят эти изменения.
Пример кнопки
Как вы могли заметить, в разделе документации мы используем специальные блоки, на которые необходимо обратить особое внимание, например:
Это простой пример блока
Это пользовательская кнопка редактора, которая доступна только для модераторов. Вот какие настройки необходимо использовать для создания этой кнопки:
- Заголовок — Заметка
- Иконка —
- Тип — блок
- Использовать опцию? — нет
- HTML:
<div>
{content}
</div> Далее добавим пользовательские стили для кнопки в наш custom.
css:
.note {
padding: 24px 30px 24px 122px;
margin: 23px 0 23px -20px;
background: #f6f6f6;
font-size: 16px;
color: #222;
position: relative;
}
.note:before {
content: "\f06a";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 63px;
left: 40px;
top: 7px;
position: absolute;
color: #929292;
}
Report Документ