Chat Widget | Message Center

2. SC (EN).png

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].

Screen Shot 2024-07-10 at 6.13.34 PM.png

 

Step 2

Click the link on the right for the "Chat Widget" app.

Screen Shot 2024-07-10 at 6.19.46 PM.png

 

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.

Chat_widget_4.png

 

Step 4

Once you install the app, you can go to [Apps] > [My Apps] and click Activate script next to the "SHOPLINE Chat Widget".

Chat_widget_5.png

 

2. Settings

Step 1

Upon installation, go to [Message Center] > [Customer Assistant] > [Chat Widget].

Screen Shot 2024-07-10 at 6.43.38 PM.png

 

Step 2

Switch on the "Enable Chat widget" toggle.

Screen Shot 2024-07-10 at 6.46.29 PM.png

 

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.

Screen Shot 2024-07-10 at 6.54.33 PM.png

 

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.

Screen Shot 2024-07-10 at 7.03.08 PM.png

 

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.

Screen Shot 2024-07-10 at 7.08.47 PM.png

 

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.

Screen Shot 2024-07-11 at 11.35.36 AM.png

 

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.

Screen Shot 2024-07-11 at 11.36.46 AM.png

 

Step 5

Click the Sort button at the top right to arrange the social channel order.

Screen Recording 2024-07-10 at 3.02.52 PM.gif

 

Step 6

In the "Appearance Settings" tab, you can customize the appearance of the Chat Widget button.

i. Headings

Enter the heading and subheading.

Screen Shot 2024-07-11 at 11.59.48 AM.png

 

ii. Style

Select the button style.Screen Recording 2024-07-11 at 12.01.27 PM.gif

 

iii. Theme Color

Customize the color of the button.

Screen Shot 2024-07-11 at 12.01.54 PM.png

 

iv. Button Position

Set up the button position.

Screen Shot 2024-07-11 at 12.02.34 PM.png

 

Step 7

Upon completion, click Save.

Screen Shot 2024-07-11 at 12.02.34 PM copy.png

 

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.

Screen Recording 2024-07-11 at 12.13.27 PM.gif

 

i. Online Conversation

When customers select "Online Conversation", the system will determine their login status:

  • Logged in: Display the conversation window with the customer.

    Screen Shot 2024-07-11 at 12.20.01 PM copy.png

  • 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.Screen Recording 2024-07-11 at 12.27.09 PM.gif

 

If the customer has previously contacted the merchant through the "Message Store" button, the previous conversation will also appear in the conversation window.

Screen Shot 2024-06-12 at 2.46.46 PM copy 2.png

 

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.
    Screen Shot 2024-06-12 at 2.56.30 PM.png

  • Unread indicators will appear on the Chat Widget icon. An "x unread messages" indicator will also appear on the browser tab.Screen Shot 2024-06-12 at 2.58.33 PM.png

  • 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.
    Screen Shot 2024-06-12 at 2.57.01 PM.png

  • Once closed, when the merchant sends a new message, it will only display the preview for new messages.
    Screen Shot 2024-06-12 at 3.01.37 PM.png

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.
    Chat_widget_21.png

  • Mobile version: When customers select "Facebook Messenger", a conversation window with the store's Facebook page will open on the Messenger app.
    Chat_widget_25.PNG

iii. Instagram

  • Desktop version: When customers select "Instagram", it will open the store's Instagram profile page in the new tab.
    Chat_widget__16.png

  • Mobile version: When customers select "Instagram", it will open the store's Instagram profile page on the Instagram app.
    IMG_3396.png

iv. LINE 

When customers select "LINE", they can scan the QR Code or click the Open LINE button.
Chat_widget_17.png

  • Scan the QR Code: It will open a conversation window with the store's LINE official account on the LINE app.
    Chat_widget_23.PNG

  • Click "Open LINE": The QR Code for the store's LINE official account will open in the new tab.
    Chat_widget_18.png

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.

351F4D89-8989-4FDC-9C94-46FA22A9B618.png

 

When customers click Open LINE, it will display the QR Code for the personal LINE account.

Screen Shot 2024-07-11 at 2.30.02 PM.png

 

v. WhatsApp

When customers select "WhatsApp", they can scan the QR Code or click the Open WhatsApp button.
Chat_widget_19.png

  • 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.
    Chat_widget_22.PNG

  • Click "Open WhatsApp": It will open the desktop version of WhatsApp in the new tab. The custom guide message will be imported as well.
    Chat_widget_15.png

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.

Screen Shot 2024-07-11 at 12.43.21 PM.png

 

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.

Screen Shot 2024-07-11 at 2.49.53 PM.png

 

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.

Screen Shot 2024-07-11 at 2.50.35 PM.png

 

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

 

 

 

 

 

Have more questions? Submit a request

Comments