Before the holiday, a friend asked me to help him build a WeChat online customer service system. In fact, the WeChat official account has an online customer service function, but this function is the most basic. We used wisdom teeth in our company before, but they didn't do it when they expired. This time, I have the opportunity to use a third-party customer service system to record it.
need:
1. The user opens the WeChat official account, clicks online customer service, and the user can select the designated customer service chat (WeChat customer service is not supported);
2. The WeChat official account chat is automatically transferred to the third-party customer service access.
Public account interface:
WeChat interface - customer service list
Before doing it, I looked at the development guide of Qiyu . It was found that there was no interface for obtaining the list of customer service personnel. Later, I consulted the people of Qiyu online and found that there was no such interface, which was very embarrassing. It means that the customer service information on the customer service list interface needs to be copied and pasted from Qiyu manually. Every time there is a change in the customer service information on Qiyu, you need to manually modify the data in this interface. I don't know why Qiyu didn't open this interface. Please refer to the documentation for specific development.
For example, in some companies, different customer service personnel are responsible for different geographic areas or product categories. However, when customers chat in WeChat, they can only judge whether they are responsible for their own responsibility after seeing the message. If not, they need to transfer to other customer service personnel. If you directly let customers choose the corresponding customer service, you can save a lot of time and improve efficiency. I also gave feedback to the staff of Qiyu about this requirement.
Since there are no seven fish, you can only solve it yourself. My approach is to make a PC interface by myself, and let the official account administrator add and modify customer service information. In this way, the public account administrator does not need to modify things at the code level.
solve:
1.
Mobile terminal There is only one interface on the mobile terminal, which is the customer service staff list interface. The specific chat interface is provided by Qiyu.
2. The PC side of the
PC side is a list page with a pop-up box.
In order to make the interface look good and write code convenient, vue.js + element-ui is used. The scaffolding vue-cli is not used here. I also made a landing page by the way, hey, you know.
3. Backstage The
backstage part, I only only know some Node.js, and I use Node.js to come out.
A picture upload interface of Qiniuyun,
customer service: add, delete, modify, get. That is to say, corresponding to the addition and modification of Mysql, deleting the customer service staff only modified a field value, but did not delete it from the database. These interface codes will not be posted.
All of them were made, and it was done in half a day this morning. I also made an instruction manual by the way. In fact, I just posted a few pictures.
experience
After doing this, I realized one thing: try not to let people who don't understand code modify things at the code level. I learned from a friend that his customers do not understand the code, and it is very risky to let them modify the configuration or code. So just work a little harder and do more, so that customers can save time and trouble. If NetEase Qiyu has the function of obtaining the customer service list, then the PC side is omitted. If the interface can be called from the front desk, Node.js is also omitted. Fortunately, this is not difficult, and it can be done and deployed in half a day. The next step is to teach customers how to use it.