Как встроить в сайт анимированную SVG иконку Lottie



5/5 - (4 голоса)

Есть два способа: использовать Web-плеер Lottie или встроить его себе. Первый вариант простой и подойдет всем, второй — для чуть более продвинутых пользователей.

С использованием Web Player на стороне LottieFiles

Нам понадобится: файл .json, доступный по ссылке. Как решить: залить его к себе на сайт через панель администратора, FTP или панель хостинга. В целом, ничто не мешает хранить вам файл где-то отдельно от сайта, но это может быть не надежным способом.

  1. Открываем сайт https://lottiefiles.com/web-player
  2. В поле YOUR LOTTIE JSON URL вставьте ссылку на ваш файл
  3. Уберите галочку с пункта Controls
  4. Укажите ширину (Width) и высоту (Height) иконки
  5. Скопируйте код из поля GENERATED CODE (для этого есть удобная кнопка Copy Code, но она работает только если у вас есть аккаунт. Если не хотите регистрироваться, просто скопируйте текст из поля)
  6. Полученный код вставьте, куда вам нужно. Это должна быть страница HTML. Обратите внимание, что некоторые CMS могут игнорировать скрипты внутри записей (статьи, новости)

Установка Web Player к себе на хостинг

Следуйте пошаговой инструкции: https://docs.lottiefiles.com/lottie-player/components/lottie-player/installation

Начать пользоваться!