Stella Platform Documentation

Stella Platform Documentation

  • Docs
  • Procedures
  • Reference
  • FAQ
  • Bot API
  • API
  • Languages iconEnglish
    • 中文

›Connect Shopify Store to Stella

Basic Facebook Chatbot Setup

  • Overview
  • 1.1: Connect to Channels
  • 1.2: Create New Tree
  • 1.3: Build the First Node
  • 1.4: Create a Global Node
  • 1.5: Build Child Nodes
  • 2.1: Production Channel
  • 3.1: Draft a Post
  • 3.2: Create Public/Private Reply

Basic Web Chat Chatbot Setup

  • Overview
  • 1.1: Connect to Channels
  • 1.2: Create New Tree
  • 1.3: Build the First Node
  • 1.4: Create a Global Node
  • 1.5: Build Child Nodes

Basic WhatsApp Chatbot Setup

  • Overview
  • 1.1: WABA Subscription
  • 1.2: Connect WABA
  • 2.1: Create New Tree
  • 2.2: Build the First Node
  • 2.3: Create a Global Node
  • 2.4: Build Child Nodes
  • 2.5: Connect to Datasource
  • 3.1: Create Priority Group

Advanced Chatbot Application

  • Overview
  • Apply Datasource to Chatbot
  • Apply Payload Value to Chatbot
  • Apply API to Chatbot
  • Apply Custom Locale to Chatbot
  • Apply Opt-in Flow to Chatbot
  • Apply Agenda to Chatbot
  • Apply Stella API to Chatbot

Stella Partner Portal Setup

  • Overview
  • 1.1: Partner Portal Setup
  • 1.2: New Customer Onboarding
  • 1.3: WABA Setup

Template Tree

  • Overview
  • Create Template Tree
  • Manage Proxy Tree

Chatbot Testing & Deployment

  • Overview
  • Stage One - Tree Building
  • Stage Two - Testing Stage
  • Stage Three - Production Deployment

Slack Live Chat Tree Setup

  • Overview
  • 1.1: Create Tree for Live Chat Assignment
  • 2.1: Set Up Pick Ticket Status
  • 2.2: Create Done Command
  • 2.3: Create Transfer Command
  • 2.4: Create Archive Function
  • 2.5: Create Member Tagging/Remarks Command
  • 3.1: Automatic End Live Chat Function

Zendesk Live Chat Tree Setup

  • Overview
  • 1.1: Create Tree for Assignment
  • 2.1: Create Done Command

FAQ Chatbot Setup

  • Overview
  • 1.1: Exact Keyword Match
  • 2.1: Exact Keyword Match & Diversion
  • 3.1: Keyword Groups Match & Diversion
  • 4.1: Redirect to Existing Chatbot Tree
  • 4.2: Data Analytics for FAQ Chatbot
  • 4.3: NLP for FAQ Chatbot
  • 5.1: Filtering Questions for FAQ Chatbot

NLP Chatbot Setup

  • Overview
  • 1.1: Apply NLP to your Chatbot
  • 2.1: Set Up an NLP Fallback Tree
  • 3.1: NLP Fallback to Other Languages

Connect Shopify Store to Stella

  • Overview
  • 1.1: Integrate Stella to Shopify
  • 2.1: Apply Facebook SDK to Shopify
  • 2.2: Setup Facebook Messenger Chatbot for Shopify
  • 2.3: Setup WhatsApp Chatbot for Shopify
  • 2.4: WhatsApp Customer Care Notification for Shopify

Apply Facebook SDK to Shopify

Getting Hands-on

  1. You should duplicate and back up your code base on Shopify. To do so, please access the admin panel of your Shopify store.
  1. Head to "Themes" under “Online Store” and duplicate your current theme.

Duplicate theme
  1. Go to “Edit code”.

Edit code
  1. Search for “theme.liquid” on the left side of the menu

Search for theme.liquid
  1. Insert the following code before the </head> tag.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uuid@latest/dist/umd/uuidv4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
  1. Insert the following code after the above code.

Click to view code

