SHOPLINE's Message Center now supports "Chat Widget". When customers browse the storefront, they can initiate a conversation with customer service through Facebook Messenger, Instagram, LINE, WhatsApp, or the store's Instant Message feature. All messages will appear on the Message Center to provide one-stop message management.
⚠️ Note: Currently, the Chat Widget is only supported on the Ultra Chic, Kingsman, and Varm theme templates.
This article will cover the following:
1. Install the application
Step 1
In the SHOPLINE Admin, go to [Social Commerce] > [Message Center]. On the left menu, select [Customer Assistant] > [Chat Widget].
Step 2
Click the link on the right for the "Chat Widget" app.
Step 3
You will be directed to the "SHOPLINE Chat Widget" page on the Apps Store. Click Install Now to install the application for free. For more details on app installation, please refer to the following FAQ.
Step 4
Once you install the app, you can go to [Apps] > [My Apps] and click Activate script next to the "SHOPLINE Chat Widget".
2. Settings
Step 1
Upon installation, go to [Message Center] > [Customer Assistant] > [Chat Widget].
Step 2
Switch on the "Enable Chat widget" toggle.
Step 3
i. You have integrated social channels in Admin > [Channel Integration]
If you have integrated social channels in Admin > [Channel Integration], the system will automatically display the connected accounts in the Chat Widget. If you have connected multiple Facebook Pages or Instagram accounts, you can select them from the drop-down list.
ii. You have not integrated social channels in Admin > [Channel Integration]
If you have not integrated social channels before, you can add a social account by entering the account information (Merchants who have already integrated can also add another social account to the Chat Widget):
- Facebook Messenger: Enter Facebook Page ID. Find your Facebook Page ID.
- Instagram: Enter Instagram account name.
-
LINE: Enter LINE friend QR code link. Get the link.
*Note: If your store has an official LINE account, and you wish customers to contact you through this account, please go to Admin > [Channel Integration] to integrate your LINE account. - WhatsApp: Enter mobile number including the country code.
Upon completion, please enable the applicable channel. Once enabled, customers can contact the customers via these channels while browsing the storefront.
⚠️ Please note:
- Taiwan merchants using only the "e-Commerce" system currently can use
Online Conversation, Facebook Messenger, and Send email channels.
Please purchase the "Social Commerce" system to use the "Instagram, LINE,
and WhatsApp" channels.
- Hong Kong merchants using only the "e-Commerce" system currently can use
Online Conversation and Send email channels.
Please purchase the "Social Commerce" system to use the "Facebook Messenger,
Instagram, LINE, and WhatsApp" channels.
Step 4
Enable "Welcome Message" for Online Conversation and customize the message.
Once enabled, every time customers select the "Online Conversation" channel and log in to the store, they will receive a welcome message. For more details, please refer to the section below.
*Notes:
- The welcome message supports only text and emojis, up to 200 characters.
- If you do not customize the welcome message, the system will send the default message.
You can enable "WhatsApp guide message" and customize the message.
Once enabled, when customers contact you through WhatsApp, the guide message will be applied to their conversation box. For more details, please refer to the section below.
*Notes:
- WhatsApp guide message supports only text and emojis, up to 340 characters.
- If you do not customize the guide message, the system will send the default message.
Step 5
Click the Sort button at the top right to arrange the social channel order.
Step 6
In the "Appearance Settings" tab, you can customize the appearance of the Chat Widget button.
i. Headings
Enter the heading and subheading.
ii. Style
Select the button style.
iii. Theme Color
Customize the color of the button.
iv. Button Position
Set up the button position.
Step 7
Upon completion, click Save.
3. Storefront view
Once the above settings are complete, the Chat Widget button will appear on the storefront. Customers can click the button to contact the merchant via their preferred channel.
i. Online Conversation
When customers select "Online Conversation", the system will determine their login status:
-
Logged in: Display the conversation window with the customer.
-
Not logged in: It will direct customers to the login page. Once logged in, the conversation window will appear and customers will receive the welcome message.
If the customer has previously contacted the merchant through the "Message Store" button, the previous conversation will also appear in the conversation window.
When merchants reply, the customer will be notified in real-time:
- The preview of new messages will appear on the storefront. Customers can preview the new messages without opening the Chat Widget. Click the messages or the reply section to open the conversation window.
- Unread indicators will appear on the Chat Widget icon. An "x unread messages" indicator will also appear on the browser tab.
- Hover the cursor over the message or reply section to display the "close" button at the top right corner. Click to close the message preview; however, the unread indicators will still appear on the Chat Widget icon.
- Once closed, when the merchant sends a new message, it will only display the preview for new messages.
ii. Facebook Messenger
- Desktop version: When customers select "Facebook Messenger", a conversation window with the store's Facebook page will open in the new tab.
-
Mobile version: When customers select "Facebook Messenger", a conversation window with the store's Facebook page will open on the Messenger app.
iii. Instagram
-
Desktop version: When customers select "Instagram", it will open the store's Instagram profile page in the new tab.
-
Mobile version: When customers select "Instagram", it will open the store's Instagram profile page on the Instagram app.
iv. LINE
When customers select "LINE", they can scan the QR Code or click the Open LINE button.
-
Scan the QR Code: It will open a conversation window with the store's LINE official account on the LINE app.
-
Click "Open LINE": The QR Code for the store's LINE official account will open in the new tab.
If you set up a personal LINE friend QR code URL, customers will be directed to your LINE personal account page in the LINE app when they scan the QR code, where they can add your account as a friend.
When customers click Open LINE, it will display the QR Code for the personal LINE account.
v. WhatsApp
When customers select "WhatsApp", they can scan the QR Code or click the Open WhatsApp button.
-
Scan the QR Code: It will open a conversation window with the store's WhatsApp account on the WhatsApp app. The conversation will begin with the custom guide message you set up before.
-
Click "Open WhatsApp": It will open the desktop version of WhatsApp in the new tab. The custom guide message will be imported as well.
vi. Send Email
When customers select "Send Email", the "Message Shop" pop-up window will be displayed. Customers can contact the merchant via Email or Mobile Number.
4. Reply to customers' messages
If the Chat Widget displays social channels that you have integrated through Admin > [Channel Integration], you can manage customer messages sent through Facebook, Instagram, LINE, and WhatsApp in the [Message Center] > [Instant Message] page.
If the Chat Widget displays social channels that are not integrated in the Admin, merchants will need to reply to customer messages directly from the respective channels.
If customers select "Online Conversation" or "Send Email" to contact the customers, merchants can view and reply to the messages in the [Message Center] > [Shop Message] > [Shop Message] tab.
5. Notes
1. If customers do not install any social app on their mobile devices, it will display as follows:
-
Facebook Messenger App
- iOS: The system will direct the customer to the Messenger app installation page.
- Android: For Chrome browser users, it will direct the customer to the Messenger app installation page. For other browser users, it will fail to direct to any pages and show no response.
- WhatsApp: The system will direct the customer to the desktop version page of WhatsApp (iOS and Android).
- LINE: The system will direct the customer to the LINE app installation page (iOS and Android).
2. The Chat Widget button is currently not available on the Blog Posts page and Sign-in/ Sign-up page.
Read more
Comments