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: https://123test.myshopify.com.
- Choose “Shopify” as your platform during registration process

2. Install the Shopify integration app via the link provided by Talkable team

3. After the successful installation you will be redirected back to Talkable

4. Enable “Referral Integration“ toggle

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. Provide a valid Shopify store URL and choose “Shopify” as your platform during registration process

2. On the Welcome screen click “I’m a Developer”

3. Pass Shopify authorization

4. You will be redirected to your Shopify store, log in and click the install button

5. After successful installation you will be redirected back to Talkable

6. Click “Integrate manually“

7. In your Shopify Admin follow:

   • Online Store

   • Themes

   • 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 }}',
         phone_number: '{{ customer.phone }}',
         first_name:   '{{ customer.first_name }}',
         last_name:    '{{ customer.last_name }}'
       }]);
     {% endif %}
   </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 which is displayed on the integration page.

   Note

   Replace YOUR-PER-CLIENT-INTEGRATION with the link to your per-client integration library which is displayed on the integration page. Example: https://d2jjzw81hqbuqv.cloudfront.net/integration/clients/test.min.js.

   • Click “Save”.

8. Then navigate to:

   • Open Themes / Templates

   • Click “Add a new template“

   • Create a new template for page called talkable

   • Paste the following code inside layout of this page instead of {{ page.content }}:

   <div id="talkable-offer"></div>
   

   • Click “Save”

   • Create a new template for page called dashboard.talkable

   • Paste the following code inside layout of this page instead of {{ page.content }}:

   {% if shop.customer_accounts_enabled %}
     {% if customer %}
       <div id="talkable-offer"></div>
     {% else %}
       {{ 'Log in' | customer_login_link }}
     {% endif %}
   {% endif %}
   

9. Then navigate to:

   • Open Online Store / Pages

   • Click “Add page“

   • Add title Share

   • Select Template suffix page.talkable

   • Click “Save”

   • Click “Add page“

   • Add title Referral Dashboard

   • Select Template suffix page.dashboard.talkable

   • Click “Save” (Customer accounts must be enabled in Settings / Checkout)

10. Then navigate to:

    • Settings

    • Checkout

    • Scroll down to Order status page

    • 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
            currency_iso_code: checkout.presentment_currency, // Optional - Purchase Currency. REQUIRED for Multi-Currency Sites
            subtotal: checkout.total_price, // REQUIRED - Purchase Total price
            tax_amount: checkout.total_tax, // REQUIRED - Purchase tax amount
            discount_amount: checkout.discount ? checkout.discount.amount : null, // REQUIRED - Total Discount
            shipping_amount: checkout.shipping_rate ? checkout.shipping_rate.price : null, // REQUIRED - Total Shipping Cost
            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 which is displayed on the integration page.

    Note

    Replace YOUR-PER-CLIENT-INTEGRATION with the link to your per-client integration library which is displayed on the integration page. Example: https://d2jjzw81hqbuqv.cloudfront.net/integration/clients/test.min.js.

11. Click “Save”.

12. Verify your integration using Verifying Integration instructions.

• Verifying Integration instructions
  • Verifying Integration in JS SPAs
  • Troubleshooting