📦 Документация виджета

Виджет FreeFormApi позволяет легко встраивать формы на любой сайт. Просто скопируйте код и вставьте его в HTML — форма появится мгновенно.

📦 Базовый URL: https://freeformapi.ru/widget.js

📋 Формат: JavaScript

⚠️ Важно: Замените ВАШ_SLUG_ФОРМЫ на реальный slug вашей формы. Slug можно найти в разделе «Мои формы» в личном кабинете.

🚀 Быстрый старт

Скопируйте этот код и вставьте его на свой сайт:

<script src="https://freeformapi.ru/widget.js"
        data-form-slug="ВАШ_SLUG_ФОРМЫ"
        data-mode="popup"
        data-button-text="📋 Открыть форму">
</script>

💡 Виджет автоматически определит вашу форму по slug и покажет её на сайте.

⚙️ Параметры виджета

Параметр	Описание	Обязательный	По умолчанию
data-form-slug	Slug формы	✅ Да	—
data-mode	Режим: `popup`, `embed`, `floating`	❌ Нет	popup
data-button-text	Текст на кнопке	❌ Нет	📋 Открыть форму
data-position	Позиция окна: `bottom-right`, `bottom-left`, `top-right`, `top-left`	❌ Нет	bottom-right
data-theme	Тема: `light` или `dark`	❌ Нет	light

📋 Режимы работы

data-mode="popup"

Кнопка встраивается в контент страницы. При клике открывается модальное окно с формой по центру экрана.

<script src="https://freeformapi.ru/widget.js"
        data-form-slug="ВАШ_SLUG_ФОРМЫ"
        data-mode="popup"
        data-button-text="💬 Написать нам">
</script>

💡

Особенности:

Кнопка находится там, где вы её вставили
Окно открывается по центру экрана
Подходит для опросов и быстрых форм

data-mode="embed"

Форма встраивается прямо в указанное место на странице. Кнопки нет — форма всегда видна.

<div data-ff-embed="ВАШ_SLUG_ФОРМЫ" style="width:100%; height:600px;"></div>
<script src="https://freeformapi.ru/widget.js"
        data-form-slug="ВАШ_SLUG_ФОРМЫ"
        data-mode="embed">
</script>

💡

Особенности:

Форма всегда видна на странице
Подходит для лендингов и страниц услуг
Контейнер div можно разместить в любом месте

data-mode="floating"

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

<script src="https://freeformapi.ru/widget.js"
        data-form-slug="ВАШ_SLUG_ФОРМЫ"
        data-mode="floating"
        data-button-text="📋 Оставить заявку">
</script>

💡

Особенности:

Кнопка всегда видна на экране
Окно открывается поверх страницы
Идеально для обратной связи

🎨 Кастомизация стилей

Вы можете изменить внешний вид виджета, добавив свои CSS-стили после подключения виджета.

<style>
    /* Цвет кнопки */
    .ff-widget-button {
        background: #FF6B35 !important;
        border-radius: 12px !important;
        font-size: 18px !important;
        padding: 16px 28px !important;
    }
    .ff-widget-button:hover {
        background: #E55A2B !important;
    }

    /* Размер окна */
    .ff-widget-iframe.ff-mode-popup {
        width: 520px !important;
        border-radius: 20px !important;
    }

    /* Затемнение */
    .ff-widget-overlay {
        background: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(8px) !important;
    }
</style>

📋 CSS-классы для кастомизации:

.ff-widget-button — кнопка виджета

.ff-widget-button:hover — кнопка при наведении

.ff-widget-iframe — окно виджета

.ff-widget-overlay — затемнение фона

.ff-widget-iframe.ff-mode-popup — окно в режиме попап

.ff-widget-iframe.ff-mode-floating — окно в режиме floating

⚙️ Управление через JavaScript

После загрузки виджета вы можете управлять им программно через JavaScript.

// Открыть виджет
window.FreeFormApi['ВАШ_SLUG_ФОРМЫ'].open();

// Закрыть виджет
window.FreeFormApi['ВАШ_SLUG_ФОРМЫ'].close();

// Переключить виджет (открыть/закрыть)
window.FreeFormApi['ВАШ_SLUG_ФОРМЫ'].toggle();

💡 Используйте эти методы для интеграции с вашими кнопками или событиями.

📄 Полные примеры

HTML-страница с виджетом:

<!DOCTYPE html>
<html>
<head>
    <title>Мой сайт</title>
</head>
<body>
    <h1>Добро пожаловать!</h1>

    <!-- Виджет с кастомными стилями -->
    <script src="https://freeformapi.ru/widget.js"
            data-form-slug="MY_FORM"
            data-mode="popup"
            data-button-text="📋 Написать нам">
    </script>

    <style>
        .ff-widget-button {
            background: #6C63FF !important;
            border-radius: 16px !important;
        }
        .ff-widget-button:hover {
            background: #5A52D5 !important;
        }
    </style>
</body>
</html>

❓ Часто задаваемые вопросы

Где взять slug формы?

Перейдите в раздел «Мои формы» → выберите форму → скопируйте значение из поля slug.

Как изменить текст на кнопке?

Используйте атрибут data-button-text="Ваш текст".

Почему виджет не работает?

Проверьте: корректность data-form-slug, подключение через https://, наличие формы с таким slug.

Видит ли владелец формы ответы?

Да, все ответы сохраняются в системе и доступны в разделе «Ответы».

Можно ли использовать несколько виджетов на одной странице?

Да, вы можете разместить несколько виджетов с разными формами на одной странице.

Поддержка

Если у вас возникли вопросы или проблемы с виджетом:

📧 verter@freeformapi.ru 📊 Личный кабинет