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
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
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
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.
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.
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.
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.
The HTML is fairly simple, just an ion-content we can attach the Smooch container too.
The only code here that is different from your standard component is
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.