Introducing Comm100 Live Chat Mobile SDK

November 27th, 2017 | Setup & Getting Started

Comm100 Live Chat comes with a mobile SDK, which allows you to integrate Live Chat into your own mobile app. This allows you to place a chat button into your app. Once your visitors touch the button, they will be redirected to your chat window, where they can chat with your live chat agents. This gives you a quick and easy way to become more connected to the users of your app, and helps you to mirror the chat experience on your desktop and mobile websites.

Getting Started

Bringing live chat into your app is simple and just a few lines of codes away. Here is an example of how you can integrate Comm100 Live Chat with your app using the SDK.

As shown in the screenshot, this app is an online Kids’ clothing store. You can put a button in the navigation bar so when your customers need help while browsing through clothes, they can touch the Chat Now button for instant assistance.

As soon as your users touch the chat button, they will be directed to the chat window. Users can also touch the Back button to return to the previous screen where they can see the clothes. While they are doing so, the chat will stay connected and intact. In this case, they can re-select Chat Now to continue the chat conversation.

Live Chat on Native App

Live Chat Mobile SDK Sample Files

We host sample live chat mobile SDKs for the iOS and Android system through Github. Please click here to view and download the sample files.

Steps to Use Live Chat Mobile SDK in iOS Devices

  1. Import VisitorClient.framework into your iOS project.

  2. Set the response to the chat button touch event. You can use the URL of your live chat window to initialize a VisitorClientController instance and then push the chat window to the top of the mobile screen.

    Here is the sample code for your reference. Remember, you need to replace the siteId and planId with your own Site ID and Campaign/Code Plan ID from the JavaScript live chat code in your account. Also replace the live chat server with the correct one.

    -(IBAction) startChat:(id)sender{
    NSString * chatUrl = @"https://chatserver.comm100.com/chatwindowmobile.aspx?siteId=10000&planId=500239";
    VisitorClientController * visitorClient = [[VisitorClientController alloc] initWithChatUrl:chatUrl];
    [self.navigationController pushViewController:visitorClient animated:YES];
    }

Steps to Use Live Chat Mobile SDK in Android Devices

  1. Import comm100-visitor-client-v0.2.aar into your Android project.

  2. Add the following configuration into AndroidManifest.xml.

    <activity 
      android:name="com.comm100.livechat.VisitorClientActivity" 
      android:theme="@android:style/Theme.NoTitleBar"
      android:label="@string/title_chat_window_with_library" >
    </activity>
  3. When a visitor clicks on your chat button, you should call the button’s instance method setOnClickListener with the following code to show VisitorClientActivity. You need to provide your siteId, planId and chatServer address, which can be found in your account.

    @Override
    public void onClick(View v) {
      int siteId = 10000;   
      int planId = 5000239; 
      String chatServer = "https://chatserver.comm100.com";  
      Intent intent  = new Intent(MainActivity.this, VisitorClientActivity.class);
      intent.putExtra("site_id", siteId);
      intent.putExtra("plan_id", planId);
      intent.putExtra("chat_server", chatServer);
      startActivity(intent);
    }});
    

    In the above example, the siteId is the unique Site ID for your account, and planId is the Campaign/Code Plan ID. For the chatServer, please use the corresponding chat server address where your live chat is hosted. For our shared server clients with Team or Business edition, please use https://chatserver.comm100.com, and for the shared server Enterprise edition client, please use https://ent.comm100.com/chatserver. For private server clients, please also replace the server address accordingly.

How Does Comm100 Live Chat Mobile SDK Load Chat Window?

  • In iOS, we use the UIWebView to load the chat window.
  • In Android, we use WebView to load the chat window. Also your WebView should support JavaScript, cookies and so on.

As an alternative to Comm100 Live Chat Mobile SDK, you can also simply implement the live chat in your own App with following ways:

  • You can use the UIWebView/WebView to load your chat window in the APP.
  • You can call the browser to open the chat window.