Visit www.talkable.com

Shopify Integration

Automatic integration

Note

If you have previously integrated with Talkable, make sure you remove the manual Talkable integration script located in the Additional Content & Scripts section before you start the Automatic integration process. See Manual integration for details.

  1. Contact sales@talkable.com to learn about our pricing and set up an account with Talkable

- Provide a valid Shopify store URL. Example: http://123test.myshopify.com.
- Choose “Shopify” as your platform during registration process

  1. On the Welcome screen click “I’m a Developer”
  2. Click Install Shopify App
  3. You will be redirected to your Shopify store, log in and click the install button
  4. After successful installation you will be redirected back to Talkable
  5. Create, set up, and launch Campaigns (Invite, Advocate Dashboard, etc.)
  6. Verify your integration using Verifying Integration instructions.

Note

Post Purchase campaign is located at the “Thank you” page after Checkout.

To check how Standalone Campaign looks visit /pages/share or /pages/invite links of your store. You can edit these links in Administrative panel of your store.

Manual integration

  1. In your Shopify Admin follow:

    • Online Store
    • Themes
    • Click “Customize” near your current theme
    • Theme actions → Edit code
    • Open Layout / theme.liquid file
    • Before closing </head> paste the following code:
    <!-- Begin Talkable integration code -->
    <script type="text/javascript">
      window._talkableq = [['init', {
        site_id: 'YOUR-TALKABLE-SITE-ID' // REQUIRED - Replace with your Talkable Site ID
      }]];
      {% if customer %}
        _talkableq.push(['authenticate_customer', {
          email:      {{ customer.email }},
          first_name: {{ customer.first_name }},
          last_name:  {{ customer.last_name }}
        }]);
      {% endif %}
      _talkableq.push(['register_affiliate', {}]);
    </script>
    <script src="https://YOUR-PER-CLIENT-INTEGRATION.js" type="text/javascript"></script>
    <!-- End Talkable integration code -->
    

    Note

    Replace YOUR-TALKABLE-SITE-ID with your Talkable Site ID. You can get this from your Talkable site dashboard after you log in.

    Note

    Replace YOUR-PER-CLIENT-INTEGRATION with the link to your per-client integration library. In the header click Menu → Integration → Switch to “Other platform”. There you will see a <script> tag, copy its src attribute value. Example: //d2jjzw81hqbuqv.cloudfront.net/integration/clients/test.min.js.

    • Click “Save”.
  2. Then navigate to:

    • Settings
    • Checkout
    • Scroll down to Order Processing
    • Paste the following code into Additional scripts field:
    <!-- Begin Talkable integration code -->
    <script type="text/javascript">
      window._talkableq = [['init', {
        site_id: 'YOUR-TALKABLE-SITE-ID' // REQUIRED - Replace with your Talkable Site ID
      }]];
    
      if (Shopify && Shopify.checkout) {
        checkout = Shopify.checkout
        var _talkable_order_items = [];
        for (idx in checkout.line_items) {
          line = checkout.line_items[idx];
          _talkable_order_items.push({
            product_id: line.sku || line.product_id, // REQUIRED - First Item Product ID
            price: line.price, // REQUIRED - First Item Unit Price
            quantity: line.quantity, // REQUIRED - First Item Quantity
            title: line.title, // Optional - Name of product
          });
        }
    
        var _talkable_data = {
          purchase: {
            order_number: checkout.order_id, // REQUIRED - Order number
            subtotal: checkout.total_price, // REQUIRED - Purchase Subtotal
            coupon_code: checkout.discount ? checkout.discount.code : null,
            items: _talkable_order_items
          },
          customer: {
            email: checkout.email, // REQUIRED - Customer Email Address
            first_name: checkout.billing_address ? checkout.billing_address.first_name : null, // Optional - Customer first name
            last_name: checkout.billing_address ? checkout.billing_address.last_name : null // Optional - Customer last name
          }
        };
    
        if (checkout.shipping_address) {
          shipping_address = checkout.shipping_address;
          shipping_fields = ['address1', 'address2', 'city', 'province', 'zip', 'country'];
          address = [];
    
          for (var idx in shipping_fields) {
            address_key = shipping_fields[idx];
            if (shipping_address[address_key]) {
              address.push(shipping_address[address_key]);
            }
          }
    
          if (shipping_address.zip) {
            _talkable_data.purchase.shipping_zip = shipping_address.zip;
          }
          if (address.length) {
            _talkable_data.purchase.shipping_address = address.join(', ');
          }
        }
    
        _talkableq.push(['register_purchase', _talkable_data]);
      }
    </script>
    <script async src="YOUR-PER-CLIENT-INTEGRATION" type="text/javascript"></script>
    <!-- End Talkable integration code -->
    

    Note

    Replace YOUR-TALKABLE-SITE-ID with your Talkable Site ID. You can get this from your Talkable site dashboard after you log in.

    Note

    Replace YOUR-PER-CLIENT-INTEGRATION with the link to your per-client integration library. In the header click Menu → Integration → Switch to “Other platform”. There you will see a <script> tag, copy its src attribute value. Example: //d2jjzw81hqbuqv.cloudfront.net/integration/clients/test.min.js.

  3. Click “Save”.

  4. Verify your integration using Verifying Integration instructions.

Watch a video demonstrating the full integration from start to finish.