Кнопка обратного звонка css: Круглая кнопка (обратного звонка) CSS с анимацией

Настройка виджета обратного звонка Zadarma

Настройка виджета обратного звонка Zadarma

Инструкции по настройке / Колл-бек виджет / Настройка виджета обратного звонка

На странице «Услуги» — «Виджет обратного звонка» нажимаем кнопку «Создать widget».

1. Основные

• Отображаемое имя — любое значение. Его будете видеть только Вы в Вашем личном кабинете.
• Ваш номер — при вызове обратного звонка пользователем Вашего сайта наш сервис направит звонок на Ваш номер (это может быть номер телефона, SIP-логин, внутренний номер или сценарий облачной АТС). После ответа на данный звонок с Вашей стороны наш сервис направит параллельный звонок на номер, который пользователь указал на сайте, и соединит Вас в разговор.
• Настройки из SIP — SIP-номер или внутренний номер АТС, с которого будет использоваться CallerID для звонков с виджета, также этот логин будет отображаться в статистике звонков для их удобной сортировки.

  Примечание: при выборе в поле «Ваш номер» SIP-логина или внутреннего номера АТС будет использоваться его CallerID, а данного поля не будет.

• Рабочие часы — Вы можете указать рабочие дни и время, в которое желаете получать звонки с виджета. В нерабочее время посетители Вашего сайта смогут оставить запрос на отложенный звонок. Информация о нем отправится на Ваш регистрационный email, а также зафиксируется в статистике виджета и в разделе «Отложенные звонки». При нажатии на ссылку «Перезвонить», звонок поступит по аналогичной схеме сначала на Ваш номер, а затем на номер клиента.

  Примечание: если все дни установить нерабочими, виджет соответственно работать не будет.

• Перенаправление на страницу, после успешного звонка — после запроса на обратный звонок клиенту будет предложено ответить «Мне позвонили» и «Звонка не было».

  В первом случае Вы можете перенаправить клиента на нужную страницу сайта, например, в корзину или на страницу с отзывами.

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

• Событие для аналитики, Событие при отложенном звонке — в данные поля вы можете указать событие для систем учета, например Google Analytics либо Яндекс Метрики. В них прописывается JavaScript код, который будет выполнен по нажатию на кнопку «Жду звонка». Пожалуйста, не пишите в это поле ничего кроме JavaScript кода, так как это приведет к ошибке при заказе звонка.
• Электронный адрес для уведомлений — email для уведомлений об отложенных звонках (вместо регистрационного по умолчанию).
• Размещать информацию о Zadarma с реферальной ссылкой — в окне виджета будет отображаться информация о нашем сайте с Вашей реферальной ссылкой. Подробно о партнерской программе.
• Лимит звонков с одного IP за полчаса — ограничение на количество запросов обратного звонка с одного IP адреса, во избежание спама с Вашего виджета и растраты средств.
  Ограничение заказа звонков с одного номера клиента — второй звонок с того же номера клиента возможен через час, третий — через сутки.

• Черный список IP-адресов — Вы можете запретить заказывать обратные звонки с определенного IP адреса, например, если с него отправляются нецелевые запросы. Информация об IP адресе, с которого был сделан запрос на обратный звонок, фиксируется в статистике виджета.

2. Критерии отображения

Система Zadarma может определить нестандартное поведение посетителя на сайте и автоматически показывать ему виджет с предложением заказать бесплатный звонок.

• Критерии оценки поведения посетителей — некоторым действиям посетителей на Вашем сайте можно задать определенные значения критериев. При совершении посетителем этих действий очки за них суммируются в общий счетчик.
• Отображать виджет при сумме критериев — когда сумма набранных пользователем очков будет равна или больше заданной в этом поле, ему будет автоматически предложено заказать обратный звонок.

Если в данное поле указать значение 0, то виджет (окно для ввода номера) появится сразу же при первом действии пользователя на сайте.

Примечание: все действия посетителя на сайте фиксируются в cookie файлах его браузера. Если он один раз закроет окно виджета, второй раз самостоятельно оно уже не появится.

Также обратите внимание, что в cookie файлах запоминаются 5 последних страниц сайта, по которым перешел пользователь. При переходе между одними и теми же страницами, в сумму критериев значение будет добавлено только по одному разу за каждую страницу.

• Отображать виджет при уходе с сайта и сумме критериев — срабатывает при выведении курсора мыши за границы сайта, в том случае, если сумма набранных очков равна или больше заданной в этом поле.

3. Внешний вид

В данном разделе Вы можете настроить и посмотреть внешний вид виджета (до его установки на сайт).

Существует 2 варианта дизайна виджета: “Новый” и “Простой”. Каждый из них обладает своими преимуществами. Рассмотрим их по порядку.

Новый дизайн

Позволяет легко и быстро создать красивый виджет по уже готовым шаблонам без внесения каких-либо дополнительных настроек.




Вверху над примером виджета Вы можете выбрать один из трех доступных видов кнопки для вызова окна виджета, а также внешний вид самого окна для заказа звонка (боковая панель или окно по центру).

• Обратный отсчет времени с — количество секунд обратного отсчета с момента нажатия на кнопку «Жду звонка». Отображается посетителю на сайте. Можете указать любое значение — на время фактического соединения это не влияет.
• Картинка — фотография менеджера на кнопке и в окне для заказа номера.
• Угол расположения кнопки — позиционирование виджета на сайте.
• Отступы — отступы от границ сайта до виджета.
• Автоподстановка префикса страны — автоматическая подстановка телефонного кода страны в поле для ввода номера. Префикс подставляется в зависимости от геолокации по IP адресу посетителя.
• Текст для кнопки — текст, отображаемый на кнопках 2 и 3.
• Чекбокс согласия с правилами — если Вы желаете получить от посетителя сайта разрешение на использование его номера, Вы можете описать условия и цели использования номера в тексте соглашения.
  Данный чекбокс появится в виджете при условии, что будут заполнены все 3 поля: Заголовок соглашения, Текст ссылки для прочтения полного текста и Полный текст соглашения.

Простой дизайн

Позволяет использовать старую версию виджета с более простым дизайном и возможностью редактировать его внешний вид (с помощью css стилей).



• Обратный отсчет времени с — количество секунд обратного отсчета с момента нажатия на кнопку «Жду звонка». Отображается посетителю на сайте.
• Можете указать любое значение — на время фактического соединения это не влияет.
• Использовать свой css — Вы можете самостоятельно изменить внешний вид виджета/кнопки с помощью стилей css.

  Cкачайте css файл и переопределите в нем нужные стили.
  После этого Вам понадобится загрузить этот файл к себе на сервер и подключить его на страницах с виджетом с помощью тега , так как с включенной опцией «Использовать свой css» виджет не будет загружать стили с нашего сайта.

  Пример: <link rel=»stylesheet» type=»text/css» href=»/css/zcallback_widget.css»>

• Отображать кнопку — Вы можете отключить отображение кнопки, чтобы виджет появлялся только по достижению заданной суммы критериев.
• Использовать анимацию CSS — включение/отключение анимации на кнопке для вызова виджета.
• Автоподстановка префикса страны — автоматическая подстановка телефонного кода страны в поле для ввода номера. Префикс подставляется в зависимости от геолокации по IP адресу посетителя.

Подписи — текстовые поля в окне заказа обратного звонка. Вы можете полностью изменить содержимое текста виджета (в обоих версиях дизайна).

4. Фильтр номеров

Фильтр номеров предоставляет возможность запретить заказ обратного звонка на номера определенной страны или наоборот разрешить звонки на номера только одной страны.




