WeChat Mini-Program Setup

You can connect multiple WeChat Mini-Programs (MP) to Grata for live chat support. In most cases, you will need the assistance of the developer of your Mini-Program to get setup. Here are the basic steps to get setup:

1. Authorize Grata’s WeChat Plug-in,
2. Add a chat button to your MP, and
3. Setup data sharing between your MP and Grata.

Connect your MP to Grata

Follow the same steps you would when connecting a WeChat Official Account to Grata, by having the owner of your MP scan the “Add Mini-Program” code from the Grata backend and authorize the Grata plug-in.

After you have added the MP to Grata, you can customize how the account will appear in the console by editing the account nickname and icon color.

If you ever need to disable the account, do so from the WeChat backend. Click on settings “设置” at the bottom of left side bar, click on the second tab for third-party settings “第三方设置” and then on the text to cancel authorization “停止授权“ for Grata. On the confirmation screen, click the green button to confirm the operation, or the grey button to go back.

Add a chat button to your MP

Your MP developer can help you add a contact button on any pages where you would like your customer to be able to launch a chat. The look and feel of the button is entirely up to you.

If you’re not familiar with how customer service chat works in a WeChat Mini-Program, it’s As Mini-Program chat works a bit differently than other channels, we encourage you to think carefully through your desired User Experience before your start development. Some MPs choose to first show

Wherever you want to display a contact button in your MP, implement this chat launcher button, which prompts the user to share a screenshot of their current MP page:

<button id="grataStartChatButton" open-type='contact' show-message-card='true' bindtap='sendContact'>Start Chat</button>

<button id="grataStartChatButton" open-type='contact' bindtap='sendContact'>Start Chat</button>

Data sharing to Grata

Unlike WeChat Official Accounts, Mini-Programs only allow the developer to pull a user’s basic profile information once. For that reason, if you want your agents to be able to see customer names and avatars in the Grata profile, you’ll need your MP developer to pass this data to Grata.

Once you’ve interfaced to Grata, you can choose to send additional information beyond the user’s WeChat profile data, for example: user contact information, the current MP page the user is on, items in their shopping cart, or any other context that would be helpful for your agents to give better service.

You can add the following event handler to your MP to send the data to Grata:

sendContact: function (e) {
  wx.getUserInfo({
    success: function (user) {
      var openIdStr = base64_encode("OPENID"); // Insert user's OPEN ID here
      // Call backend API
  wx.request({
    url: 'https://api.guestops.com/connect-api/weChatCallback/getMPUserInfo.action',
    data: {
      appId: wx.getAccountInfoSync().miniProgram.appId,
      openId: openIdStr
      unionId: unionIdStr //optional
      userInfo: user.userInfo, //optional
      phone: phoneStr //optional
      type: //optional, see list of type values below
      note: //optional, any text string to share info with CS agents
        }
      })
    }
  })
}

function base64_encode(str) {
  var c1, c2, c3;
  var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
  var i = 0, len = str.length, string = '';

  while (i < len) { 
    c1 = str.charCodeAt(i++) & 0xff; 
    if (i == len) { 
      string += base64EncodeChars.charAt(c1 >> 2);
      string += base64EncodeChars.charAt((c1 & 0x3) << 4); 
      string += "=="; 
      break; 
    } 
    c2 = str.charCodeAt(i++); 
    if (i == len) { 
      string += base64EncodeChars.charAt(c1 >> 2);
      string += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
      string += base64EncodeChars.charAt((c2 & 0xF) << 2); 
      string += "="; 
      break; 
    } 
    c3 = str.charCodeAt(i++); 
    string += base64EncodeChars.charAt(c1 >> 2);
    string += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
    string += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
    string += base64EncodeChars.charAt(c3 & 0x3F)
  }
  return string
}