К основному содержимому

Как создать индивидуальную кнопку из изображения?

Ticketscloud Team avatar
Автор: Ticketscloud Team
Обновлено более месяца назад

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

Шаг 1

Чтобы создать такую кнопку, понадобится индивидуальный шаблон кода.

<img style="cursor: pointer;" alt="" src="http://u.jimdo.com/www69/o/sdf814121d83460d2/img/i134391c0cc1a647f/1429599331/std/стечкин-фест-купить-билет-stechkinfest.png" data-tc-event="576ceb6f9cb5384b0883755a" data-tc-token="eyJ0eXAiOiJKV1QiLCJpc3MiOiJzdGFnZS50aWNrZXRzY2xvdWQucnUiLCJhbGciOiJIUzI1NiJ9.eyJwYXJ0bmVyIjoiNTRmZDY4NzU5Y2I1Mzg0MjM0MDExZTRiIn0.wcAaC_BYLnms6OvVIJAUsisoEUWJzQgCIszv8UIJajg"> 

Обратите внимание, что в код нужно вставить ссылку на ваше изображение. Каждая ссылка индивидуальна. На скриншоте подчеркнули ссылку, которую нужно заменить на свою.


Шаг 2

Разместите код кнопки, открывающей виджет, на странице через админку вашего сайта.

Шаг 3

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

Для сайтов с использованием html-блоков можно ориентироваться на такой код:

<img style="cursor: pointer; position: absolute; bottom: 400px; left: 380px;" alt="" src="http://u.jimdo.com/www69/o/sdf814121d83460d2/img/i134391c0cc1a647f/1429599331/std/стечкин-фест-купить-билет-stechkinfest.png" data-tc-event="596f8ef1515e3500191c7cd1" data-tc-token="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImlzcyI6InRpY2tldHNjbG91ZC5ydSJ9.eyJwIjoiNTkxOWNhYmU1MTVlMzUwMDE1NjAxYzcwIn0.Jr8IfnYT7kBnB6cvgDonDs5lQH2uEWV7rGCNfhmhttM">

Этот шаблон позволит размещать кнопку внутри блока там, где захотите, просто изменяя цифры в параметрах bottom и left.

Нашли ответ на свой вопрос?