Facebook Live | Website Live

Avatar
SHOPLINE TW Copywriters
Follow

2. SC (EN).png

4. 進階社群導購 (1).png

SHOPLINE introduces the "Website Live" feature, which allows customers to watch the livestream and place orders as they browse through the store website, thereby boosting the overall conversion rates.

*Notes:

  • This feature is only available for merchants with the "Advanced Social Commerce" module.
  • Currently, this feature is only available for Facebook Page livestream, SHOPLINE Live, and SHOPLINE Live synced to Facebook Page.

This article will cover the following:

 

1. App installation

Step 1

In the SHOPLINE Admin, go to [Social Commerce] > [SHOPLINE Live] and enter a livestream. Click the Website Live button on the top and select Go to Apps Store.

Screen Shot 2024-01-16 at 5.10.32 PM.png

 

Step 2

Click Free trial and follow the installation instructions.

Screen Shot 2024-01-16 at 5.13.26 PM.png

 

Step 3

Upon installation, go to [Apps] > [My Apps] and click Activate script next to Website Live.

*Note: Once the trial ends, please contact the Online Merchant Success Team for further inquiries.

Screen Shot 2024-01-16 at 5.15.04 PM.png

 

2. Enable Website Live

*Note: To enable the "Website Live" feature, please start the livestream in advance.

i. Facebook Page livestream

Once you start a livestream on the Facebook Page and connect to the livestream on the Admin, click the Website Live button on the top left.

  1. Switch on the "Website Live" toggle.
  2. Select the order method (non-editable once saved).
  3. Click Save.

Screen Shot 2024-01-16 at 5.26.42 PM.png

 

ii. SHOPLINE Live

Once you start a livestream on the SHOPLINE app, click the Website Live button on the top left.

  1. Switch on the "Website Live" toggle.
  2. Click Save.

*Note: Since you have selected the livestream mode (Keyword +1 or Live Catalog) while creating a SHOPLINE Live, it will apply the same setting and you do not need to customize it again.

Screen Shot 2024-01-16 at 5.30.22 PM.png

 

iii. SHOPLINE Live synced to Facebook Page

Select the "Sync live to Facebook Page" option when creating a livestream on the SHOPLINE app. Once you start the livestream, click the Website Live button on the top left.

  1. Switch on the "Website Live" toggle.
  2. Select the livestream channel interface to be displayed on the website: Facebook Page or SHOPLINE Live (non-editable once saved).
  3. Click Save.

*Note: Since you have selected the livestream mode (Keyword +1 or Live Catalog) while creating the livestream, it will apply the same setting and you do not need to customize it again.

Screen Shot 2024-01-16 at 5.16.49 PM.png

 

*Note: If the website live is already displaying an existing livestream on the storefront, a prompt will appear when you try to enable this feature.

Screen Shot 2024-01-16 at 5.29.55 PM.png

 

3. Website Live interface (Desktop version)

The Website Live feature will be displayed on the following pages in the storefront:

Screen Shot 2024-01-29 at 2.57.49 PM.png

 

i. Display the Facebook Page livestream interface on the storefront

With the following settings, the livestream interface from Facebook Page will be synced to website of your online store:

- "Website Live" is enabled for Facebook Page livestream
 (The instructions below will be instructed based on this setting).
- "Website Live" is enabled for SHOPLINE Live synced to Facebook Page,
and the selected livestream channel is Facebook Page.

 

A. View the livestream

Customers can find the livestream window on the bottom right of the storefront.

Screen Shot 2024-01-25 at 12.12.52 PM.png

*Note: Upon entering the storefront, the system will take a while to load the livestream.

Screen Shot 2024-01-25 at 12.24.50 PM.png

 

Click on the livestream window to maximize and watch the livestream.

  1. Click the icon on the top left to close or minimize the livestream window.
  2. A recommended product (if any) will be displayed on the livestream. Click the "x" icon to close the recommended product block.
  3. Click the 截圖 2023-12-04 下午7.06.57.png icon on the bottom right to hide the icons on the page (live chat, cart, etc.), and the recommended product block.

Screen Shot 2024-06-04 at 12.55.36 PM.png

