27.06.2024 в 19:43

Crisp Chat: Улучшите свои приложения Flutter с помощью поддержки клиентов в режиме реального времени

Хотите интегрировать бесперебойную поддержку клиентов прямо в свои приложения на Flutter? Обратите внимание на Crisp Chat — мощный плагин для Flutter, разработанный, чтобы привнести знаменитую функциональность чата Crisp прямо в ваши мобильные приложения на платформах Android и iOS.

Почему именно Crisp Chat?

Crisp Chat предлагает простой способ взаимодействия с пользователями вашего приложения в режиме реального времени, позволяя вам:

Общаться с посетителями сайта: Поддерживайте прямую связь с пользователями, отвечайте на вопросы и оказывайте поддержку мгновенно.
Интегрировать любимые инструменты: Бесшовная интеграция Crisp с существующими инструментами для улучшения рабочего процесса.
Обеспечивать исключительное качество обслуживания клиентов: Предлагайте индивидуальную поддержку, устраняйте неполадки и устанавливайте прочные отношения с клиентами.

Основные характеристики

Поддержка null safety: Использование новейших возможностей Flutter для повышения стабильности и производительности.
Простота использования: Интеграция Crisp Chat с минимальными настройками и интуитивно понятным API.
Настраиваемость: Настройте чат так, чтобы он соответствовал брендингу и пользовательскому интерфейсу вашего приложения.
Конфигурация пользователей: Настройте данные о компании и геолокацию пользователей для целевого взаимодействия.
Кроссплатформенная поддержка: Полностью протестировано и совместимо с платформами Android и iOS.

Руководство по установке

Чтобы начать работу, добавьте Crisp Chat в качестве зависимости в файл pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  crisp_chat: ^2.0.2

Инструкции по настройке

Настройка iOS

Добавьте описания использования конфиденциальности для камеры, фотогалереи и микрофона в Info.plist:

Key: Privacy - Camera Usage Description and a usage description.
Key: Privacy - Photo Library Additions Usage Description and a usage description.
Key: Privacy - Microphone Usage Description and a usage description.

При редактировании Info.plist в виде текста добавьте:

<key>NSCameraUsageDescription</key>
<string>your usage description here</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>your usage description here</string>
<key>NSMicrophoneUsageDescription</key>
<string>your usage description here</string>

Настройка Android

Предоставьте разрешение на интернет и настройте минимальные версии SDK в AndroidManifest.xml и build.gradle:

Добавьте разрешение на интернет в AndroidManifest.xml в файле android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET"/>

Измените минимальную версию Compile SDK на 34 (или выше) в файле android/app/build.gradle:

compileSdkVersion 34

Измените минимальную версию Android SDK на 21 (или выше) в файле android/app/build.gradle:

minSdkVersion 21

Пример использования

import 'package:flutter/material.dart';
import 'package:crisp_chat/crisp_chat.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final String websiteID = "YOUR_WEBSITE_ID";
  late CrispConfig config;

  @override
  void initState() {
    super.initState();
    config = CrispConfig(
      websiteID: websiteID,
      tokenId: "Token Id",
      sessionSegment: 'test_segment',
      user: User(
        avatar: "https://storage.googleapis.com/cms-storage-bucket/6a07d8a62f4308d2b854.svg",
        email: "user@user.com",
        nickName: "Nick Name",
        phone: "5555555555",
        company: Company(
          companyDescription: "Company Description",
          name: "Company Name",
          url: "https://flutter.dev12",
          employment: Employment(
            role: "Role",
            title: "Tile",
          ),
          geoLocation: GeoLocation(
            city: "City",
            country: "Country",
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Crisp Chat'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () async {
                  await FlutterCrispChat.openCrispChat(config: config);
                },
                child: const Text('Open Crisp Chat'),
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () async {
                  await FlutterCrispChat.resetCrispChatSession();
                },
                child: const Text('Reset Chat Session'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Благодарю за прочтение!

Источник:

#Flutter

Войти на сайт