Visit www.talkable.com

Shopify

Automatic integration

Note

If you have previosuly 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. Install the Shopify Talkable application.
  2. In your Talkable administration panel, go to Dashboard → Expand Settings dropdown → Shopify Integration.
  3. Then click Install Talkable in your Shopify administration panel.
  4. Modify existing integration script if needed.
  5. Activate Post Purchase or Invite(Standalone) Campaign.
  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 administration panel, go to SettingsCheckout & Payment.

  2. Under Order ProcessingAdditional Content & Scripts, insert this code:

    Note

    To get your personal integration code, YOUR-TALKABLE-SITE-ID needs to be replaced with your Talkable Site ID. You can get this from your Talkable dashboard after you log in and create a site.

    <!-- Begin Talkable integration code -->
    <script type="text/javascript">
      var _talkableq = _talkableq || [];
      _talkableq.push(['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
          },
          campaign_tags: ['post-purchase'],
          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 src="//d2jjzw81hqbuqv.cloudfront.net/integration/talkable-3.0.6.min.js" type="text/javascript"></script>
    <!-- End Talkable integration code -->
    
  3. Click Apply these settings.

  4. Verify your integration using Verifying Integration Instructions.


Passing traffic_source through the URL

When driving traffic to one of your campaigns, you can include a traffic source parameter as a URL query string to help segment your reporting. This is helpful when you are driving traffic from many different sources to the same campaign. This makes sense to do for both on-site and off-site call to actions where you want to specifically want to track your traffic source. For example, if you are driving traffic on-site to your Standalone campaign both from your home page navigation bar and from your footer template, and you wanted to see which one is more high value and driving more traffic to your campaign you could look at the different traffic sources in reporting to clearly see this.

How to use the traffic_source parameter in a call to action:

Say you have a Standalone integration displaying a campaign on www.yoursite.com/share. You could append the traffic_source parameter on to your footer call to action as seen below:

www.yoursite.com/share?traffic_source=footer