Сделать кнопку как ссылку: ссылки или кнопки — журнал «Доктайп»

Leave a Comment / Разное / By /

Как добавить ссылку на кнопку? — Вопросы и ответы — Джино

Как добавить ссылку на кнопку? — Вопросы и ответы — Джино

  1. В списке меню «Избранные» справа страницы найдите категорию «Кнопки», выберите подходящий виджет и переместите его на страницу.

  2. Нажмите два раза на кнопку и в панели сверху выберите «Ссылку».

  3. В окне «Редактирование ссылки» выберите «Обычную ссылку», в строку «URL» введите HTTP-адрес и нажмите «Сохранить».

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

В этом же окне вы можете выбрать и настроить «Форму обратной связи».

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

Пример: Как подключить SSH

Нашли ошибку в тексте? Выделите ее и нажмите Ctrl + Enter

+7 495 229-30-31 Москва

+7 812 407-17-11 Санкт-Петербург

+7 343 288-50-31 Екатеринбург

Показать все

© Джино, 2003–2023. «Джино» является зарегистрированным товарным знаком.

Лицензия на телематические услуги связи № 150549 от 09.03.2017.
Правовая информацияПолитика конфиденциальности

Карта сайта

Кнопки и ссылки

К каждому ответу бота и к блокам ввода (ввод текста, числа, номера телефона и т.д.) можно добавить одну или несколько кнопок.

Как добавить кнопку на экран?

Чтобы добавить кнопку на экран, нажмите + КНОПКА. Введите текст, который будет написан на кнопке, и нажмите Enter.

Как связать кнопку с нужным экраном?

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

Также можно создать новую кнопку, а затем кликнуть по ней. Новый экран появится автоматически и сразу привяжется к этой кнопке.

Сколько кнопок можно добавить на один экран?

На один экран вы можете добавить до 12 кнопок.

Подробнее о том, как добавить больше 12 кнопок

Как перемещать кнопки?

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

Как работают кнопки?

Рассмотрим такой пример:

Здесь сценарий начинается с экрана «Привет! Чем могу помочь?». На этом экране будут выведены три кнопки: «цены», «статус заказа» и «доставка». Когда пользователь нажмет кнопку «цены», бот перейдет на экран «Цены вы можете посмотреть здесь».

Когда пользователь нажимает кнопку «цены» у себя в канале, ему приходит ответ от бота «Цены вы можете посмотреть здесь». После бот продолжит реагировать согласно прописанному сценарию.

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

В тестовом виджете это будет выглядеть так:

В канале Telegram это будет выглядеть так:

Нажатие кнопки или набор текста?

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

Если пользователь нажимает кнопку «цены», результат получается точно такой же, как если бы пользователь написал слово «цены» самостоятельно:

Пользователь набирает точно такой же текст, который содержится в кнопке:

Поведение бота в этих двух случаях будет одинаковым.

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

Как сочетать использование кнопок и интентов?

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

Добавьте на экран с кнопками блок Интенты.

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

На нашем экране есть кнопки «цены», «статус заказа» и «доставка», поэтому добавим эти интенты:

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

Теперь мы можем связать эти интенты с нужными экранами.

Таким же образом свяжите все интенты с нужными экранами.

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

И самый важный шаг!

Создадим опцию «Любая другая фраза». Этот вариант будет отрабатывать, если пользователь напишет что-то, что не попадет ни в один из интентов. Если «Любая другая фраза» ни с чем не связана, то в нашем случае, если пользователь напишет что-то другое, например «а сколько стоят ваши товары», то бот по умолчанию ответит Извините, непонятно.

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

Это самый главный шаг, который позволит нам запретить боту попадать в «Извините, непонятно».

Типы кнопок

Кнопки в Aimylogic бывают двух типов — обычные кнопки и кнопки-ссылки.

Обычные кнопки

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

У обычных кнопок нет никаких параметров кроме названия кнопки.

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

Также, если у вас есть идентичные друг другу интент и кнопка, то вы можете назначить разную реакцию на них, просто привязав кнопку и интент к разным экранам:

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

Ограничения каналов
  • Канал Битрикс24 не поддерживает кнопки.
  • Канал WhatsApp (прямое подключение) позволяет добавить только 3 кнопки на один экран, а максимальное количество символов в каждой кнопке — 20.
  • Канал WhatsApp Business (через i-Digital) также имеет ряд ограничений.

Кнопки-ссылки