*Notes:

  • Due to limitations from Facebook, the livestream defaults to muted when customers first enter. To enable sound, hover the cursor on the livestream interface and then adjust it using the volume icon from Facebook.
    Screen Shot 2024-06-04 at 12.55.43 PM.png

  • Click the "share" icon to share the livestream.
    Screen Shot 2024-06-04 at 12.55.43 PM copy.png

 

B. Add products to the cart

Customers must log in as a member to place an order. Click the "Leave comments" section and it will direct them to the store login page.

If you set the order method as "Keyword+1", customers can comment with the keyword to add the product to the cart.

Screen Shot 2024-06-04 at 12.55.57 PM.png

*Notes: The Live Chat in Website Live will display comments customers leave on the Facebook platform, only if: 

  • "Website Live" is enabled for Facebook Page livestream, and the selected order mode is"Keyword +1".
  • "Website Live" is enabled for SHOPLINE Live synced to the Facebook Page,
    and the selected livestream channel is Facebook Page.

Screen Shot 2024-06-04 at 12.56.40 PM.png

 

If you select "Live Catalog" as the livestream mode, click the Screen Shot 2024-06-04 at 12.52.30 PM copy.png icon to open the Live Products page. Then, click the "cart" icon next to the product to add it to the cart.

Screen Shot 2024-06-04 at 12.51.03 PM.png

 

C. Checkout

Click the 截圖 2024-05-13 下午3.58.23.png icon to open the cart. Upon confirmation, click Proceed to Checkout.

Screen Shot 2024-06-04 at 12.57.20 PM.png

 

You will be directed to the checkout page. Follow the subsequent steps to complete the checkout.

Screen Shot 2024-01-25 at 12.23.43 PM.png

 

D. Livestream playback

Once the livestream ends, the livestream playback will be available on the storefront unless you disable the "Website Live" feature in the Admin.

  • Keyword +1 livestream mode: Only supports livestream playback.
  • Live Catalog livestream mode: Supports placing orders from livestream playback.

Screen Shot 2024-06-04 at 12.58.24 PM.png

 

ii. Display SHOPLINE Live interface in the storefront

The following settings will display the interface from SHOPLINE Live:

- "Website Live" is enabled for SHOPLINE Live
(The instructions below will be instructed based on this setting).
- "Website Live" is enabled for SHOPLINE Live synced to Facebook Page,
and the selected livestream channel is SHOPLINE Live.

 

The following interface is pretty much the same as "i. Display the Facebook Page livestream interface on the storefront", only the system retrieves the livestream interface from a different channel.

A. View the livestream

Customers can find the livestream window on the bottom right of the storefront. Click the window to maximize and watch the livestream.

  1. Click the icon on the top left to close or minimize the livestream window.
  2. A recommended product (if any) will be displayed on the livestream. Click the "x" icon to close the recommended product block.
  3. Click the 截圖 2023-12-04 下午7.06.57.png icon on the bottom right to hide the icons on the page (live chat, cart, volume, etc.), and the recommended product block.

Screen Shot 2024-06-04 at 4.52.28 PM.png

*Note: Click the 截圖 2024-05-13 下午4.00.58.png icon to adjust the resolution.

Screen Shot 2024-06-04 at 4.53.13 PM.png

 

B. Add products to the cart

Upon logging in as a member, if you set the order method as "Keyword+1", customers can comment with the keyword to add the product to the cart.

Screen Shot 2024-06-04 at 4.53.46 PM.png

 

If you select "Live Catalog" as the livestream mode, click the Screen Shot 2024-06-04 at 12.52.30 PM copy.png icon to open the Live Products page. Then, click the "cart" icon next to the product to add it to the cart.

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

 

C. Checkout 

Click the 截圖 2024-05-13 下午3.58.23.png icon to open the cart. Upon confirmation, click Proceed to Checkout.

You will be directed to the checkout page. Follow the subsequent steps to complete the checkout.

Screen Shot 2024-06-04 at 4.54.04 PM.png

 

D. Livestream playback

Once the livestream ends, the livestream playback will be available on the storefront unless you disable the "Website Live" feature in the Admin.

  • Keyword +1 livestream mode: Only supports livestream playback.
  • Live Catalog livestream mode: Supports placing orders from livestream playback.

Screen Shot 2024-06-04 at 4.55.34 PM.png

 

4. Website Live interface (Mobile version)

*The following instructions are based on the IOS interface.