Чтобы добавить страну в фильтр, просто найдите ее в списке и кликните на нее.




5.

Установка на сайт

После настройки виджета нажимаем кнопку «Создать Widget».

Полученный код копируем и вставляем в код своего сайта в любое место в пределах тега <body>.

При изменении настроек код виджета на сайте изменять не нужно.

После сохранения настроек они вступают в силу в течение 10 минут (не моментально).

Услуги

• Звонки
• Программы для звонков
• Речевая аналитика
• SIP-trunk
• Обратный звонок
• Актуализация базы (HLR запросы)
• Телефонные номера
• Переадресация входящих звонков
• Перенос номера
• Виртуальная АТС
• Виджет обратного звонка
• Кнопка “Позвонить нам”
• Коллтрекинг
• СМС
• CRM
• Видеоконференция

Тарифы

• Тарифные пакеты
• Звонки
• Как выбрать тариф?
• Стандарт
• Эконом
• Бесплатный
• Телефонные номера
• Номера 800 (Toll Free)
• СМС

Пополнить счет

• Способы пополнения счета
• Корпоративное подключение
• Партнерская программа

Сервис ZADARMA

• О нас
• Новости
• Отзывы о Zadarma
• Соглашение пользователя
• Политика конфиденциальности

Помощь

• Инструкции по настройке
• Интеграции
• Вопросы и ответы
• Онлайн чат
• Заявка в поддержку
• API
• Блог

Этот сайт нуждается в определенных файлах Cookies, которые технически необходимы для работы сайта. Мы также хотели бы установить дополнительные файлы Cookies, чтобы улучшить наш сервис. Мы не будем устанавливать дополнительные файлы Cookies, если вы их не включите. Вы можете изменить свой выбор в любое время на странице нашей Политики Cookie.

Только необходимые cookies

Принимать все cookies

Зачем нужен обратный звонок на сайте

Большинство покупателей в сети привыкли общаться с продавцом через онлайн-чат, это быстрый и удобный способ получить нужную информацию. А как быть с обратным звонком? Бытует мнение, что он только раздражает посетителей ресурса и не приносит пользу. В этой статье мы разберем преимущества обратного звонка и объясним, в каких случаях он действительно нервирует клиентов.

В чем суть? 

Обратный звонок — это один из способов связи клиента и компании. Человек сам просит операторов перезвонить ему, оставляя свой номер телефона. Некоторые  компании запрашивают, в какое время удобно связаться с клиентом. Сотрудники обязательно должны перезвонить по указанному номеру. 

Виды обратного звонка

Обратный звонок бывает двух видов:

• Кнопка. На страницы ресурса помещается заметная кнопка с призывом кликнуть на нее. После клика человек заполняет небольшую форму для обратного звонка (телефон, желаемое время звонка). 

• Всплывающее окно. Появляется поверх просматриваемого контента с призывом заказать обратный звонок. Поводом для появления всплывающего окна служит уход клиента с сайта, долгое нахождение внутри ресурса, открытие определенной страницы сайта и т. д. Этот параметр настраивается индивидуально владельцем сайта. 

Плюсы обратного звонка

С какой целью используют обратный звонок и в чем его преимущества? Давайте разбираться:

• Рост конверсии сайта. Клиенту не нужно искать контакты и вести переписку с работником сайта, не обязательно искать ответы на свои вопросы на сайте ―  это сокращает его путь к покупке.

• Быстрая связь с клиентом. Оперативное реагирование на заявку обратного звонка позволяет быстро связаться и проконсультировать клиента по интересующему вопросу.

• Возможность определить «горячего» клиента. Человек сам проявил заинтересованность в товарах или услугах сайта. Остается лишь профессионально провести его по всей воронке продаж. 

Когда нужен обратный звонок?

Эта функция особенно полезна для сфер бизнеса, предполагающих длительные консультации, например:

• Продажа и аренда недвижимости.

• Услуги юристов.

• Финансовые консультации.

• Медицина.

• Туристические агентства.

• Грузоперевозки.

• Банковские услуги.

Словом, обратный звонок полезен для компаний, чьи потенциальные клиенты нуждаются в голосовом объяснении некоторых аспектов и деталей вашего бизнеса. 

Как добавить обратный звонок на сайт? 

Для всех владельцев сайтов на платформе 1С-UMI мы подготовили простую инструкцию по добавлению функции обратного звонка на свой ресурс.

Кому обратный звонок не нужен?

Ресурсам с молодой аудиторией и понятным для нее продуктом. Это кафе, пекарни, барбершопы, салоны красоты, компьютерные клубы, квесты и т. д. Для этих сайтов вполне хватит и чата, чтобы уточнить какие-то моменты.  

Когда обратный звонок вызывает гнев клиента? 

Иногда использование обратного звонка так раздражает покупателей, что им легче закрыть сайт и поискать другой ресурс. Разберем 3 самые популярные ошибки в  реализации обратного звонка.

1. Назойливая кнопка 

С анимацией кнопки обратного звонка лучше не перебарщивать. Бывает, что она настойчиво бегает за курсором пользователя и это выводит человека из себя. 

2. Размер

Кнопка обратного звонка не должна перекрывать содержимое страницы сайта. Чересчур объемный призыв оставить заявку вызывает лишь обратное желание — побыстрее покинуть сайт.

3. Преждевременный показ

Если используется всплывающее окно для показа обратного звонка, то важно правильно выбрать момент. Показывать клиенту обратный звонок в первые 10 секунд присутствия на сайте — заранее проигрышный вариант. Пользователь не успел толком понять, что за сайт и как устроена навигация, а ему уже что-то продают или предлагают.  

Итого

Обратный звонок — эффективный способ общения с клиентами, если ваша целевая аудитория — взрослые люди и товар или услуга подразумевают длинные консультации. Не перекрывайте основной контент кнопкой обратного звонка и рассчитывайте время, прежде чем показать всплывающее окно с формой обратного звонка. Читайте новые статьи каждую неделю в блоге 1С-UMI. 

Кнопка «Оставить заявку» для сайта: главный конвертер лидов

 

Из этого материала вы узнаете:

• Для чего нужна кнопка «Оставить заявку»

• Чем еще может быть полезна кнопка «Оставить заявку»

• Как работает кнопка «Оставить заявку»

• 2 способа самостоятельно сделать кнопку «Оставить заявку» для сайта

• Чек-лист проверки кнопки «Оставить заявку» для одностраничного сайта

• Лучший вариант кнопки «Оставить заявку»

Кнопка «Оставить заявку» – не просто удобная функция, благодаря которой клиент, посетивший ваш сайт, может выбрать удобное время для обратного звонка или связи в мессенджере. Это одна из главных «call to action» кнопок вашего ресурса.

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

Для чего нужна кнопка «Оставить заявку»

Сегодня за счет различных инноваций человек каждую секунду получает большой поток новых данных и сведений. Такое количество информации требует молниеносной обработки, иначе она очень скоро станет устаревшей. В деловых кругах все намного сложнее. От скорости реагирования зависит, как быстро клиент сможет связаться с компанией и не уйти к вашим конкурентам. Для удержания потенциального покупателя и существует кнопка «Оставить заявку».

Услуга «Перезвоним через 30 сек» или виджет «Обратный звонок» становится довольно популярной у интернет-маркетологов. Скрипт настраивается таким образом, что клиенту фирма перезванивает сразу либо тогда, когда он пожелал. Такая система взаимодействия с потребителем позволяет увеличивать его положительное отношение к лендингу. Приложение может быть с различным набором функций. Наиболее простая форма обратного звонка – имя и контактные данные.