Кнопку-ссылку нельзя связать с экраном. Нельзя сделать так, чтобы по нажатию кнопки-ссылки бот переходил на другой экран. Но в кнопку-ссылку можно добавить URL любого ресурса в интернете. При клике на такую кнопку-ссылку у пользователя откроется страница в браузере.

В канале ВКонтакте кнопки-ссылки не работают. Также кнопки-ссылки не будут отображаться в тех каналах, которые вообще не поддерживают кнопки.

Чтобы добавить кнопку-ссылку, нажмите + КНОПКА, введите текст кнопки, нажмите Enter. Затем нажмите на значок ссылки, вставьте ссылку на ресурс в интернете и нажмите Сохранить.

Автоматически открывать страницы в браузере бот не может ни в одном канале. Пользователь должен обязательно нажать на кнопку-ссылку.

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

Добавление хотя бы одной кнопки-ссылки в канале Telegram превратит все кнопки в инлайн-кнопки.

Инлайн-кнопки

Инлайн-кнопки — это кнопки, которые отображаются под текстом бота, а не под полем ввода.

Инлайн-кнопки не являются третьим видом кнопок в Aimylogic. Они являются особым типом кнопок в каналах Telegram, WhatsApp и Viber.

Подробнее о том, как добавлять Инлайн-кнопки

Вот как инлайн-кнопки будут работать в канале Telegram:

Как записать значение кнопки в переменную?

Чтобы запомнить выбор пользователя, используйте переменную $queryText:

Стилизация кнопок в виде ссылок

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

Оба этих примера представляют собой действия, которые изменяют состояние сервера, и поэтому их следует выполнять с использованием « post ».

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

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

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

Во-первых, разметка: хотя вы можете использовать input type="submit" в качестве элемента отправки, и этот пример будет работать точно так же, элемент кнопки, на мой взгляд, гораздо лучший вариант. Он действительно гибкий и может иметь множество различных элементов, вложенных внутрь, если вы того пожелаете, от простого текста с изображением до заголовков и абзацев. Эта статья о кнопках, написанная Аароном Густафсоном еще в 2006 году, все еще довольно актуальна сегодня и объясняет некоторые способы использования скромного элемента кнопки.

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

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

Базовая страница в этой демонстрации имеет следующие стили, примененные к ссылкам и основной части:

 body {
семейство шрифтов: "Verdana" без засечек;
}
ссылка,
а: посетил {
цвет синий;
}
а: наведите,
фокус,
а: активный {
черный цвет;
}

Затем я добавляю волшебное заклинание, чтобы увеличить ширину в IE для всех кнопок:

 button {
переполнение: видимое;
ширина: авто;
}

Я добавил класс ссылки к кнопке, которую я хочу оформить как элемент ссылки, и основные стили, которые я применяю к этому, — это цвет и семейство шрифтов (кнопка, похоже, наследует системные настройки шрифта), а также как переопределение настроек кнопки по умолчанию в отношении границы, полей, отступов и фона.

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

 кнопка.ссылка {
семейство шрифтов: "Verdana" без засечек;
размер шрифта: 1em;
выравнивание текста: по левому краю;
цвет синий;
фон: нет;
маржа: 0;
заполнение: 0;
граница: нет;
курсор: указатель;
}

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

-moz-user-select: текст;

Вы также можете переопределить все остальные стили кнопок, если таковые имеются.

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

Правило text-decoration: underline фактически применяется к диапазону при наведении или фокусе кнопки. Этот способ более гибкий, если в какой-то момент вы решите добавить или удалить подчеркивание при наведении.

button.link диапазон {
оформление текста: подчеркивание;
}
button.link: диапазон наведения,
button.link:диапазон фокуса {
черный цвет;
}

Естественно, обожаемый всеми браузер , Internet Explorer 6 не будет отображать эффект наведения на вашу ссылку, потому что он не «делает» наведение на произвольные элементы, а только на фактические ссылки. Вы можете имитировать этот эффект с помощью Javascript, если хотите, добавляя класс при наведении и удаляя его при mousout. Другие ограничения этого метода заключаются в том, что выделение текста выглядит немного хитроумным во всех версиях IE.

Мой пример выше очень прост. Если вы ищете кнопку, которая отображается в потоке с текстом в виде ссылки, например, ссылку удаления в элементе корзины покупок в этом примере, вам также необходимо применить « display:inline » как к форме, так и к любому уровню блока. элементы внутри.

Итак, теперь никаких оправданий — идите вперед и используйте правильный метод HTTP!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *