Integrating Smooch with Ionic 2

15 November 2016 on ionic2. 7 minutes

Having Conversations with our Users Inside 38Plank in a Seemless Manner

Something that we strive to do at 38Plank is to understand our user’s needs and issues and react to them as quickly as possible. In a mobile app that becomes hard because as soon as the user sees an issue or a feature that they want, they should be able to communicate that message immediately, without leaving the application.

This is where Smooch came in. With Smooch we had an integrated solution for how we can talk to our customers inside of the app.

Integrating this into our Ionic 2 / Angular 2 application was quite an interesting problem to solve and we came up with a fairly convenient solution to this problem. To help anyone else who might want to integrate Smooch into their Ionic 2 application, we will go over our process so hopefully, you can also talk to your users in a seamless manner.

Setup and Configuration

First, let’s look at the Smooch Docs about how to integrate into a normal web application. This is a good place to start as we are integrating into an application running inside a WebView, which for development purposes is very similar. The first step is to integrate the javascript file into your index.html file. In this step, the important part to note is the placement of the script tag for smooch.js.

smooch-js must be the last script tag you include in your index.html file. If not you will run into an issue where zone.js complains that smooch overwrites its implementation of the ES6 Promise library.

Reference github issue

<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>
  <!-- Polyfill for intl, this should be included in future ionic releases -->
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script> 
  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>
  <!-- use the cdn link if your just starting out -->
  <script src="https://cdn.smooch.io/smooch.min.js"></script>

</body>
</html>

Another configuration change that must be made is to upgrade your Ionic 2 application to use WkWebView instead of UIWebView. You can look at the benefits and how incorporating this plugin here in this blog post by the Ionic Team

Instructions for installing the plugin can be found here: WkWebView Plugin

Initialization

After integrating the library and upgrading to WkWebView, we need to initialize Smooch to work with our API key. In your application, this should be as soon as possible, or wherever you authenticate your users. We do this inside of our app.component.js, which is also where we authenticate users.

import { Component } from '@angular/core';
import { Platform, MenuController } from 'ionic-angular';
import { StatusBar, Splashscreen, Keyboard } from 'ionic-native';

import { TabsPage } from '../pages/tabs/tabs';
import { LoginPage } from '../pages/auth/login';

declare var Smooch: any;

@Component({
  template: '<ion-nav hide-nav-bar="true" [root]="rootPage"></ion-nav>'
})
export class MyApp {
  rootPage: any = LoginPage;

  constructor(public platform: Platform,
              public menu: MenuController) {
    /* listen for login / logout event, change root page */
    this.platform = platform;
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.

      /* Cordova */
      StatusBar.styleDefault();

      // Keyboard 
      Keyboard.hideKeyboardAccessoryBar(false);
      if (window.cordova) {
        window.cordova.plugins.Rollbar.init();
      }
    });

    this.menu = menu;
  }

  ngAfterViewInit() {
    this.listenToLoginEvents();
  }

  listenToLoginEvents() {

    this.af.auth.subscribe( (user) => {
      if (user) {
        // Initialize Smooch for the user involved
        Smooch.init({
          'appToken':<insert your appp token>,
          embedded: true,
          userId: <userId>,
          givenName: <displayName>,
          email: <email>
        }).then(() => {
        
        });

        // User is signed in.
        this.rootPage = TabsPage;
        Splashscreen.hide();
      } else {
        this.rootPage = LoginPage;
      }
    }
  }
}
    

There are two key parts to this example. First is that we need to declare to typescript that we will be using a global variable (Smooch) in our code.

declare var Smooch: any;

Second, we initialize Smooch and set it to embedded mode. This will be important when we create a component later that will display our Smooch conversation.

Smooch.init({
    'appToken':<insert your appp token>,
    embedded: true,
    userId: <userId>,
    givenName: <displayName>,
    email: <email>
}).then(() => {

});

Smooch Component

Instead of using Smooch’s native popup functionality, we decided to embed it into a custom page. In an Ionic application, this works significantly better from a UX perspective, as the whole page would be taken up by smooch’s standard integration. To be able to do this we created our own custom component, smooch.comp.ts that housed the conversation.

<button class="back-button-smooch" (click)="back()">
    <ion-icon name="arrow-round-back"></ion-icon>
</button>
<ion-content class="smooch-comp" id="message-container">

</ion-content>

The HTML is fairly simple, just an ion-content we can attach the Smooch container too.

import { Component, AfterViewInit } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Mixpanel } from 'ionic-native';

import { AuthService } from '../../services/auth.service';

declare var Smooch: any;

@Component({
  templateUrl: 'smooch.comp.html'
})
export class SmoochComponent implements AfterViewInit {

  public user: any;

  constructor(public nav: NavController,
              public auth: AuthService) {
  }

  ngAfterViewInit() {
    Smooch.render(document.getElementById('message-container'));
  }

  back(): void {
      this.nav.pop();
  }
}

The only code here that is different from your standard component is

Smooch.render(document.getElementById('message-container'));

This is where we attach our smooch container to our page. After this, all you need to do is navigate to this page through your app! Then you can start having conversations with your users inside of your Ionic 2 Application.

If you want to see this in action, follow the link to our site 38Plank and download the app.


Previous

Styles from Strata

This post demostrates the various styles that are available for use from the Strata template