Многие спрашивают: «Зачем нужна кнопка «Оставить заявку»? Ответ прост: «Нажимать на нее!». На самом деле яркая и фактурная форма обратного звонка привлекает внимание и вызывает желание нажать на нее, чего нельзя сказать об обычной ссылке. Однако кнопки сайта должны быть выполнены в едином стиле и цвете, быть информативными. Иначе посетитель просто уйдет с вашей страницы, не поняв, для чего нужны все эти разноцветные моргающие вставки.

Необходимо разумно располагать кнопки. Лучше всего использовать одну или две в видимой части экрана. Также потребитель должен сразу понимать, для чего нужна тот или иной виджет на вашем сайте.

Чем еще может быть полезна кнопка «Оставить заявку»

В переводе с английского языка «callback» – обратный звонок. Его форма является механизмом в онлайн-маркетинге и позволяет посетителям лендинга пообщаться с представителем фирмы. Не получится установить данный элемент и не вспоминать о нем.

Покупатель нажал на кнопку «Оставить заявку». Необходимо, чтобы программы быстро отреагировала, так как клиент ждет звонка. Иначе нет пользы от такой формы, даже в бесплатном варианте. Мало найдется посетителей, которые оставят контактные данные и будут ждать долгое время звонка из компании. К примеру, вам сказали, что пиццу ждут в ближайшее время. Обратный звонок даже спустя 10 минут уже бесполезен.

Установка формы обратного вызова необходима для того, чтобы не потерять расположения старых заказчиков и увеличить количество продаж новым клиентам. Если нет многоканального телефона, то человек не слушает длинные гудки, а получает знак внимания фирмы.

Помимо удобства клиентов, с callback компания может перезвонить посетителю сайта, если:

• обратный звонок пришел после окончания рабочего дня;
• оператор был занят и не смог принять вызов;
• заказчик сам отказался от вызова и пр.

Как работает кнопка «Оставить заявку»

Нажимая на кнопку вызова, расположенную на лендинге, посетитель видит форму, в которой нужно указать контактные данные. Далее оператор получает сообщение о заказанном обратном звонке и подтверждает, что может пообщаться с клиентом. С помощью системы идет соединение специалиста с заказчиком. Такая форма заявки относится к высокому уровню сервиса и, вероятнее всего, является платной.

Бесплатный вариант кнопки «Оставить заявку» вы можете установить своими силами. Она будет работать, но функций будет мало. В данной версии как только посетитель указал номер телефона, сразу пошел звонок ему и оператору одновременно. Если у вас установлено автоматическое приветствие, превышающее время дозвона до клиента, то возникают затруднения. Абонент не может понять, кто с ним разговаривает. Специалист не располагает данными о заявителе. Количество таких неудавшихся вызовов велико.

Данный виджет подходит для проведения проверки. Вы сможете понять, нужна сайту такая кнопка или установка этого элемента бесполезна. Возможно, клиентам и не понадобится обратный звонок.

2 способа самостоятельно сделать для сайта кнопку «Оставить заявку»

Кнопка «Оставить заявку» бывает двух видов, каждый их которых имеет свой HTML-тег:

• Кнопка-ссылка. Она предлагает посетителю попасть на другую страницу. К примеру, чтобы внести данные в форму заявки. Наиболее удобен для этого тег <a>.
• Кнопка-действие. С ее помощью можно выполнять различные действия на лендинге – открыть модальное окно, отправить форму и пр. Применяются теги <input> или <button>. Наиболее удобен второй, так как в этом случае больше возможностей при настройке.

Оба вида внешне могут и не отличаться (за счет CSS). Однако главный атрибут тега <a> – это href (цель ссылки). Без него браузер не считает тег <a> ссылкой, а курсор при наведении на кнопку не изменяется на pointer. Изменить ситуацию можно с помощью «костылей»:

a {

cursor: pointer;

}

Или:

<a href=»#»>Кнопка</a>

Также атрибут href является невалидным для тега <button>. Значит, не нужно его использовать как кнопку для ссылки. При этом можно с помощью каких-нибудь «костылей» сделать что-то типа:

<button onClick=»javascript:window. location.href=’http://example.com’;»></button>

Однако можно упростить процесс.

Применяем <a>, если кнопка выполняет функцию перехода на страницу, и <button> для других случаев.

Чек-лист проверки кнопки «Оставить заявку» для одностраничного сайта

Кнопка «Оставить заявку» и фотографии продукции в интернет-магазине являются важными деталями веб-страницы. С ними клиенты контактируют больше всего. При этом также важны заголовок, призыв к действию, перечень выгод и дизайн кнопки. Все эти элементы обязательно должны проходить проверку. Предлагаем вам несложный чек-лист для тестирования дизайна кнопок на лендинге.

Кнопка должна быть видна на первом экране без прокрутки.

Она должна быть заметна на стартовой странице. Тогда посетитель сможет быстро сориентироваться в дальнейших действиях – оставить заявку, получить консультацию, заказать обратный звонок и пр. У вас лишь 3 секунды, чтобы клиент заинтересовался содержанием сайта и остался, а не ушел к вашим конкурентам.

Модель AIDA поможет построить простой порядок действий на вашем лендинге:

• захватывающий заголовок;
• заманчивые выгодные условия;
• интересные акции, которые ограничены временным промежутком;
• форма заявки и выделяющаяся кнопка подтолкнут посетителя к действию.

Кнопку «Оставить заявку» следует располагать по направлению взгляда клиента (F-образная траектория): под заголовком, перечнем бонусов и призывом к действию.

При размещении изображения какого-либо персонажа рядом с заявкой нужно, чтобы он смотрел на нее.

У кнопки должен быть уникальный цвет.

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

• индивидуальной – цвет должен отличаться, а не сливаться с остальными дизайнерскими деталями лендинга;
• контрастной – лучше сочетать темный фон страницы и светлый тон кнопки или наоборот;
• объемной – следует сделать ее визуально выпуклой за счет различных приемов, таких как тень, градиент.

Кнопка должна выглядеть как кнопка.

Это наиболее простой пункт в чек-листе. Однако многие не соблюдают его и допускают одинаковые оплошности при оформлении внешнего вида кнопки:

• очень длинная и располагается по всей ширине контента веб-страницы;
• при наведении на нее курсора никаких изменений не происходит.

Кнопка «Оставить заявку» должна быть объемной, то есть выглядеть так, чтобы появлялось желание нажать на нее.

Кнопка дублируется по всей длине посадочной страницы.

На главной странице целесообразнее располагать некоторое количество функциональных вариантов. В каждом поместить различные призывы к действию. Можно определить наиболее простую модификацию для посетителей и расположить ее на стартовой странице, а потом повторять через два экрана лендинга. В конце веб-страницы обязательно расположите кнопку для заявки (до «подвала» сайта).

Кнопки не должны конкурировать друг с другом.

При возникновении необходимости выбора между двумя функциями, следует отдать предпочтение той, которая более значима. Далее сделайте так, чтобы при восприятии она сразу бросалась в глаза. В приведенном примере основным является «Выбрать рюкзак», а в дополнении идет «Задать вопрос»:

На картинке видно, что целевая кнопка выделена красным цветом, а дополнительная – почти сливается с фоном. Она становится активной, если курсор мыши расположить на ней.

С помощью EnvyBox для кнопки «Оставить заявку» можно применить функцию «Обратный звонок».

