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

Три способа вывести котировки

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

Третьему варианту нужен сервер: ключ фида нельзя держать в браузерном коде, поэтому к потоку подключается ваш бэкенд и отдаёт цены странице. Подробнее - WebSocket или REST и документация.

Пошагово через бесплатный конструктор

Конструктор FinaQuotes работает в браузере без регистрации. Всё, что вы настраиваете, сразу видно в живом превью - это настоящий виджет, а не картинка.

• Выберите виджет на странице виджетов: таблица котировок, бегущая строка, карточка инструмента, обзор рынка или мини-график.
• Добавьте инструменты: поиск по символу или названию, порядок можно менять. В виджет помещается до 30 инструментов; карточка и мини-график показывают один.
• Выберите тему - тёмную, светлую или прозрачную, задайте фон, акцентный цвет и язык виджета.
• Задайте размер. С включённым размером контейнера виджет занимает данную ему ширину и сам сообщает свою высоту; иначе укажите ширину и высоту в пикселях.
• Скопируйте код встройки - это один тег script, который монтирует виджет в iframe.
• Вставьте код туда, где должен стоять виджет, и опубликуйте страницу.

Куда вставлять код

Сниппет работает везде, где можно добавить HTML:

• Обычный HTML или шаблон сайта: внутрь контейнера, где должен стоять виджет, например в раздел рынков или подвал.
• WordPress: в блочном редакторе добавьте блок «Произвольный HTML» и вставьте код. В классической теме - виджет «Произвольный HTML» в сайдбаре или подвале.
• Tilda: блок T123 «HTML-код»; виджет появится на опубликованной странице.
• Webflow: перетащите элемент Embed в секцию и вставьте код. В редакторе Designer видна заглушка, виджет работает на опубликованном сайте.

В каждом конструкторе есть подсказки по платформам именно для этого виджета.

Что показывать на каких страницах

Подбирайте виджет под страницу, а не наоборот:

• Бегущая строка - одна строка в шапке или подвале на всём сайте: рынок на виду и не отнимает места у контента.
• Таблица котировок - раздел рынков, лендинг брокера, страница для инвесторов с корзиной инструментов.
• Карточка инструмента - внутри статьи об одном инструменте, рядом с абзацем о нём.
• Мини-график - сайдбар или страница инструмента, где важнее форма движения, чем точные цифры.
• Обзор рынка - главная или хаб рынков, несколько классов активов на вкладках.

Подробное сравнение - в статье бегущая строка, таблица котировок или график.

Реальное время и задержка на Free

Бесплатные виджеты показывают крипту, валюты и металлы в реальном времени. Биржевые инструменты - акции, индексы, сырьё и облигации - идут с задержкой 15 минут и одной ценой; виджет помечает такие инструменты.

Free обновляется примерно раз в 15 секунд, Pro - раз в 5 секунд. Это частота перерисовки интерфейса, а не возраст данных: бесплатный виджет может показывать живой курс валюты рядом с ценой акции 15-минутной давности. См. котировки в реальном времени и с задержкой.

Подпись «by FinaQuotes»

На бесплатных виджетах внизу стоит небольшая подпись by FinaQuotes - это условие бесплатного тарифа, убрать её нельзя. Если виджет должен выглядеть полностью вашим, white-label версия Pro идёт без подписи.

Производительность и SEO

Виджет в iframe изолирован от страницы: его стили не ломают вашу вёрстку, а ваш CSS - виджет. Цена - ещё одна загружаемая рамка, поэтому не перегружайте страницу виджетами и резервируйте под виджет место, чтобы контент ниже не прыгал при загрузке.

Поисковые системы, как правило, не считают содержимое iframe частью вашей страницы: цены в бесплатном виджете не помогают и не вредят ранжированию, эту работу делает ваш текст. Нативный виджет Pro рендерится внутри вашей вёрстки, и его содержимое - часть страницы. Если котировки иллюстрируют статью, объясните своими словами, что изменилось и почему это важно читателю.

Проверьте виджет после публикации

Несколько минут проверки избавят от вопросов читателей:

• Откройте опубликованную страницу с телефона: таблице с большим числом колонок на узком экране может понадобиться меньше колонок или инструментов.
• Проверьте тему на фоне светлых и тёмных разделов сайта; прозрачная тема берёт фон страницы под собой.
• Если сайт отдаёт заголовок Content-Security-Policy, разрешите widgets.finaquotes.com для скриптов и фреймов, иначе браузер молча заблокирует виджет.
• Убедитесь, что строки акций и индексов помечены как задержанные и страница не выдаёт цены 15-минутной давности за живые.

Когда переходить на Pro

Для редакционных и маркетинговых страниц бесплатного тарифа обычно хватает. Смотрите на Widgets Pro, если:

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

Цена Pro - по запросу, см. цены. Для white-label платформы шире виджетов - white-label рыночные данные.

Частые вопросы