Setup Web App

Source Code Setup #

1. Download the Fiberchat Web app purchased package from Codecanyon. Open the source code (project folder/ fiberchat_web folder) in your preferred Code Editor by simply Drag & Drop the folder in vs code. We recommend to use VS Code, especially for flutter apps.
2. You must be ready with your unique Web App Name, project folder name.
3. Rename the “fiberchat_web” project folder name with your “project folder name“.
   Also replace “fiberchat_web.iml” with your “project_folder_name.iml“
   

Change App Name #

A) Replace the default App name (Fiberchat Web) with your Web App name inside the file – fiberchat_web/web/index.html

<meta name="apple-mobile-web-app-title" content="Fiberchat Web">

<title>Fiberchat Web</title>

B) Replace the default App name (Fiberchat Web) with your Web App name inside the file – fiberchat_web/web/manifest.json

"name": "Fiberchat Web","short_name": "Fiberchat Web",

C) Replace the default App name (Fiberchat Web) with your Web App name inside the file – fiberchat_web/lib/Configs/app_constants.dart

const Appname = "Fiberchat Web";

Change App Tagline (Optional) #

A) Replace the default App tagline with your Tagline inside the file – fiberchat_web/web/index.html

<meta name="description" content="Chat & Calls App">

B) Replace the default App tagline with your Tagline inside the file – fiberchat_web/web/manifest.json

"description": "Chat & Calls App",

C) Replace the default App tagline with your Tagline inside the file – lib/Configs/app_constants.dart

const AppTagline = ""; 

//optional description for app (by default a string is set in en.json with keyname "appdescription")

Change Assets #

Replace the assets in the following paths with your assets with the same name & same size.

App Icon : #

fiberchat_web/web/icons/Icon-192.png
fiberchat_web/web/icons/Icon-512.png
fiberchat_web/web/icons/Icon-maskable-192.png
fiberchat_web/web/icons/Icon-maskable-512.png

Fav Icon : #

fiberchat_web/web/favicon.png

AppLogo (for login screen): #

fiberchat_web/assets/images/applogo_dark.png
fiberchat_web/assets/images/applogo_light.png

Change Colors #

Replace the following colors in : lib/Configs/app_constants.dart. with your desired colors keeping the same tone in each color (darken/lighten) for a good looking UI.

//--unique color for your app --------

final fiberchatPRIMARYcolor = Color(0xff009466); 

// you may change this as per your theme. This applies to large buttons, tabs, text heading etc.

final fiberchatSECONDARYolor = Color(0xff00b866); 

// you may change this as per your theme. This applies to small buttons, icons & highlights

//--other constant colors--------
const SplashBackgroundSolidColor = Colors.white;
final fiberchatScaffold = new Color(0xffeff0f5);
final fiberchatWhite = Colors.white;
final fiberchatBlack = new Color(0xFF1E1E1E);
final fiberchatGrey = Color(0xff8596a0);
final fiberchatREDbuttonColor = new Color(0xFFe90b41);
final fiberchatCHATBUBBLEcolor = new Color(0xFFe9fedf);
final fiberchatChatbackground = new Color(0xffe8ded5);

Replace the following colors in : web/manifest.json with your desired colors (These should be same as fiberchatPRIMARYcolor)

 "background_color": "#0175C2",
 "theme_color": "#0175C2",

Setup App Configuration #

Setup basic mandatory configuration for your App inside: lib/Configs/app_constants.dart

const DEFAULT_COUNTTRYCODE_ISO = 'US';   //default country ISO 2 letter for login screen
const DEFAULT_COUNTTRYCODE_NUMBER = '+1';   //default country code number for login screen

Optional App Configuration #

Setup optional configuration for your App inside: lib/Configs/optional_constants.dart (We recommend, not changing it) :

Set App Version Number #

2. Set app version number inside : pubspec.yaml & further increment both version Name & Version code before every release build

version: 1.0.0+1

Change Font (optional) #

Fiberchat has a default Flutter font. If you want to set a new font. Please follow these steps:

1. Get ready with your font file(s). Remove all blank spaces in names if any.
2. Paste your (.otf) OR (.ttf) font file inside : assets/fonts folder
3. Register the font at the end of pubspec.yaml file as shown below:

  assets:
    - assets/images/
    - assets/sounds/
    - assets/flags/
    - lib/Services/localization/json_languages/

  fonts:
    - family: your_font_family_name
      fonts:
        - asset: assets/fonts/your_font_file_name.ttf

Save pubspec.yaml file. Run command : flutter pub get

4. Paste your “your_font_family_name” in -> lib/Configs/app_constants.dart

const FONTFAMILY_NAME = "your_font_family_name";

Set Meta Tags #

Set your app Meta Tags to be used by search engines to crawl & link this app.

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="Paste Homepage URL">
  <meta property="og:title" content="Fiberchat Web Demo">
  <meta property="og:description" content="Chat & Calls Web App">
  <meta property="og:image" content="Paste MetaBanner URL (1200x630 jpg)">

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="Paste Homepage URL">
  <meta property="twitter:title" content="Fiberchat Web Demo">
  <meta property="twitter:description" content="Chat & Calls Web App">
  <meta property="twitter:image" content="Paste MetaBanner URL (1200x630 jpg)">