С помощью «Обратного звонка» у вас в 3,8 раз

• возрастет число звонков с интернет-страницы, как только будет произведена установка сервиса;
• уменьшатся расходы, так как увеличится количество обращений;
• будут сохранены записи общения с заказчиками в Telegram, на почте, в личном кабинете;
• повысится благожелательность со стороны посетителя за счет того, что вы точно знаете, когда он вновь зашел на сайт;
• увеличится лояльность заказчиков, так как звонок вам для них ничего не стоит.

Процесс функционирования «Обратного звонка» на сайте:

1. Устанавливаете код на сайт.

   

   При помощи видеоинструкции вы быстро выполните установку. Также можно обратиться к вебмастеру или к нам.

2. На Вашем сайте появится всплывающее окно.

   Перед клиентом, попавшим на сайт, появляется всплывающее окно. В нем он может указать свои контактные данные.

3. Сервис автоматически звонит менеджеру и клиенту.

   Программа автоматически одновременно делает дозвон заказчику и производит соединение с сотрудником. Процедура занимает около 17,5 секунды.

4. Вам поступит заявка.

   В заявке будут данные о клиенте (имя, область, UTM-метки и т. д.) и запись разговора с сотрудником вашей фирмы.

Внешний вид «Обратного звонка»

«Обратный звонок» имеет следующие плюсы:

1. Функция «Удиви клиента».

   Если на сайт зашел клиент, который оставил заявку на обратный звонок, то виджет «узнает» его. Вам на почту сразу придет вся необходимая информация: имя человека, запись прошлого разговора. Самое время позвонить и удивить посетителя. Такие ситуации повышают процент конверсии.

2. Озвучка UTM-метки.

   Кнопка «Обратный звонок» в момент соединения с заказчиком выдаст вашему сотруднику utm-метки. Например, имя клиента, запрос, сайт, откуда идет звонок и пр.

3. Интеграция с аналитикой.

   За счет объединения сервиса с Яндекс.Метрикой и Google.Analytics вы можете контролировать результативность «воронки продаж» через обратный звонок.

4. Настройка геофильтра.

   Сделайте виджет видимым для тех, кто находится с вами в одном регионе. Так вы будете экономить на звонках клиентам из других областей.

5. Интеграция с CRM-системой.

   CRM-система сохранит все поступившие заявки и записи разговоров. На каждого клиента будет свой файл с данными.

6. Привязка к любой форме.

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

7. Интеграция с Telegram.

   В выходные дни с помощью виджета можно получать сообщения о заказах на обратный звонок. В уведомлении будет указана вся необходимая информация. В любой момент вы сможете самостоятельно поработать с лидами.

Дополнительные «фишки»:

1. Ваш собственный дизайн.

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

2. Звонки на IP-телефонию.

   IP-телефония поможет экономить на звонках. Минута разговора будет стоить в два раза дешевле. Установка специальной программы на телефон позволит совершать звонки с помощью IP-телефонии.

3. Разные телефоны для городов.

   Если офисы вашей компании расположены в разных городах, то Envybox настраивается таким образом, что программа самостоятельно распознает, откуда поступил звонок и перенаправляет его в соответствующий филиал.

4. Несколько пользователей.

   Можно создать каждому пользователю личный доступ: менеджеру будут поступать в обработку только лиды, бухгалтеру – финансовые вопросы.

5. Информация о клиенте.

   Envybox направляет данные менеджеру сразу после заказа звонка. Он видит информацию о заказчике. К примеру, имя, город, поисковую фразу и пр.

6. Подключение своей кнопки.

   Если на вашем сайте есть кнопка «Заказать звонок или услугу», то вы можете очень быстро присоединить к ней Envybox. Тогда посетитель страницы, нажав на кнопку, сразу сможет заказать обратный звонок.

Кнопка | Dash for Python Documentation

html.Button — это компонент для отображения выбираемой пользователем кнопки.

Примеры

Ниже приведены несколько примеров использования.

Дополнительные примеры минимальных приложений Dash, использующих html.Button , см. в указателе примеров сообщества.

Кнопка Базовый пример

Пример кнопки по умолчанию без дополнительных свойств
и n_clicks в обратном вызове. н_кликов — это целое число, представляющее
количество нажатий кнопки. Обратите внимание, что исходное значение
равно None .

Введите значение и нажмите «Отправить».

Определение того, какая кнопка была изменена с помощью

dash.ctx

В этом примере используется свойство
dash.ctx , чтобы определить, какой ввод был изменен.

Примечание. dash.ctx доступен в Dash 2.4 и более поздних версиях. dash.callback_context обеспечивает аналогичную функциональность в более ранних
версий Dash.

Свойства кнопки

Получите доступ к этой документации в своем терминале Python с помощью:
«`python

help(dash.html.Button)
«`

Наша рекомендуемая среда IDE для написания приложений Dash — это Dash Enterprise
Data Science Workspaces,
, которая имеет поддержку ввода для свойств компонентов Dash.
Узнайте, использует ли ваша компания
Dash Enterprise.

дочерние элементы ( список или компонент тире в единственном числе, строка или число ; необязательно):
дочерние элементы этого компонента.

id ( строка ; необязательно):
Идентификатор этого компонента, используемый для идентификации компонентов тире в обратных вызовах
. Идентификатор должен быть уникальным для всех компонентов
приложения.

n_clicks ( число ; по умолчанию 0 ):
Целое число, представляющее количество раз, когда этот элемент имеет
был нажат.

n_clicks_timestamp ( число ; по умолчанию -1 ):
Целое число, представляющее время (в мс с 1970 года), когда изменилось
n_clicks. Это можно использовать, чтобы узнать, какая кнопка была изменена
в последний раз.

ключ ( строка ; необязательно):
Уникальный идентификатор компонента, используемый для повышения производительности с помощью
React.js при рендеринге компонентов См.
https://reactjs.org/docs/lists-and -keys.html для получения дополнительной информации.

autoFocus ( значение, равное: «autoFocus», «autofocus» или «AUTOFOCUS» | логическое значение ; необязательно):
Элемент должен быть автоматически сфокусирован после загрузки страницы.

disabled ( значение, равное: «отключено» или «ОТКЛЮЧЕНО» | логическое значение ; необязательно):
Указывает, может ли пользователь взаимодействовать с элементом.

форма ( строка ; необязательно):
Указывает форму, которая является владельцем элемента.

formAction ( строка ; необязательно):
Указывает действие элемента, переопределяющее действие, определенное в

.

formEncType ( string ; необязательный):
Если кнопка/ввод является кнопкой отправки (type=”submit”), этот атрибут
устанавливает тип кодировки, который будет использоваться при отправке формы. Если указан этот атрибут
, он переопределяет атрибут enctype владельца формы кнопки
.

formMethod ( string ; необязательно):
Если кнопка/ввод является кнопкой отправки (type=»submit»), этот атрибут
устанавливает метод отправки, который будет использоваться при отправке формы (GET, POST,
и др.). Если этот атрибут указан, он переопределяет атрибут метода
владельца формы кнопки.

formNoValidate ( значение, равное: «formNoValidate», «formnovalidate» или «FORMNOVALIDATE» | логическое значение ; необязательно):
Если кнопка/ввод является кнопкой отправки (type=»submit»), этот логический атрибут
указывает, что форма не должна проверяться при ее отправке. Если этот атрибут указан, он переопределяет атрибут novalidate
владельца формы кнопки.