When customers tap on the Website Live window on the storefront, tap play and enter full-screen mode to watch the livestream.

Screen Shot 2024-06-04 at 5.56.01 PM.png

 

Tap the 截圖 2024-03-20 下午3.48.55.png icon to exit full-screen mode and watch the livestream in picture-in-picture mode. Customers can access the live comments, add products to their cart, and more.

*Note: Android devices also support playing the livestream after exiting the full-screen mode. However, if they pause the video, they will need to enter full-screen mode to play the livestream again.

Screen Shot 2024-06-04 at 5.57.24 PM.png

 

5. Disable Website Live

To disable the Website Live feature from the storefront, please proceed to the livestream backstage in the Admin, switch off the "Website Live" toggle, and click Save.

*Note: If you do not switch off the "Website Live" feature after the livestream ends, the customer can still view the playback on the storefront.

Screenshot 2024-01-30 at 4.03.30 PM.png

 

6. Website Live supports the Event feature

If you enable the "Website Live" feature for the Facebook Page livestream, the viewers from Website Live will be able to participate in the event.

*Note: The following instructions will be illustrated using the "Lucky Draw" event.

Step 1

Click the Event button.

Screenshot 2024-05-14 at 3.20.53 AM.png

 

Step 2

Click Add and select Lucky Draw.

Screenshot 2024-05-14 at 3.21.49 AM.png

 

Step 3

Enter the event title, keyword, event quota, event time. Then, set up the advanced setting and prize content.

*Note: Viewers in Website Live are unable to tag friends and like a live post. Therefore, if these two options are selected, the system will automatically consider customers to have fulfilled these conditions.

Screenshot 2024-05-14 at 3.24.19 AM.png

 

Step 4

Then, you can set up the event message. Upon completion, click Create.

Screenshot 2024-05-14 at 3.24.31 AM.png

 

Customers participate in event (Merchant's interface)

Follow the steps similar to starting a Facebook livestream and enable the Website Live feature. Then, click the Go icon next to the event to begin.

i. Customers comment the event keyword

Screenshot 2024-05-14 at 3.41.59 AM.png

 

ii. Customers win the lucky draw

Screenshot 2024-05-14 at 3.42.52 AM.png

 

Customers participate in event (Customer's interface)

i. Customers comment the event keyword

Screenshot 2024-05-14 at 3.41.15 AM.png

 

ii. Customers win the lucky draw

Customers who won in the event can click the Screenshot 2024-05-14 at 3.01.59 AM.png icon to check the winning information (prize, limited voucher, etc.).

Screenshot 2024-05-14 at 3.43.44 AM.png

 

Customers can go to the Storefront > [Member Center] > [Messages] to view the winning message.

Screenshot 2024-05-14 at 3.44.38 AM.png

 

7. Announcement

You can create an announcement for SHOPLINE Live and SHOPLINE Live synced to Facebook Group Live. If you enable the "Website Live" feature, viewers on your website can also view the announcement.

Step 1

Click the Announcement button on the bottom right.

*Note: You need to start the livestream before creating the announcement.

Screen Shot 2024-07-31 at 5.49.52 PM.png

 

Step 2

Enter the announcement and click Send.

Screen Shot 2024-07-31 at 5.51.42 PM.png

*Note: If you select the Facebook interface for the Website Live, a tip will appear in the lower section to guide viewers on how to watch Facebook Live on your website using mobile devices.

Screen Shot 2024-07-31 at 5.56.05 PM.png

 

Upon completion, the announcement will appear on the Website Live. You can click the announcement to view the complete message.

Screen Shot 2024-08-01 at 3.39.34 PM.png

 

You can remove the announcement during the livestream.

Screen Shot 2024-07-31 at 5.52.46 PM.png

 

You can also create a new announcement.

Screen Shot 2024-07-31 at 5.53.48 PM.png

 

8. Notes

  • Once the "Website Live" feature is enabled for a Facebook Page livestream, the "Comment Management" and "Product Overview" tabs will have a "SHOPLINE Live" tab available, displaying statistics from the Website Live.
    Screen Shot 2024-01-25 at 2.20.59 PM.png

  • The following table outlines different livestream scenarios on the storefront:Screenshot 2024-01-30 at 3.56.48 PM.png
     

 

 

Read more

 

 

 

 

 

Have more questions? Submit a request

Comments