Chat Widget | Message Center

Avatar
SHOPLINE Merchant Success
Follow

SC.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] and click the gear icon on the bottom left of the page. Then, select Chat Widget.

Chat_widget_1.png

 

Step 2

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

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

After installation, go to [Message Center] > [Settings] > [Chat Widget].

Chat_widget_6.png

 

Step 2

Switch on the "Enable Chat widget" toggle.

Chat_widget_7.png

 

Step 3

Customize the appearance of the Chat Widget button.

A. Headings

Insert the heading and subheading.

Chat_widget_8.png

 

B. Style

Select the button style.

Chat_widget.gif

 

C. Theme Color

Customize the color of the button.

Chat_widget_9.png

 

D. Button Position

Set up the button position.

Chat_widget_10.png

 

Step 4

Under the "Social Channels" tab, you can select the social channel the customer can use to reach you.

*Note: Please select at least one social channel.

Chat_widget_11.png

 

*Note:

1. First, you need to enable the social channel integration in the SHOPLINE Admin > [Channel Integration] before enabling it directly for the Chat Widget. Otherwise, a "Connect" button will be displayed next to the social channel.

Chat_widget_12.png

 

2. If you have integrated a Facebook page or Instagram account before, you can click Switch to select other connected pages or accounts. 

Chat_widget_13.png

 

3. You can customize guide messages for WhatsApp. When customers use WhatsApp to reach you, their conversation will begin with the guide message. For more details, you can refer to the section below.

Chat_widget_14.png

 

Step 5

Click Save.

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

Chat_Widget_storefront.gif

 

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

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

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

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

E. Instant Message

When customers select Instant Message, the "Message Shop" pop-up window will be displayed. The customer can contact the merchant via Email or Mobile Number.

Screen_Shot_2023-02-21_at_6.54.10_PM.png

 

4. 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. If you have enabled Facebook Messenger's Customer Negotiation Plugin and switched on the Chat Widget feature, it will display 2 chat buttons on the storefront.

*Note: If your Chat Widget button is located at the bottom right of the page, the Customer Negotiation Plugin will cover the Chat Widget button. This will also happen with other third-party plugins. Therefore, it is recommended to use only one plugin at a time.

Screen_Shot_2023-02-21_at_6.55.17_PM.png

 

 

Read more

Features in Message Center

 

 

 

 

 

Have more questions? Submit a request

Comments