formTarget ( строка ; необязательно):
Если кнопка/ввод является кнопкой отправки (type=»submit»), этот атрибут
указывает контекст просмотра (например, вкладка, окно или встроенный
), в котором будет отображаться ответ, полученный после
отправки формы. Если этот атрибут указан, он переопределяет целевой атрибут
владельца формы кнопки.

имя ( строка ; необязательно):
Имя элемента. Например, используется сервером для идентификации полей
при отправке формы.

тип ( строка ; необязательно):
Определяет тип элемента.

значение ( строка ; необязательно):
Определяет значение по умолчанию, которое будет отображаться в элементе на странице
загрузки.

accessKey ( строка ; необязательно):
Сочетание клавиш для активации или добавления фокуса к элементу.

className ( строка ; необязательно):
Часто используется с CSS для стилизации элементов с общими свойствами.

ContentEditable ( строка ; необязательно):
Указывает, доступно ли для редактирования содержимое элемента.

contextMenu ( строка ; необязательно):
Определяет идентификатор элемента

, который будет служить контекстным меню
элемента.

dir ( строка ; необязательно):
Определяет направление текста. Допустимые значения: ltr (слева направо) или
rtl (справа налево).

перетаскиваемый ( строка ; необязательно):
Определяет, можно ли перетаскивать элемент.

скрытый ( значение, равное: «скрытый» или «СКРЫТЫЙ» | логическое значение ; необязательно):
Предотвращает рендеринг данного элемента, сохраняя при этом дочерние элементы,
например. элементы сценария, активные.

lang ( строка ; необязательно):
Определяет язык, используемый в элементе.

роль ( строка ; необязательно):
Определяет явную роль элемента для использования вспомогательными технологиями
.

Проверка орфографии ( строка ; необязательно):
Указывает, разрешена ли для элемента проверка орфографии.

стиль ( dict ; необязательный):
Определяет стили CSS, которые переопределяют ранее установленные стили.

tabIndex ( строка ; необязательно):
Переопределяет порядок табуляции браузера по умолчанию и следует указанному вместо него
.

title ( строка ; необязательно):
Текст, который будет отображаться во всплывающей подсказке при наведении курсора на элемент.

loading_state ( dict ; необязательный):
Объект, который содержит объект состояния загрузки, поступающий от dash-renderer.

loading_state — это словарь с ключами:

• имя_компонента ( строка ; необязательно):
  Содержит имя загружаемого компонента.

• is_loading ( логическое значение ; необязательно):
  Определяет, загружается компонент или нет.

• prop_name ( строка ; необязательно):
  Указывает, какое свойство загружается.

JavaScript на практике: создание динамических кнопок с помощью JavaScript, HTML и CSS

Как правило, нам нужно всего несколько строк кода, чтобы создать кнопку в HTML, довольно просто, не так ли? Тем не менее, самое интересное при работе с внешним интерфейсом — это фактическое применение JavaScript, чтобы сделать вещи «динамическими».

В этой статье мы будем практиковаться в написании JavaScript вместе с HTML и CSS для создания динамической кнопки. Концепция довольно проста, но с помощью этой небольшой проблемы я хочу продемонстрировать некоторые важные концепции DOM, создание и стилизацию кнопки с помощью HTML и CSS, как обрабатывать события и делать вещи динамичными с помощью JavaScript. Обратите внимание, что вы должны иметь базовые знания HTML, прежде чем идти дальше. Вот несколько полезных ресурсов для изучения HTML и CSS, если вы этого не сделали:

• Изучайте HTML и CSS в веб-документах MDN
• Изучайте HTML и CSS из W3Schools
• Изучайте HTML и CSS из TutorialsPoint

Содержание

Шаблоны и визуализированные коды

7

0 Basic Format Раньше вы работали с JavaScript, HTML и CSS одновременно, вот шаблон, который поможет вам визуализировать, как писать код JavaScript и CSS в файле HTML:

Как и в приведенном выше шаблоне, вы можете писать CSS внутри теги на и код JavaScript в теги внутри HTML body . — это не тег, это похоже на грамматику, которая отмечает, что это HTML5.

Примечание: Комментарии HTML начинаются с . Эти комментарии не будут отображаться на веб-странице, но мы сможем прочитать их, если просмотрим исходный код страницы. Для контента между тегами, который содержит фактический код (т. е. стиль  и скрипт ), мы заключаем комментарии между /* и */ .

HTML, CSS и JavaScript в отдельных файлах

Вместо того, чтобы записывать HTML, CSS и JavaScript в один и тот же файл, вы должны отделить их от отдельных файлов, чтобы облегчить обслуживание, редактирование, минимизацию и уменьшить громоздкость, которую выполняет один файл. файл может иметь.

Представим, что у нас есть 3 файла: index.html , style.css и script.js :

• Указав  css" type="text/css"> , где style.css  – это путь к файлу .css  , в разделе head (т. е. между тегами и ) мы указываем документу использовать таблицу стилей в месте, указанном атрибутом href .
• Поставив  ), мы говорим, что мы хотим запустить скрипт, используя код JS в месте, указанном в атрибуте src .

Кнопки HTML

Мы используем тег button в HTML-файле для создания кнопки с некоторыми из следующих необязательных атрибутов:

• id : уникальный идентификатор кнопки на странице
• class : класс(ы) CSS, используемые для стиля кнопки

Текст, заключенный между открытием кнопки ( ) и закрытием ( < /button> ) теги — это метка, которая будет отображаться на кнопке. Мы также можем получить доступ к этому тексту, используя свойство innerHTML объекта кнопки JS. (Каждый элемент HTML имеет свойство innerHTML  , которое определяет как HTML-код, так и текст, находящийся между открывающим и закрывающим тегами этого элемента. Путем изменения элемента0072 innerHTML после некоторого взаимодействия с пользователем вы можете сделать намного больше интерактивных страниц).

Основной синтаксис HTML-кнопки выглядит следующим образом:

Click Me

На изображении ниже показаны несколько файлов HTML-кода и содержимое, которое они создают:

Вы только что создали кнопку с помощью HTML! Теперь переходим к основной части!

Кнопки JavaScript

Во-первых, давайте рассмотрим следующий код:

Теперь давайте пройдемся по тому, что он делает (если вы еще не привыкли к DOM и обработчику событий, проведите небольшое исследование, чтобы сначала почувствовать вкус):

1. document. createElement('Button')  создает объект-кнопку ( createElement('Button') ), на который ссылается имя переменной .
2. clickMeButton.id = 'myButton'  задает идентификатор кнопки равным myButton .
3. clickMeButton.innerHTML = 'Нажми меня!'  устанавливает внутренний HTML-код кнопки (т. е. метку, которую мы обычно видим между HTML-тегами кнопки  ) на «Нажми меня» .
4. clickMeButton.style.background = '#3dfe3a'  устанавливает зеленый цвет фона кнопки. Чтобы стилизовать несколько атрибутов нашей кнопки с помощью класса стиля, мы должны вместо этого написать clickMeButton.className = 'myStyleClassName' .
5. document.body.appendChild(clickMeButton) добавляется к телу документа как дочерний элемент.

Допустим, мы хотим изменить метку элемента кнопки HTML с идентификатором    myButton . Мы просто используем метод getElementById и передаем id нужного элемента в качестве аргумента:

Это еще один пример кода JavaScript для создания кнопки. Он создаст несколько изображений ниже: Код JavaScript, мы полностью заменяем работу кода HTML, а также можем манипулировать цветом кнопки через атрибут style.background .

Стилизация кнопок с помощью CSS

