Shopify Integration for TRIAL user

Nhi Luong Updated by Nhi Luong

To set up Shopify for the trial user, the user needs to set up from both the Shopify setting page and the WATI integration page.

A.Shopify setting page

  1. From Shopify, login to your account then go to the App Store: https://apps.shopify.com/, and find "WhatsApp Chat & Cart Recovery"

2. Click "Add app" and then "Install App", and the permission screen will be popup to ask for certain access rights

3. After installation, it will be redirected to the WATI Register/Login page

B. WATI setting

4. Users need to sign up by Facebook or Google or self-create a new account

5. Once finish registering, the system will auto-login and open the integration page (with an account linked from Facebook or Google) OR the user need to manually login after the email verification step (with account create by email) then access "Integration", click "Shopify" icon. The below image is for the second type of user.

6. Upon clicking, the default value of the Live Chat button is Disable. We need to click to enable it.

After enabling, the system displays two parts: Whatsapp Chat and Automated Message

Whatsapp Chat: "Chat Button Settings" and "Chat Widget settings"

Chat Button Settings: We can set up the GUI of a button that will display on our Shopify page, including:

  • Colour (select colour or input code)
  • Text display. Eg: Chat with us
  • Border Radius. For eg, if it's 0, the button is in rectangle shape. If it >0, it's changing to an ellipse shape.

Chat Widget settings: We can set up the GUI of the chat widget (when the user click in chat button), including:

  • Brand Name
  • Brand Sub Title
  • Phone Number
  • Brand Image
  • Welcome Text
  • Background Color
  • CTA Text
  • Border Radius(px)
  • Open widget by default: True/False. If we choose True when customers go to our shop, the chat widget will auto-open by default, the customer doesn't need to click the Chat button.

After finish setup, go back to the store and refresh the page, we will see the chat button and chat widget (when clicking the button)

When customers start chat and send questions, the question will be sent to WATI (if the WhatsApp number is integrated into Wati) or to that WhatsApp number directly.

Automated Message: This feature allow users to trigger some automated messages in each event:

  • Collect WhatsApp opt-in from Checkout Page: read and follow the instruction when clicking the button:

Below are some message triggers automatically for each event.

There already have the default template that we can use as below:

Message

Default template

Abandoned Recovery Message

shopify_default_abandoned_recovery_v4

Order completed/confirmation

shopify_default_order_complete_v4

Order fulfilled

shopify_default_order_fulfilled_v4

Follow up after Purchase

shopify_default_follow_up_v4

Return and exchange request

shopify_default_refund_v4

If the user integrates WATI with Shopify and decides to continue with WATI, you can also create a new beautiful template with your own content and pull it out automatically.

Note that in order for the template to be displayed in Shopify, the template category should be "Shipping Update".

Abandoned Recovery Message: When click enables, the setting will be displayed, User can select the template, the time to be sent (after the event happens). In this step we can also tick to include a discount coupon with discount type is % or fixed discount with code.

Order completed/confirmation: When click enable, the setting will be displayed, User can select a template and include a discount coupon

Order fulfilled: When click enable, the setting will be displayed, User can select a template

Follow up after Purchase: When click to enable, the setting will be displayed, User can select a template, the time to be sent (after the event happens). In this step we can also tick to include a discount coupon with discount type is % or fixed discount with code.

Return and exchange request: When click to enable, the setting will be displayed, User can select a template.

How did we do?

WhatsApp Chat Button Integration

What are fix variables for Woocomerce integration?

Contact