CRM System Integration

On Hyphenate Customer Engagement Cloud, the customer profile includes nickname, full name, ID, phone, email, company, description, etc. If you need to present more detailed and personalized customer profiles, you can integrate your CRM system with Hyphenate.

You can integrate your customer order system or customer relationship system through an Iframe window. After the integration, when a customer starts a conversation, the agent can see the customer's order info or detailed profile. Similarly, if there are other third-party systems that need to be integrated, they can be integrated in the same way.

By default, Hyphenate passes the following URL parameters to your server, web pages can obtain the parameters and display the query result. If you do not need all the parameters, just ignore them.

  • easemobId: Hyphenate ID of the channel account (can be ignored)
  • visitorImId: Customer ID, the same as ID on the Profile tab
    • For customers from app/web channels, visitorImId is Hyphenate ID of the customer
    • For customers from the WeChat channel, visitorImId is openid to the WeChat official account
    • For customers from the Weibo channel, visitorImId is UUID of the Weibo follower
  • to: Origin ID of the WeChat official account (effective only for the WeChat channel)

GET request example:

Request URL: http://www.yourdomain.com/?easemobId=107937&visitorImId=webim-visitor-8K2FTG9QTYWRT8EYVJ7F&to=webim-visitor-8K2FTG9QTYWRT8EYVJ7F
Request Method: GET

Moreover, Hyphenate can pass the following parameters. These parameters are a value-added service. To activate the service, please provide the tenant ID and contact Hyphenate.

  • agentId: Internal agent ID. Uniquely identifies an agent.
  • userId: Internal customer ID. Uniquely identifies a customer.
  • email: Agent's login email address
  • tenantId: Tenant ID
  • agentName: Agent nickname

If you need customized parameters, you can send a command message via app or web widget to pass the parameters to Hyphenate. When receiving these parameters, Hyphenate also passes them to your server.

The implementation procedure is as follows:

Step 1: Set Up a Page

Develop an HTML/JSP/ASP webpage, and then deploy it on the Internet according to the HTTPS protocol.

Step 2: Configure Iframe

On the Hyphenate Customer Engagement Cloud, go to “Admin Mode > Settings > Iframe”, fill in the URL address of the webpage, and click Save. Then, Hyphenate will send a GET request to the URL address every time the agent switches conversations on the Ongoing list on the Conversations page.

Make sure that the URL address can be accessed by Hyphenate. For example, https://IP:port/db.jsp

Iframe

If you need to encrypt the customized parameters in the GET request, you can set an encryption key of more than 8 bits on the Iframe page. The encrypted GET parameters must be decrypted using the same key. Hyphenate adopts the DES algorithm-based symmetric encryption method.

Note that the default parameters easemobId and visitorImId are not encrypted.

After you set the encryption key, Hyphenate uses this key to encrypt the customized parameters and send GET requests consisting of the URL and encrypted parameters to the CRM system. After receiving these requests, the CRM system needs to use the same encryption algorithm and key to decrypt the relevant parameters, process the requests, and return the customer information page to Hyphenate.

Message format:

Before encryption:

"ext": {
        "cmd": {
            "updateVisitorInfoSrc": {
                "params": {
                    "name": "Jack",
                    "age": "40",
                    "sex": "man"
                }
            }
        }
}

After encryption:

"ext": {
    "cmd": {
        "updateVisitorInfoSrc": {
            "params": {
                "name": "877523f86f18f55e",
                "age": "e86b4e789891107c",
                "sex": "d221cba8e6efd0ad"
            }
        }
    }
}

Note: If you do not set an encryption key, Hyphenate sends GET requests containing all parameters in plain text and the CRM system does not need to decrypt the parameters.

Step 3: Set Customized Parameters (Optional)

Send custom messages from your app or web widget. (Skip this step, if you don't need customized parameters)

Web Widget

You can set customized parameters in the “ext” field of your web widget so that Hyphenate passes the parameters to your CRM system. Open the following website in your browser and view the source code.

Example with web widget: https://index-swf.github.io/webim-plugin-demo/demos/webim-plugin-crm.html

In this example, Hyphenate sends the following GET request to your CRM system:

Request URL: http://www.yourdomain.com/?customUserId=EEP4EVP9CCMTRTCKVJHX&name=Jack&age=40&sex=man&easemobId=107937&visitorImId=webim-visitor-Q922M6VHRKQG8QFXP6T9&to=webim-visitor-Q922M6VHRKQG8QFXP6T9
Request Method: GET

Step 4: Test

Open your app or web widget, and send a message to the agent. Open Hyphenate Customer Engagement Cloud, go to the Conversations page, and check whether the message has been received and whether a tab page on the right displays the customer information. Switch between conversations on the Ongoing list, and check whether the correct customer information is displayed.

db.jsp code example:

<%@ page import="javax.naming.*" %>
<%@ page import="javax.sql.*" %>
<%@ page import="java.sql.*" %>
<%@ page import="javax.transaction.*" %>
CRM Integration Test:<br>
<%
    String easemobId = request.getParameter("easemobId"); //Hyphenate ID of the channel account (can be ignored)
    /**
    * visitorImId: Customer ID, the same as ID on the Profile tab. Use this parameter to query your service ID for order information or customer information.
    * If you've set customized parameters, your website need to respond to them.
    */
    String visitorImId = request.getParameter("visitorImId");
    String specialID1 = request.getParameter("specialID1"); // Optional
    String specialID2 = request.getParameter("specialID2"); // Optional
    String specialID3 = request.getParameter("specialID3"); // Optional
    InitialContext ctx = new InitialContext();
    Connection con = null;
Statement stmt = null;
ResultSet rs = null;
    try{
        DataSource ds = (DataSource)ctx.lookup("java:comp/env/jdbc/datasource_name");
  con = ds.getConnection();
  stmt = con.createStatement(); 
  rs = stmt.executeQuery("select * from user where id = ‘"+ visitorImId + “’” );
    while(rs.next()) {
    String name = rs.getString(2);
    System.out.println("name :" + name);
String phone = rs.getString(3);
System.out.println("phone :" + phone);
String address = rs.getString(4);
System.out.println("Address :" + address);
out.println("easemobId :" + easemobId);
out.println("<br>");
    out.println("name :" + name);
    out.println("<br>");
    out.println("phone :" + phone);
    out.println("<br>");
    out.println("address :" + address);
    out.println("<br>");
    }
    }catch(Exception e) {
            e.printStackTrace();
    }finally {
        try {
        stmt.close();
        }catch(Exception e1){
out.println(e1.toString());
}    
        try {
        con.close();
        }catch(Exception e2){}
    }
%>