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>
Or you can implement the launcher button without the screenshot prompt:
<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
        }
      })
    }
  })
}
When encoding the user’s WeChat Open ID, Union ID, or Phone in the event handler above, use the following function:
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
}
When you send data to Grata, you can choose to include any of the types below to help your agents quickly recognize the context. Each type has an associated color and icon. You could consider setting the type based on the page the customer is on when they launch the chat, for example, if they are on the checkout page, or a product detail page.
 

Value Icon Type Name (En) Type Name (Cn)
call Callback 要求回拨
campaign Campaign page 活动页面
cart Cart page 购物车
chat Transfer 转发
checkout Checkout page 结账页面
contact Contact Us page 联系我们页面
friendPay Pay-for-friend 替朋友支付
invoice Invoice 发票相关
order Invoice 发票相关
pdp PDP PDP
plp PLP PLP
profile Profile page 个人信息页面
remind Reminder 提醒
return Product Return 退货
scan QR Code Scan 二维码扫描