<script>
   function constructSessionId() {
     var sessionId = Cookies.get("sessionId")
     if (!sessionId) {
       var uuid = uuidv4()
       sessionId = uuid.replace(/-/g, '')
       Cookies.set("sessionId", sessionId)
     }
     return sessionId;
   }

   function getCookiesInterval() {
     var getCookiesHandle = window.setInterval(function () {
       var cartCookies = Cookies.get("cart")
       console.log("Cookies not found. Continue looping...")
       if (cartCookies) {
         console.log("Cookies found!")
         clearInterval(getCookiesHandle)
         updateCartCookies({ updateCart: true })
       }
     }, 5000)
    }

   function updateCartCookies({ updateCart, onPressFBButton }) {
     var sessionId = constructSessionId()
     var cartCookies = Cookies.get("cart")
     var lineItems;

     // Call Api to Update
     if (!(cartCookies || onPressFBButton)) {
       return getCookiesInterval()
     }

     window.setTimeout(function() {
       $.ajax({
         type: 'GET',
         url: '/cart.js',
         async: false,
         cache: false,
         dataType: 'json',
         success: function(data) {
           lineItems = data.items
         }
       });
       console.log('lineItems', lineItems)
       if (sessionId && cartCookies && lineItems.length > 0) {
         $.ajax({
           type: 'POST',
           url: 'https://z0jhk3u2gd.execute-api.ap-southeast-1.amazonaws.com/prod/shopifyCookiesUpdate?shopifyDomain={{STORE_DOMAIN}}',
           async: false,
           cache: false,
           data: JSON.stringify({
             sessionId: sessionId,
             cartId: cartCookies,
             updateCart: updateCart,
             lineItems: lineItems,
           })
         })
         .done((data) => {
           if (data.modified) {

           } else {

           }
         })
       }
     }, 2000)
   }

   function addToCartEvent() {
     console.log('Cart Added')
     updateCartCookies({ updateCart: true })
   }


   $(document).ready(function () {
    function onPageLoad() {
      constructSessionId()
      updateCartCookies({ updateCart: false })
    }

     onPageLoad()
     document.getElementById("AddToCart").addEventListener('click',function (){
        addToCartEvent();
    });
    // Send to Messenger Logic
    window.fbAsyncInit = function () {
      FB.init({
        appId: '2087214101500691',
        xfbml: true,
        version: "v2.6",
      });

      // Parse Send to Messenger
        (function() {
          var sessionId = constructSessionId()

          // Restock Send To Messenger is always there
          var restockDiv = $('.fb-send-to-messenger-restock-container');
          if (restockDiv.length > 0) {
            var restockMessenger = $('.fb-send-to-messenger-restock-container .fb-send-to-messenger');
            var dataRef = restockMessenger.attr("data-ref");
            var dataRefArray = dataRef.split('_');
            var newDataRef = dataRefArray[0] + "_" + dataRefArray[1] + "_" + sessionId;
            restockMessenger.attr("data-ref", newDataRef);
            FB.XFBML.parse(document.getElementsByClassName('fb-send-to-messenger-restock-container')[0]);
          }
          // Product Send To Messenger
          var productTagDiv = $('.fb-send-to-messenger-product-tag-container')
          if (productTagDiv.length > 0) {
            productTagDiv.each((index, div) => {
              var productTagMessenger = $(div).find(".fb-send-to-messenger");
              var dataRef = productTagMessenger.attr("data-ref");
              var dataRefArray = dataRef.split('_');
              var newDataRef = dataRefArray[0] + "_" + dataRefArray[1] + "_" + sessionId;
              productTagMessenger.attr("data-ref", newDataRef);
              FB.XFBML.parse(document.getElementsByClassName('fb-send-to-messenger-product-tag-container')[index]);
            })
          }
        })()

        FB.Event.subscribe('send_to_messenger', function(e) {
          console.log(e)
          if (e.event === "opt_in") {
            console.log("Clicked Send To Messenger Plugin")
            updateCartCookies({ updateCart: true, onPressFBButton: true })
          }
        });
    };
   })
</script>

  1. Replace {{STORE_DOMAIN}} in the above code with the real domain of your store.

  2. Search for “product-template.liquid” in the left side of the menu.

Search for product-template.liquid
  1. Insert the following code after <div class="product-form__item product-form__item--submit>...</div> block:
{% if product.available == false %}
 <!-- Restock Send To Messenger -->
 <div class="fb-send-to-messenger-restock-container {% unless current_variant.available %}variant-not-available{% endunless %}">
  <div style="display: flex; flex-direction: column; font-size: 12px;">
   <div style="margin-bottom: 4px; font-size: 15px;">Let me know when it is in stock!</div>
   <div id="fb-send-to-messenger-restock"
    class="fb-send-to-messenger"
    messenger_app_id="2087214101500691"
    page_id={{PAGE_ID}}
    data-ref="STOCK_{{ current_variant.id }}"
    color="blue"
    size="large"
    ></div>
   </div>
  </div>
{% endif %}
  1. Insert the below code before <div class="product-single__description rte"> {{ product.description }} </div> block:
        {% if product.tags contains 'WAITING_SALE' %}
          <div class="fb-send-to-messenger-product-tag-container">
            <div style="display: flex; flex-direction: column; font-size: 12px;">
              <div style="margin-bottom: 4px; font-size: 15px;">Notify me when there is a sale!</div>
              <div id="fb-send-to-messenger-product-tag"
                   class="fb-send-to-messenger"
                   messenger_app_id="2087214101500691"
                   page_id={{PAGE_ID}}
                   data-ref="SALE_{{ current_variant.id }}"
                   color="blue"
                   size="large"
                   ></div>
            </div>
          </div>
        {% endif %}
        {% if product.tags contains 'COUPON' %}
          <div class="fb-send-to-messenger-product-tag-container">
            <div style="display: flex; flex-direction: column; font-size: 12px;">
              <div style="margin-bottom: 4px; font-size: 15px;">I would like to receive a coupon code</div>
              <div id="fb-send-to-messenger-product-tag"
                   class="fb-send-to-messenger"
                   messenger_app_id="2087214101500691"
                   page_id={{PAGE_ID}}
                   data-ref="COUPON_{{ current_variant.id }}"
                   color="blue"
                   size="large"
                   ></div>
            </div>
          </div>
        {% endif %}
  1. Replace the {{PAGE_ID}} in the above code with your real Facebook page ID.

  2. Add id="AddToCart" after <button type="submit" name="add".

  3. You are all set! You may proceed to build the messenger chatbot for Shopify.

← 1.1: Integrate Stella to Shopify2.2: Setup Facebook Messenger Chatbot for Shopify →
  • Getting Hands-on
Stella Platform Documentation
Docs
Get StartedBest PracticesAPI ReferenceStandard Procedures
Community
FAQUser ShowcaseChat with Us
Copyright © 2021 Sanuker Inc. Limited