Link WeChat Official Accounts and Mini-Programs

     
    You can connect multiple WeChat Official Accounts (OA) and WeChat Mini-Programs (MP) to Grata. To use your WeChat OA with Grata you will need a verified WeChat Subscription or Service account. Confirm your account is verified by looking for the gold circle with a check on either your account profile page in WeChat or at the top right of your screen when you are logged into the WeChat backend.
     

     
    Additionally, if your WeChat OA is verified to a non-China entity, you should first confirm that you have access to the Customer Service interface. To do this, login to your WeChat backend, and at the very bottom of the left side menu under Development (开发) click on Interface Privileges (接口有限). Make sure you have “Obtained” for the Interface status of the Customer Service interface (客服接口). The Customer Service interface is required for Grata to work with your WeChat Official Account.
     

     
    There are then two options for connecting your WeChat OA to Grata. Unless you need a custom server configuration, most organizations will be able to use the quick plug-in method below, which is as easy as scanning a QR code. When connecting an MP, in addition to authorizing the WeChat Plug-in, you will also need to add a few lines of code to your mini-program in order for Grata to display the user profile data in the console.
     

     

    1. Open the WeChat page in your Grata Admin backend

    Log-in to your Grata account and open the Admin Panel from the welcome banner or by clicking on your username in the top right corner and selecting “Admin Panel” from the drop-down. In the side menu under Channels, select “WeChat”.
     

    2. Click “Add Official Account” or “Add Mini Program”

    If you’re in China and using a VPN, make sure it turn your VPN so the plug-in pop-up window loads properly.
     

     

    3. Scan the QR code

    Have an admin user of your WeChat backend scan the QR code.
     

    4. Tap the button on your phone to authorize Grata

     

    That’s all there is to it! You can click on your account in Grata to customize how the account will appear in the console, editing the account nickname and icon color.
     
    If you ever need to disable the account, do so from the WeChat backend. In the Settings (设置) section of the left side bar, click on Account Info (公众号设置) and then select the Authorizations (授权管理) tab. Click View Platform Details (查看平台详细) for the Grata app and then click the red button to Cancel authorization (取消授权).
     

     
    When connecting a Mini-Program to Grata, authorizing the WeChat Plug-in (see previous tab) will allow you to send and receive messages in a MP customer session session, but Grata will not be able to get the user’s username and avatar unless you add the code below to your MP.
     
    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></td>


    Or you can implement the launcher button without the screenshot prompt:

    <button id=”grataStartChatButton” open-type=’contact’ bindtap=’sendContact’>Start Chat</button></td>


    You’ll also need to add the following event handler to your MP:

    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,
    userInfo: user.userInfo,
    openId: openIdStr
    }
    })
    }
    })
    }

    When encoding the user’s WeChat Open ID 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
    }

     

    1. Open the WeChat page in your Grata Admin backend

    Log-in to your Grata account and open the Admin Panel from the welcome banner or by clicking on your username in the top right corner and selecting “Admin Panel” from the drop-down.
     
    In the side menu under Channels, select “WeChat”. To access the old server forwarding interface, edit the end of the URL, where it says “wechat.action” to “wechatOld.action” and hit enter to reload the page.
     

    2. Enter a nickname for this account

    This is simply how Grata will refer to this account. If you use multiple accounts, make sure to choose a name to help you distinguish this OA from your other channels. In the console, this channel will be referred to as “WeChat (nickname)”.
     

    3. Go to the WeChat backend

    Log-in to your WeChat backend at mp.weixin.qq.com and under the Development section (开发) at the bottom of the left side menu, open the first link to the Basic Configuration page (基本配置).
     
    Note: If you have an international WeChat OA, you will log-in to admin.wechat.com. Otherwise the steps below are quite similar.
     

    4. Enter your WeChat AppID and AppSecret into Grata

    If you don’t know your AppSecret, you will need to reset it. Note: If there are any other systems that currently access your WeChat backend, you will need to immediately update those systems with your new AppSecret as well.
     

     

    5. Enter the WeChat ID of your official account.

    The WeChat ID (微信号) of your official account can be found on your account profile page in WeChat or on your Account Info page (公众号设置) in the Settings section (设置) of the WeChat backend.
     

     

    6. Click save to link Grata to WeChat.

    Note: Your account is now linked in one-direction, from Grata to WeChat. The next step is to link your WeChat OA to Grata, after which your WeChat menus, your welcome message, and any auto-replies (if used) will be managed on Grata, not on the WeChat backend. We recommend that you first replicate this content in Grata before taking the next step to avoid any downtime during the switch.
     

    7. Add Grata’s IP address to your IP whitelist

    Next to IP Whitelist (“IP白名单”）click the Configuration button (“查看”) and add 101.200.91.7 and 47.52.115.150 to the whitelist.
     

    8. Setup forwarding from WeChat to Grata

    Just below the IP Whitelist, click the “Change Configuration” button (“修改配置”) and enter the Server Address and Token displayed on your Grata backend.
     
    Use the default Encoding Key from the Random Generation button and select “Plaintext Mode” for Message encryption. Click submit.
     

    9. Enable forwarding from WeChat to Grata

    After you enter the Server Address and Token, you still need to activate the deployment. Click the green “Enable” button (“启用”) to start forwarding. When forwarding is properly enabled, the button will read “Disable” (“停用”) in red text as in the image below:
     

    Optional: Turn on User Location Sharing

    If you would like to see your users’ location on the map in the Grata console, you can turn on location sharing for any verified WeChat Service Account. Your users will then see a pop-up when they access your account asking whether or not they would like to share their location. This feature is not available to subscription accounts or mini-programs.
     
    Under the Development section (开发) at the bottom of the left side menu, click on the last link for Interface Permissions (“接口权限”) and under Conversation Service, Followers (对话服务，用户管理), find the row for Get user location (“获取用户地理位置”) and click Enable (“开启”).