Skip to main content

A8Chat Widget - Ionic

Integrate A8chat Widget Framework with Ionic 3 and Above​

An iOS Framework makes it easy for cross platform mobile app developers to build A8Chat support.

Target OS: iOS 12.0 and above

Ionic version: Ionic 3 and above

Create Cordova Plugin​

Step 1: Use plugman to create cordova plugin.

-- npm install -g plugman
  -- plugman create --name PLUGINNAME --plugin_id
PLUGINID --plugin_version 0.0.1 --path
PATH

Step 2: After creating the plugin, add A8chat framework inside the plugin.xml.

Inside the platform ios,

<framework src>=“A8ChatWidget.framework” custom=“true” embed=“true”/>

Step 3: When cordova plug-in is successfully created, you need to create a wrapper for ionic native.

Integration into Ionic-Native​

Step 1: Navigate to https://github.com/ionic-team/ionic-native.

Step 2: Fork the repo and pull down a local copy to your computer.

Step 3: Go to src/@ionic-native/plugins/ present within the Ionic-Native repository folder.

Step 4: Now, create a folder with your-plugin-name. This will be similar to your plugin’s Github repository name, minus the cordova-plugin part.

Step 5: In that folder, paste an example index.ts file or create index.ts inside the folder.

import { Injectable } from '@angular/core';
import { Cordova, IonicNativePlugin, Plugin } from '@ionic-native/core';
@Plugin({
  pluginName: 'YourPluginName',
  plugin: 'cordova-plugin-your-plugin-name',
  pluginRef: 'YourPluginName',
  repo:
    'https://github.com/YOUR-REPO-LINK-HERE',
  platforms: ['iOS']
})
@Injectable()
export class YourPluginName extends IonicNativePlugin {
 /**
  * Your plugin plugin functions go here.
  * Function names should match the ones in your .swift & .js files.
  * Otherwise you won't be able to execute them.
  */
@Cordova({
  successIndex: 0,
  errorIndex: 1
})
yourFunctionName(): Promise<any> {
  return;
  }
}

Step 6: Now within the ionic-native project, run the following commands npm install & npm run build.

Step 7: Once the build process finishes (this may take a few mins), your plugin package will be available as an output to the /dist/@ionic-native/your-plugin-name folder.

Now, copy your-plugin-name folder, and go to your main project. Navigate to the node_modules/@ionic-native folder, and paste the copied your-plugin-name folder into the @ionic-native folder.

How to Use Plugin into The Project Example​

Step 1: Import the ionic native plugin onto your page using import {YourPluginName} from '@ionic-native/your-plugin-name';.

Step 2: Add the name of the plugin in your constructor private pluginName: PluginName.

Step 3: Perform some functionality to get the desired plug-in result.

public someFunctionName(){
 this.yourPluginName.yourPluginFunction().then(() => {
   console.log("The yourPluginFunction ran without errors!");
 }).catch(err => {
   console.log("yourPluginFunction encountered the following error:  ",err);
 })
}

Add Plugin to Your Page​

  • Install your plugin.
ionic cordova plugin add ~/path-to-your-plugin/YourPluginName
  • To remove the plugin
ionic cordova plugin rm PACKAGENAME**

Almost Done​

Step 1: After adding the plugin, open your xcode workspace now. You can check the A8ChatWidget framework added in General tab.

Ionic A8Chat Widget

Step 2: Now add your apple developer account in Signing & Capabilities to create a certificate for your iOS app.

Step 3: In Plugins folder, open yourController.swift file. Use the below statement to import chat widget.

import A8ChatWidget

Step 4: Now, add the following code in your corresponding yourController.swift, inside echo(command: CDVInvokedUrlCommand) function once you receive the plugin succeeded message using your connection credentials.

WidgetBuilder(self.viewController).setOrgId(orgId: "5c4714ff1667670fb10be6a0")
    .setuserId(userId: "1572948088")
                    .setAppKey(appKey:"0e38672c0564643c4c5b398e97440bb3230ddbc4d2974cea53b1065f")
                       .setBotHandle(botHandle: "a8bot-creditmantri-01")
                       .setEmailId(emailId: "johndoe@gmail.com")
                       .setDisplayName(displayName: "John Doe")
                       .setEnvironment(envi: botEnvironment.testing)
                       .build()

Note: Connection cannot be established to chat without these credentials: orgid, appKey, botHandle, displayName, emailId, and botEnvironment while userId can be optional.

❕ botEnvironment decides the environment of your bot: testing, staging, and production.

Step 5: Now, run your ionic project with this command

ionic cordova run ios --livereload --external

License ©️​

A8ChatWidget is licensed under the terms of the [http://www.apache.org/licenses/LICENSE-2.0.html]. Please see the LICENSE file for full details. Please see the LICENSE file for full details.

Contact​

A8ChatWidget was developed by the Autonom8 iOS team. If you have any technical questions or queries about this project, please feel free to reach out us at Autonom8.