ux_feedback 1.0.1

UX Feedback for Flutter

Flutter UX Feedback

Руководство по настройке и интеграции библиотеки в проект Flutter

Управление формами производится в личном кабинете UX Feedback в который можно зайти по ссылке

В личном кабинете можно создавать, редактировать и запускать формы двух типов:

Slide-in - форма появляется внизу экрана

FullScreen - форма появляется по центру экрана

Версии

Flutter UX Feedback использует нативные версии sdk

Актуальная версия библиотеки для ios - 1.3.0

Актуальная версия библиотеки для android - 1.2.4

Что стоит знать:

1. Для prod и test версий приложения используются разные App_ID (подробнее ниже).

2. Для запуска форм используются события, которые отправляются со стороны приложения. В личном кабинете можно настраивать показ форм через N секунд или N раз, после отправления Event. Также есть настройка “Показывать каждый раз” при отправлении Event.

3. Для настройки дизайна форм, необходимо попросить дизайнера прописать стили

Установка

Добавьте зависимость в файл pubspec.yaml в вашем проекте:

dependencies:
  ux_feedback: 1.0.0

Установите плагин, выполнив в терминале приведенную ниже команду:

$ flutter pub get

Использование

import 'package:ux_feedback/ux_feedback.dart';

final _uxFeedback = UxFeedback();
_uxFeedback.setup(appID: 'App_ID');

Для Android необходимы дополнительные настройки

Android

Перейдите в файл /android/build.gradle и добавьте репозиторий maven в allprojects:

allprojects {
    repositories {
        ...
        maven { url "https://mymavenrepo.com/repo/u4asKGGjymjlKwPIWU0v/" }
    }
}

Далее перейдите в файл /android/app/build.gradle и добавьте зависимость UXFeedback в depencies:

dependencies {
    ...
    // ... other project dependencies
    implementation 'ru.uxfeedback:sdk:1.2.4'
}

Java

android/src/.../MainApplication.java

import ru.uxfeedback.pub.sdk.UXFbSettings;
import ru.uxfeedback.pub.sdk.UXFeedback;

Затем проинициализируйте библиотеку в onCreate:

@Override
public void onCreate() {
    super.onCreate();
    // Получить App_ID можно в панели управления UX Feedback
    UXFeedback.init(this, "App_ID", UXFbSettings.Companion.getDefault());
}

Kotlin

android/src/.../MainActivity.kt

import ru.uxfeedback.pub.sdk.UXFbSettings
import ru.uxfeedback.pub.sdk.UXFeedback

Затем проинициализируйте библиотеку в onCreate:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // Получить App_ID можно в панели управления UX Feedback
    UXFeedback.init(this.application, "App_ID");
}

4. Конфигурирование библиотеки

Для того чтобы задавать нужные параметры работы библиотеки используйте метод setSettings:

_uxFeedback.setSettings(
    UXFeedbackSettings(
        globalDelayTimer: 0, // Время показа между кампаниями
        uiBlocked: true, // Блокировка прочего ui пока показывается модальное окно фидбека
        debugEnabled: true, // Включение режима логирования (про логирование поговорим ниже)
        slideInBlackout: UXFslideInBlackout( // Затемнение фона для форм Slide-in.
            color: Colors.black,
            alpha: 100, // Прозрачность от 0 до 255
            blur: 10, // Размытие от 0 до 25
        ),
        fullscreenBlackout: UXFfullscreenBlackout( // Затемнение фона для форм Fullscreen.
            color: Colors.black,
            alpha: 100, // Прозрачность от 0 до 255
            blur: 10, // Размытие от 0 до 25
        ),
    ),
);

5. Дизайн форм

Для IOS можно использовать метод setTheme

_uxFeedback.setTheme({
    text03Color: Colors.blue,
    inputBorderColor: Colors.grey,
    //... Остальные стили можно посмотреть в гайдах по стилям
})

Для android необходимо использовать setTheme в нативной части приложения. Для этого перейдите к файлу /android/src/.../MainApplication.java

Параметры цветов необходимо взять из файла, который сформируют дизайнеры по ссылке: Гайды по стилям

6. Запуск форм (Events)

Запуск кампании

В необходимом месте приложения вы можете стартовать кампанию вызвав метод startCampaign:

// Допустимые символы для названия события event_name: “Aa-Zz, 0-9, _”. Рекомендуем не использовать пробелы. 
_uxFeedback.sendEvent(event: 'event_name')

Остановка кампании

В необходимом месте приложения вы можете остановить кампанию вызвав метод stopCampaign:

_uxFeedback.stopCampaign();

Если кампания не была показана - ее показ отменится, если была показана - будет закрыта.

7. Отслеживание событий

При необходимости есть возможность отслеживать события как показ кампании пользователю или когда кампания пройдена/скрыта:

_uxFeedback.setCampaignListener(
    onCampaignLoaded: () {
        print('onCampaignLoaded');
    },
    onCampaignShow: (eventName) {
        print('onCampaignShow: $eventName');
    },
    onCampaignFinish: (eventName) {
        print('onCampaignFinish: $eventName');
    },
    onCampaignEventSend: (campaignId, fieldValues) {
        print('onCampaignEventSend: $campaignId, $fieldValues');
    },
    onCampaignTerminate: (eventName, terminatedPage, totalPages) {
        print('onCampaignTerminate: $eventName, $terminatedPage, $totalPages');
    },
);

8. Отправление параметров (Properties)

При необходимости есть возможность отправить дополнительные данные, вместе с ответом, например User_id, Email, Регион или любые другие. Для этого вызовите функцию setParameters:

_uxFeedback.setProperties(
    {
        'User': 21,
        // ...
    }
);