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.
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 the registration process
On the Welcome screen, click “I’m a Developer“
Pass Shopify authorization
You will be redirected to your Shopify store, log in and click the install button
After successful installation, you will be redirected back to Talkable
Click “Integrate automatically“
Turn on coupon auto-sync checkbox
Create, set up, and launch Campaigns (Invite, Advocate Dashboard, etc.)
Verify your integration using Verifying Integration instructions.
Note
Post Purchase campaign is located on the “Thank you” page after Checkout.
To check how the Standalone Campaign looks visit/pages/share or /pages/invite links of your store. You can edit these links in the Administrative panel of your store.
Manual integration
Provide a valid Shopify store URL and choose “Shopify” as your platform during the registration process
On the Welcome screen, click “I’m a Developer”
Pass Shopify authorization
You will be redirected to your Shopify store, login and click the install button
After successful installation, you will be redirected back to Talkable
Click “Integrate manually“
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 }}',
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 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”.
Then navigate to:
Open Themes / Templates
Click “Add a new template“
Create a new template for a 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 %}
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)
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, 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”.
Verify your integration using Verifying Integration instructions.
