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

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

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';
pluginName: 'YourPluginName',
plugin: 'cordova-plugin-your-plugin-name',
pluginRef: 'YourPluginName',
platforms: ['iOS']
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.
successIndex: 0,
errorIndex: 1
yourFunctionName(): Promise<any> {

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")
.setBotHandle(botHandle: "a8bot-creditmantri-01")
.setEmailId(emailId: "")
.setDisplayName(displayName: "John Doe")
.setEnvironment(envi: botEnvironment.testing)

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 []. Please see the LICENSE file for full details. Please see the LICENSE file for full details.


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.