How to Integrate Qiscus Chat SDK into Ionic Apps

Indonesia is an active user of smartphones, which is why so many local and foreign companies are competing to build mobile applications. However, the needs of mobile developers are not proportional to the number of existing developers.

So Ionic is a tool that targets web programmers to be able to create mobile apps with the web. What does this mean? It means that web programmers who want to be mobile programmers do not need to learn Java or Objective C or C # to create an application version of their web services.

Ionic uses SASS Node.js, AngularJS as its engine. Ionic comes with CSS components like buttons, lists, cards, forms, grids, tabs, and more. So Ionic is a web technology that can be used to create a mobile application. Since it is a hybrid, the application is only made once but can be released on more than one platform namely cross-platforms.

Ionic has advantages, among them are open source and also use the latest web technology. Ionic also uses Angular JS for its logic implementation. It has been reported that using Angular JS applications created using Ionic means it will be able to run as fast as the native applications. Currently, many applications are developed using Ionic framework when they need chat feature in their application, simply they can use Qiscus Chat SDK.

Also read: “Qiscus Web SDK Version 2.6.0 is Now Live. Here’s What’s New!

The process is easy. Let’s follow the integration process below:

  1. Make sure you have already installed Ionic by using npm install -g ionic cordova
  2. Start a project by using ionic start <project-directory> tabs, you can use tabs, blank, or sidemenu.
  3. If you already have Ionic project you can skip to integrating Qiscus chat SDK into Ionic part.

The Step to Integrate Qiscus Chat SDK with Ionic App

  1. Copy Qiscus chat SDK cdn link into your ionic index.html file. Like so:

chat sdk, qiscus chat sdk

After that, you can include this tag <div id=”qiscus-widget”></div> into your desired Ionic pages / html template of your choice. Like this:

qiscus sdk, sdk,

  1. For initiating Qiscus chat SDK you can put the code inside your application module, so it will be initiated only once. You can also make another service for Qiscus chat SDK, so you can easily differentiate your code from Qiscus chat SDK related code.

ios sdk, android sdk, chat sdk

  1. You need to render Qiscus chat SDK inside method ionViewDidLoad of your page where you put qiscus-widget tag.

qiscus sdk, developer, coding

For more detailed code you can check our sample repository of Qiscus chat SDK with Ionic: and drop us a note at [email protected] whether you need a basic or advanced solution, we will be pleased to recommend the best feature for you.

You May Also Like