Во-первых, мы хотим определить ограничения стиля для нашей кнопки. Мы можем сделать это любым из двух способов, указанных ниже.

1. Использование селектора идентификатора

В случаях, когда мы хотим применить стиль к одному элементу на HTML-странице, мы используем селектор идентификатора CSS   с синтаксисом  #identifier  (где      id элемента для стиля на странице). Затем за ним следует пара фигурных скобок, которые содержат желаемые ограничения стиля для всех элементов внутри контейнера, имеющего этот идентификатор. Например:

Обратите внимание, что мы должны поместить наш CSS внутри 9Теги 0072 стиля в разделе заголовка .

Давайте посмотрим, что происходит, когда мы стилизуем элемент с помощью id :

Мы можем получить доступ к HTML-идентификатору для управления внутри кода CSS с помощью #yourId , поэтому кнопка становится зеленой из-за этого. И вы также можете увидеть указатель вашего триггера на этой кнопке.

2. Использование селектора классов

Еще один способ применить один и тот же стиль к нескольким элементам — синтаксис класса CSS .className  (где  это имя нашего класса). Затем за ним следует пара фигурных скобок, которые содержат желаемые ограничения стиля для всех элементов этого класса. Например:

Давайте посмотрим, что происходит, когда мы стилизуем любой элемент с помощью класса   :

Вы можете видеть, что мы можем сделать то же самое, когда мы обращаемся к элементу класса CSS для управления стилем элементов. Чтобы получить доступ к классу CSS, вы используете .className , и вместо зеленого цвета, как раньше, я изменил его на красный. С буквально «красным» цветом. Вы можете изменить цвет CSS тремя способами: Название цвета , например, красный, синий, зеленый и т. д. (который я только что использовал), Шестнадцатеричный код #RRGGBB, например #FF6347 (который я использовал в нескольких примерах выше), и десятичный код (R,G,B), например rgb(255,99,71). А также можно туда же поставить id и class .

Объединение HTML и JavaScript

Мы уже знаем, как создать кнопку в HTML и CSS. Теперь давайте объединим их вместе:

Найдите время, чтобы прочитать следующий код:

Когда вы закончите с этим, отобразите этот код выше и посмотрите результат:

Обратите внимание, что:

• Все три кнопки имеют фон цветовая стилизация кнопки  класс, но каждая кнопка имеет дополнительный стиль шрифта, характерный для ее отдельного id .
• Исходная текстовая метка для htmlButton2 была Я кнопка HTML! , но мы использовали JavaScript, чтобы изменить его, чтобы сказать Я модифицированная HTML-кнопка!  вместо этого.

Click Events

Когда пользователь нажимает кнопку, мы называем это событием click . Давайте рассмотрим использование onclick и addEventListener для запроса действия в ответ на событие клика.

Использование

onclick

Событие onclick возникает, когда пользователь щелкает элемент.

Теперь воспользуемся некоторыми возможностями JavaScript. Рассмотрим следующий код:

На изображении ниже показано, как выглядит кнопка до и после нажатия:

ДО:

ПОСЛЕ:

Использование

addEventListener

Метод document.addEventListener() прикрепляет обработчик событий документ.

Рассмотрим следующий код:

На изображении ниже показано, как выглядит кнопка до и после ее нажатия:

ДО:

ПОСЛЕ:

Заключение

В этой статье мы научились создавать кнопка с помощью JavaScript, HTML, а также стилизация кнопки с помощью CSS. Помните, что вы можете создавать документы HTML, CSS и JavaScript в одном и том же файле или в отдельных файлах. События происходят, когда пользователи что-то делают с вашей сетью, например, щелкают ссылку, прокручивают мышь, вводят что-то и т. д. addEventHandle и onClick — это некоторые из способов, которыми вы можете создать событие на JavaScript через DOM (объектная модель документа).

Элемент Button – PennController для IBEX

button.click

getButton(id).click() (начиная с PennController 1.2)

Имитирует щелчок по кнопке.

Пример:

 newKey(" ")
    .настройки.обратный вызов(
        получитькнопку("продолжить")
            .клик()
    )
,
НоваяКнопка("Продолжить", "Продолжить")
    .Распечатать()
    .wait() 

Создает элемент Key, связанный с пробелом, который при каждом нажатии имитирует щелчок на продолжить кнопка добавлена ​​под ней, затем будет ждать, пока кнопка не будет нажата (или, таким образом, пока не будет нажата клавиша пробела), прежде чем продолжить.

button.settings.callback

getButton(id).settings.callback( command )

или getButton(id).settings.callback( command1, command2 )

Будет выполнять команду(ы) всякий раз, когда кнопка нажата.

Пример:

 newVideo("скейт", "скейт.mp4")
    .Распечатать()
,
новаяКнопка("(Повторное)воспроизведение")
    .настройки.обратный вызов(
        получитьвидео("скейт")
            .остановка()
            .играть в()
    )
    .принт() 

Добавляет на страницу видео и кнопку, которая при каждом нажатии запускает или перезапускает воспроизведение видео с начала.

button.settings.log

getButton(id).settings.log()

Добавляет строку в файл результатов при каждом нажатии кнопки.

Пример:

 newButton("слово", "Это слово!")
    . settings.log()
    .Настройки.один раз()
    .Распечатать()
,
новыйАудио("звук", "звук.wav")
    .играть в()
    .ждите() 

Добавляет кнопку на экран, воспроизводит звуковой файл sound.wav и продолжает, когда звук завершится. Кнопку можно нажать только один раз (см. .settings.once ), и если это так, она добавит строку в файл результатов.

button.settings.once

getButton(id).settings.once()

Отключает кнопку сразу после первого нажатия.

Пример:

 newButton("тест", "Это тест!")
    .settings.log()
    .Настройки.один раз()
    .Распечатать()
,
новыйАудио("звук", "тест.mp3")
    .играть в()
    .ждите() 

Добавляет кнопку на экран, воспроизводит звуковой файл test.mp3 и продолжает, когда звук завершится. Кнопку можно нажать только один раз, и если это так, она добавит строку в файл результатов (см. .settings.log).

button.wait

getButton(id).wait()

или getButton(id).wait("first")

или getButton(id).wait( test )

s до кнопки, которую он нажал перед оценкой и выполнением следующих команд.

Если вы вызываете wait("first") , то, если кнопка уже была нажата хотя бы один раз к моменту оценки этой команды, следующие команды оцениваются и выполняются сразу. Если она никогда не была нажата раньше, следующие команды оцениваются и выполняются только после нажатия кнопки.

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

Пример:

 newTextInput("стихотворение", "")
    . settings.before( newText("Фиалки синие, розы красные"))
    .Распечатать()
,
НоваяКнопка("Проверка", "Подтвердить")
    .Распечатать()
    .wait( getTextInput("poem").testNot.text("") ) 

Добавляет на экран поле ввода, перед которым стоит Фиалки синие, розы красные, слева и кнопка с текстом Подтвердите под ним. Работает только при нажатии кнопки и поле ввода не пустое .

standard.print

getElement(id).print()

или getElement(id).print(x,y) (ограниченная поддержка в PennController 1.3, общие с версии 1.4)

2 или

3 getElement(id).print(x,y,canvas) (ограниченная поддержка в PennController 1.3, общая с версии 1.4)

Добавляет содержимое элемента на экран. Это не влияет на невизуальные элементы, такие как чисто интерактивные элементы Selector.

Начиная с PennController 1.3, вы можете передавать значения x и y для печати элемента в определенной позиции на странице или в элементе Canvas, если вы передаете одно из них (или имя элемента Canvas) в качестве третьего параметра. Вы можете использовать любой формат координат CSS для x и y или специальные строковые значения, соответствующие соответствующим форматам «слева|в центре|справа в …» и «вверху|посередине|внизу в …». Обратите внимание, что x и y не поддерживаются для элементов Audio, Canvas, Scale, TextInput, Video и Youtube в PennController 1.3; обратите также внимание, что элементы, добавленные с помощью .settings.before и .settings.after, путаются с пропорциональными координатами.

standard.refresh

getElement(id).refresh() (начиная с PennController 1.1)

Повторно вызывает команду print для элемента, оставляя его там, где он был напечатан последним.

Эта команда в первую очередь полезна, если какая-то эстетическая команда не вступает в силу, пока не будет вызвана print , но вы не хотите вызывать print , потому что ее вызов, когда вам нужно, чтобы эстетическая команда вступила в силу, приведет к нежелательному перемещению элемента .

ПРИМЕЧАНИЕ: PennController 1.1 неправильно обрабатывает эту команду и систематически содержит ошибки (черновик)

Пример:

новое изображение ("смайлик", "ya.png")
,
новыйКанвас("мойКанвас", 100, 100)
    .settings.css («граница», «сплошной черный 1px»)
    .настройки.центр()
    .settings.add("центр на 50%", "центр на 50%", getImage("смайлик"))
    .Распечатать()
,
newButton("изменить размер", "изменить размер изображения")
    .Распечатать()
    .ждать()
,
получитьИзображение("смайлик")
    .settings.size( 64, 64 )
,
получитьканвас("мойканвас")
    .обновить()
 

Печать смайлика в центре холста и добавление кнопки под холстом. После нажатия кнопки размер смайлика изменяется до 64 × 64, и без обновления смайлик больше не будет выравниваться по центру на холсте. Вызов print на холсте правильно отцентрирует изображение, но он переместит холст под кнопку. Поэтому решение состоит в том, чтобы вызвать Refresh (или снова вызвать команду настроек add на холсте).

standard.remove

getElement(id).remove()

Удаляет элемент с экрана. Это не влияет на невизуальные элементы, такие как чисто интерактивные элементы Selector.

Обратите внимание, , что это не оставляет места, где элемент ранее был на странице (это действительно удаление элемента, а не просто скрытие его).

Пример

newButton("Нажми на меня", "Нажми на меня")
    .Распечатать()
    .ждать()
    .удалять()
 

Добавляет кнопку с надписью Click me на экран и удаляет ее после нажатия.

standard.settings.after

getElement(id).settings.after( getElement(id))

Добавляет содержимое справа от элемента.

Пример:

новое изображение ("плохое", "нет. png")
,
новое изображение ("хорошо", "ya.png")
,
newText("левая метка", "Плохо")
    .settings.before(getImage("плохо"))
,
newText("Правильная метка", "Хорошо")
    .settings.after(getImage("хорошо"))
,
newScale("Правосудие", 5)
    .settings.before(getText("левая метка"))
    .settings.after(getText("правильная метка") )
    .Распечатать()
    .ждать()
 

Создает два элемента изображения и два текстовых элемента и печатает 5-балльную шкалу радиокнопок, где текст Bad предшествует изображению no.png слева, а текст Good следует за изображением ya.png справа.

standard.settings.before

или getElement(id).settings.before( getElement(id))

Добавляет некоторое содержимое слева от элемента.

Пример:

новое изображение ("плохое", "нет.png")
,
новое изображение ("хорошо", "ya.png")
,
newText("левая метка", "Плохо")
    . settings.before(getImage("плохо"))
,
newText("Правильная метка", "Хорошо")
    .settings.after(getImage("хорошо"))
,
newScale("Правосудие", 5)
    .settings.before(getText("левая метка"))
    .settings.after(getText("правильная метка") )
    .Распечатать()
    .ждать()
 

Создает два элемента изображения и два текстовых элемента и печатает 5-балльную шкалу радиокнопок, где текст Bad предшествует изображению no.png слева, а текст Good следует за изображением ya.png справа.

standard.settings.bold

getElement(id).settings.bold()

Делает любой текст в элементе выделенным жирным шрифтом.

Пример:

newText("предупреждение", "ПРИМЕЧАНИЕ: этот текст является предупреждением!")
    .настройки.полужирный()
    .settings.курсив()
    .settings.color("красный")
    .Распечатать()
 

Печатает текст жирным шрифтом, курсивом и красным цветом.

standard.settings.center

getElement(id).settings.center()

Делает элемент центрированным по горизонтальной оси.

Пример:

newText("Привет мир", "Привет мир")
    .настройки.центр()
    .Распечатать()
 

Выводит Hello world на экран по центру по горизонтали.

стандарт.настройки.цвет

getElement(id).settings.color("цвет")

Делает любой текст в элементе окрашенным в указанный цвет. Строка "color" соответствует соглашениям CSS (действительны наиболее распространенные имена, такие как "красный" , "синий" , …)

Примечание: если вы хотите изменить цвет фона элемент (скажем, элемент Canvas) используйте .settings.css("фон", цвет) , где цвет — название цвета (например, "зеленый" )

Пример:

newText("предупреждение", "ПРИМЕЧАНИЕ: этот текст является предупреждением!")
    . настройки.полужирный()
    .settings.курсив()
    .settings.color("красный")
    .Распечатать()
 

Печатает текст жирным шрифтом, курсивом и красным цветом.

standard.settings.css

getElement(id).settings.css("styleName", "style")

или getElement(id).settings.css({"имя стиля 1": "стиль 1", "имя стиля 2": "стиль 2"})

Применяет стили CSS к элементу.

Пример:

НовыйТекст("Рамка", "В рамке")
    .settings.css("граница", "сплошной черный 1px")
,
newText("предложение", "Последнее слово в этом предложении")
    .settings.after(getText("frame"))
    .Распечатать()
 

Печатает текст Последнее слово этого предложения обрамлено , а последнее слово ( обрамлено ) обрамлено рамкой с черными границами в 1 пиксель.

standard.settings.cssContainer

getElement(id). settings.cssContainer("styleName", "style")

или getElement(id).settings.cssContainer({"имя стиля 1": "стиль 1", "имя стиля 2": "стиль 2"})

Применяет стили CSS к элемент контейнера.

Это повлияет как на сам элемент, так и на любой элемент-оболочку, добавленный через .settings.before или .settings.after.

Эта команда часто более точно выполняет то, что вы хотите достичь, чем команда .settings.css.

Пример:

 newText("frame", "world")
    .settings.before( новыйтекст("Привет"))
    .settings.css("граница", "сплошной черный 1px")
    .settings.cssContainer («граница», «сплошной красный цвет 1 пиксель»)
    .принт() 

Печатает текст world , которому предшествует текст Hello , и добавляет черную рамку вокруг world и красную рамку вокруг всего текста Hello world .

standard.

settings.disable

getElement(id).settings.disable()

Отключает любую интерактивную функцию элемента.

Примечание: это не препятствует выбору элемента, являющегося частью элемента Selector.

Пример:

newAudio("предложение", "test.mp3")
    .Распечатать()
    .ждать()
,
получить аудио ("предложение")
    .Настройки.отключить()
 

Выводит кнопки для воспроизведения/паузы аудиофайла test_sentence.ogg и отключает эти кнопки после воспроизведения файла.

standard.settings.enable

getElement(id).settings.enable()

Включает любую интерактивную функцию элемента, которая ранее была отключена.

Пример:

newAudio("предложение", "test.mp3")
    . Настройки.один раз()
    .Распечатать()
,
новыйКлюч("секретный ключ", "R")
    .ждать()
,
получить аудио ("предложение")
    .Настройки.включить()
 

Выводит кнопки для воспроизведения/паузы аудиофайла test_sentence.ogg и отключает эти кнопки после воспроизведения файла (см. audio.settings.once).

standard.settings.hidden

getElement(id).settings.hidden() (начиная с бета-версии 0.3)

Делает элемент невидимым. Обратите внимание, что при печати скрытый элемент по-прежнему занимает место на странице, но его содержимое не видно.

Пример:

 newText("инструкция", "Угадай, какой фрукт на картинке ниже")
    .Распечатать()
,
новое изображение («фрукты», «груша.png»)
    .Настройки.скрытый()
    .Распечатать()
,
newButton("Показать", "Показать фрукт")
    .Распечатать()
    .ждать()
,
получить изображение ("фрукты")
    . Настройки.видимый ()
 

Добавляет текст на страницу, пустое место под ним и кнопку под пустым пространством, при нажатии на которую открывается изображение груши.

стандарт.настройки.курсив

getElement(id).settings.italic()

Делает любой текст в элементе выделенным курсивом.

Пример:

 newText("предупреждение", "ПРИМЕЧАНИЕ: этот текст является предупреждением!")
    .настройки.полужирный()
    .settings.курсив()
    .settings.color("красный")
    .Распечатать()
 

Печатает текст жирным шрифтом, курсивом и красным цветом.

standard.settings.left

getElement(id).settings.left()

Делает элемент горизонтально выровненным по левому краю (по умолчанию).

Примечание: слева означает левую часть контейнера элемента, не обязательно левую часть экрана.

Пример:

 newText("helloworld", "Hello world")
    . настройки.право()
    .Распечатать()
,
newButton("left", "Выровнять текст по левому краю")
    .Распечатать()
    .ждать()
,
получитьтекст("привет мир")
    .Настройки.слева()
 

Печатает Hello world на экране, выровняв его по левому краю.

стандарт.настройки.право

getElement(id).settings.right()

Делает элемент горизонтально выровненным по правому краю.

Примечание: право означает право контейнера элемента, не обязательно право экрана.

Пример:

newText("предложение", "Это более длинное предложение")
    .Распечатать()
,
newText("Привет мир", "Привет мир")
    .настройки.право()
    .Распечатать()
 

Печатает Hello world на экране, выровняв по горизонтали вправо.

standard.settings.selector

getElement(id).settings.selector( selectorName )

или getElement(id). settings.selector( getSelector(selectorName) ) (начиная с 5 9007 beta 0.3) Начиная с бета-версии 0.3, Selector добавляет команду .settings.selector ко всем элементам в качестве еще одного метода добавления их в селектор.

Пример:

 newSelector("фигуры")
,
новое изображение («квадрат», «квадрат.png»)
    .settings.selector("фигуры")
,
новое изображение («треугольник», «треугольник.png»)
    .settings.selector("фигуры")
,
newCanvas("формирует холст", 825, 400)
    .settings.add(0, 0, getImage("квадрат"))
    .settings.add(425, 0, getImage("треугольник"))
    .Распечатать()
,
получитьселектор("фигуры")
    .ждать()
 

Добавляет два изображения рядом и ожидает щелчка по любому из них.

standard.settings.size

getElement(id).settings.size(width, height)

Изменяет размер элемента до ширины , ширины пикселей и высоты , высоты пикселей.

Пример:

 newImage("смайлик", "pear.png")
    .настройки.размер(40, 40)
    .Распечатать()
 

Добавляет на экран изображение 40x40px pear.png .

standard.settings.visible

getElement(id).settings.visible() (начиная с бета-версии 0.3)

Делает элемент видимым (снова). Это полезно, если вы ранее скрывали элемент с помощью .settings.hidden .

Пример:

 newText("инструкция", "Угадай, какой фрукт на картинке ниже")
    .Распечатать()
,
новое изображение («фрукты», «груша.png»)
    .Настройки.скрытый()
    .Распечатать()
,
newButton("Показать", "Показать фрукт")
    .Распечатать()
    .ждать()
,
получить изображение ("фрукты")
    .Настройки.видимый ()
 

Добавляет текст на страницу, пустое место под ним и кнопку под пустым пространством, при нажатии на которую открывается изображение груши.

standard.setVar

getElement(id).setVar( varName ) (начиная с бета-версии 0.3)

Сохраняет текущее значение элемента в элементе Var с именем varName (если он существует).

То, чему соответствует текущее значение, зависит от каждого типа элемента:

• Для Аудио элементов, это соответствует метке времени окончания последнего воспроизведения (0, если ни разу не воспроизводилось или воспроизведение никогда не заканчивалось).
• Для элементов Button это соответствует отметке времени последнего щелчка на данный момент (0, если ни разу не был нажат).
• Для элементов Canvas это соответствует количеству элементов, которые он содержит в данный момент.
• Для элементов Function соответствует значению, возвращаемому функцией.
• На Html элементов, это соответствует тому, полностью ли заполнен элемент.
• Для элементов Image это соответствует тому, отображается ли изображение в данный момент.
• Для элементов Key соответствует последней нажатой клавише (пустая строка, если ни одна клавиша не была нажата).
• Для элементов Масштаб соответствует значению последней выбранной опции ( NaN , если до сих пор не было выбрано ни одной опции).
• Для элементов Selector соответствует последнему выбранному элементу ( null , если до сих пор не было выбрано ни одного элемента).
• Для элементов Text соответствует текущему тексту.
• Для элементов TextInput соответствует тексту, который в данный момент находится в поле ввода.
• Для элементов Timer это соответствует тому, истекло ли время таймера.
• Для элементов Tooltip это соответствует тому, проверена ли всплывающая подсказка.
• Для элементов Var соответствует значению элемента.
• Для элементов Video соответствует отметке времени окончания последнего воспроизведения (0, если ни разу не воспроизводилось или воспроизведение никогда не заканчивалось).
• Для элементов VoiceRecorder соответствует последней записи ( undefined если пока нет записи).
• Для элементов Youtube соответствует тому, воспроизводилось ли видео.

Пример:

новая переменная("имя")
,
newTextInput("nameInput", "Как вас зовут?")
    .Настройки.один раз()
    .Распечатать()
    .ждать()
    .setVar("имя")
,
новый текст("привет")
    .settings.before( newText("привет", "привет ") )
    .settings.text(getVar("имя"))
    .Распечатать()
 

Создает элемент Var с именем name и добавляет текстовое поле для ввода имени. Когда клавиша возврата/ввода нажата во время редактирования поля ввода, поле отключается и сохраняется его значение в элементе Var с именем 9.0072 имя . Затем он печатает текст Hello name , где name соответствует значению элемента Var.

button.test.clicked

getButton(id).test.clicked() (начиная с бета-версии 0.3)

Проверяет, была ли кнопка когда-либо нажата ранее.

standard.test.printed

getElement(id).test.printed() (начиная с бета-версии 0.3)

Проверяет, был ли элемент напечатан на странице (и не удалялся ли он с тех пор).

Пример:

 newText("instructions", "Щелкните сверху/снизу, чтобы НЕ печатать это слово")
 .Распечатать()
,
НоваяКнопка("Верх", "Верх")
 .settings.callback(getButton("top").remove() )
 .Распечатать()
,
НоваяКнопка("Нижний", "Нижний")
 .