Klaviyo is a marketing automation tool that merchants can use to send marketing newsletters, abandoned cart and abandoned checkout emails, SMS marketing, and other custom customer communication flows. Using callbacks in checkout, you can configure a variety of Klaviyo’s messaging features manually via Bolt.
How It Works
An email or phone number is needed to identify a shopper. You can obtain this data from a pop-up form or at checkout by checking the marketing consent box. A cookie used for tracking is generated once a shopper is identified.. Klaviyo manages event capture and consent for most e-commerce platforms, but modifications may be necessary for Bolt’s checkout experience.
Integration
DEPRECATION
Bolt has deprecated the Klaviyo automatic integration. Use the manual integration method instead, which is outlined in this article.
Before You Start
Before you can integrate Bolt with Klaviyo, ensure that:
- You know which Klaviyo features you would like to enable.
- You have installed Klaviyo on your ecommerce platform so you can leverage their APIs to track events.
- You have reviewed Klaviyo’s documentation on using Sign-Up Forms to identify shoppers.
Available Events
Klaviyo tracks shopper activity on your site by capturing events.
Most events are transmitted automatically when you are integrated with Klaviyo. However, a few events such as those related to Checkout (e.g., Started Checkout) require additional setup. To capture these events, identify the shopper through a callback during checkout or through a Klavyo Form using the Javascript Track API.
Expand each section below to learn more about enabling that Klaviyo event or feature with your ecommerce platform.
Active on site
Viewed product
Added to cart
Started checkout
Placed order
Ordered product
Fulfilled, cancelled, or refunded order
Features
| Feature | BigCommerce | Shopify | WooCommerce | M2 | Server-side API |
|---|---|---|---|---|---|
| Identify shopper | Identify User through Bolt SSO or via callbacks | Identify User via callbacks | Install WooCommerce plugin for Klaviyo and the Bolt Plugin | Identify User via callbacks | Integrate a platform without a pre-built Klaviyo integration |
| Email consent at checkout | Server-side API: Captured from platform Customer data | Server-side API: Captured from platform Customer data | Install WooCommerce plugin for Klaviyo and the Bolt Plugin | Server-side API: Captured from platform Customer data | Integrate a platform without a pre-built Klaviyo integration |
| SMS consent at checkout | Proxy API | Proxy API | Install WooCommerce plugin for Klaviyo and the Bolt Plugin | Proxy API | Integrate a platform without a pre-built Klaviyo integration |
SMS Marketing
To use SMS Marketing with Klaviyo, you must first setup an SMS plan and sender number. See Klaviyo’s Getting Started with SMS guide. You can then leverage Klaviyo’s Proxy API along with callbacks to collect customer information and send SMS notifications.
Set Up for BigCommerce
Before You Start
Install the Klaviyo native integration in BigCommerce, according to Klaviyo’s How to Integrate with BigCommerce guide.
Events
The Klaviyo integrations can be implemented in the Bolt callbacks function.
| Event | Trigger | Data location |
|---|---|---|
| Started Checkout | onEmailEnter |
Client-side JS object |
| Placed Order | success |
Client-side JS object |
| Order Product | success |
Client-side JS object |
| Email Consent at Checkout | success |
Data sent by client-side subscription service call |
| SMS Consent at Checkout | success |
Data sent by client-side subscription service call |
| Identify Shopper | onEmailEnter |
Client-side JS object |
Example Script
This example is a script that captures these shopper events. Replace the variables in the table below with your store’s data.
| Variable | Definition |
|---|---|
COMPANY_ID |
The Merchant’s Klaviyo Company ID. Can be found in their Klaviyo script in the Script Manager. |
EMAIL_LIST_ID |
The Email consent list ID in Klaviyo. Should be provided by the merchant. |
SMS_LIST_ID |
The SMS consent list ID in Klaviyo. Should be provided by the merchant. |
NEWSLETTER_CHECKBOX_ID |
The public ID of the newsletter checkbox in the Bolt admin dashboard. |
SMS_CHECKBOX_ID |
The public ID of the SMS checkbox in the Bolt admin dashboard. |
var fetchCart = async function() {
const response = await fetch('/api/storefront/cart', {credentials: 'include'});
const data = await response.json();
return data;
}
var createSubscription = function(list_id, email, phone) {
const url = 'https://a.klaviyo.com/client/subscriptions/?company_id=COMPANY_ID';
let attributes = {
list_id: list_id
};
if (email) {
attributes.email = email;
}
if (phone) {
attributes.phone_number = phone;
}
const options = {
method: 'POST',
headers: {revision: '2023-01-24', 'content-type': 'application/json'},
body: JSON.stringify({
data: {
type: "subscription",
attributes: attributes
}
})
};
fetch(url, options)
.then(res => res.text())
.then(data => console.log(data))
.catch(err => console.error('error:' + err));
};
var createEvent = function(data) {
const url = 'https://a.klaviyo.com/client/events/?company_id=COMPANY_ID';
const options = {
method: 'POST',
headers: {
accept: 'application/json',
revision: '2023-01-24',
'content-type': 'application/json'
},
body: JSON.stringify({
data: data
})
};
fetch(url, options)
.then(res => res.text())
.then(data => console.log(data))
.catch(err => console.error('error:' + err));
};
var items = [];
var itemNames = [];
var cartAmount = 0;
var callbacks = {
check : function () {
// Executes just before the checkout form loads.
// Must return a boolean that will determine if Bolt should proceed with checkout.
return true;
},
onCheckoutStart : async function () {
// Executes after the checkout form is presented to the user
let cart = await fetchCart();
items = [].concat(cart[0].lineItems.customItems, cart[0].lineItems.digitalItems, cart[0].lineItems.giftCertificates, cart[0].lineItems.physicalItems);
let tempItems = [];
for(let i = 0; i < items.length; i++) {
tempItems.push(items[i].name);
}
itemNames = tempItems;
cartAmount = cart[0].cartAmount;
},
onEmailEnter: function (email) {
// Executes after the user enters their email address.
var _learnq = _learnq || [];
_learnq.push(['identify', {'$email': email}]);
_learnq.push(['track','Started checkout', {
"$event_id": "StartedCheckout_" + Date.now() + "_" + email,
"$value": cartAmount,
"ItemNames": itemNames,
"CheckoutURL": "{{settings.secure_base_url}}{{urls.cart}}",
"Items": items
}]);
},
onShippingDetailsComplete: function (address) {
// Executes when the user proceeds to the shipping options page.
// This is applicable only to multi-step checkout.
// When available the first parameter will contain a user's name and address info.
},
onShippingOptionsComplete: function () {
// Executes when the user proceeds to the payment details page.
// This is applicable only to multi-step checkout.
},
onPaymentSubmit: function () {
// Executes after the user clicks the pay button.
},
success: function (transaction, callback) {
// Executes when the Bolt checkout transaction is successful.
// **IMPORTANT** callback() must be executed at the end of the success function
var customFields = transaction.custom_field_responses;
for (let i = 0; i< customFields.length; i++) {
if (customFields[i].public_id === 'NEWSLETTER_CHECKBOX_ID' && customFields[i].response === true) { // Newsletter Consent
createSubscription('EMAIL_LIST_ID', transaction.shipping_address.email, '');
}
if (customFields[i].public_id === 'SMS_CHECKBOX_ID' && customFields[i].response === true) { // SMS Consent
let phone = transaction.from_consumer.phones[0] ? transaction.from_consumer.phones[0].number : null;
if (phone) {
phone = phone.replace(/ /g,'');
createSubscription('SMS_LIST_ID', '', phone);
}
}
}
// Placed Order event
let profile = {
"$email": transaction.shipping_address.email,
"$phone_number": transaction.shipping_address.phone,
"$first_name": transaction.shipping_address.first_name,
"$last_name": transaction.shipping_address.last_name,
"$city": transaction.shipping_address.locality,
"$region": transaction.shipping_address.region,
"$country": transaction.shipping_address.country,
"$zip": transaction.shipping_address.postal_code
};
let placedOrderData = {
type: 'event',
attributes: {
profile: profile,
metric: {name: 'Placed Order'},
properties: {
OrderId: transaction.merchant_order_number,
BillingAddress: {
"FirstName": transaction.billing_address.first_name,
"LastName": transaction.billing_address.last_name,
"Company": transaction.billing_address.company,
"Address1": transaction.billing_address.street_address1,
"Address2": transaction.billing_address.street_address2,
"City": transaction.billing_address.locality,
"Region": transaction.billing_address.region,
"Country": transaction.billing_address.country,
"CountryCode": transaction.billing_address.country_code,
"Zip": transaction.billing_address.postal_code,
"Phone": transaction.billing_address.phone
},
ShippingAddress: {
"FirstName": transaction.shipping_address.first_name,
"LastName": transaction.shipping_address.last_name,
"Company": transaction.shipping_address.company,
"Address1": transaction.shipping_address.street_address1,
"Address2": transaction.shipping_address.street_address2,
"City": transaction.shipping_address.locality,
"Region": transaction.shipping_address.region,
"Country": transaction.shipping_address.country,
"CountryCode": transaction.shipping_address.country_code,
"Zip": transaction.shipping_address.postal_code,
"Phone": transaction.shipping_address.phone
},
ItemNames: itemNames,
Items: items
},
value: Number(transaction.amount.amount) / 100,
unique_id: transaction.merchant_order_number
}
};
createEvent(placedOrderData);
// Orderd Product
for (let i = 0; i < items.length; i++) {
let orderedProductData = {
type: 'event',
attributes: {
profile: profile,
metric: {name: 'Ordered Product'},
properties: {
OrderId: transaction.merchant_order_number,
ProductID: items[i].productId,
SKU: items[i].sku,
ProductName: items[i].name,
Quantity: items[i].quantity,
ProductURL: items[i].url,
ImageURL: items[i].imageUrl
},
value: items[i].salePrice,
unique_id: 'OrderedProduct_' + Date.now() + '_' + items[i].sku
}
};
createEvent(orderedProductData);
}
callback()
},
close: function () {
// This function is called when the Bolt checkout modal is closed.
// This will not be called when create_order endpoint returns a valid URL
// and authorization is successful
}
}
Enable Newsletters
To collect email conset, enable the newsletter in BigCommerce.
This automatically adds anyone who opts-in to newsletters when checking out via Bolt to the subscriber list. Bolt will send the data to BigCommerce and BigCommerce will pass the data to Klaviyo.
Set Up for Magento 2 / Adobe Commerce
Before You Start
Install the Klaviyo integration in Magento 2, according to Klaviyo’s How to Integrate with Magento 2 guide.
Enable Newsletter
If enabling the newsletter subscriber function, configure a newsletter checkbox in Bolt checkout by contacting your customer success manager.
This automatically adds anyone who opts-in to newsletters when checking out via Bolt to the subscriber list.
Klaviyo then pulls customer emails from this list via the Klaviyo integration installed on the platform. Bolt does not directly pass this information to Klaviyo.
Enable Callbacks
-
To leverage additional Klaviyo functionality, merchants should use our callbacks functionality to trigger messaging based on shopper actions in checkout.
-
If you are unsure which properties are available in a given callback, use
console.logto return theargumentsobject. You’ll then see all available arguments you can use to build out callbacks in checkout:console.log(arguments) / console.log(JSON.stringify(arguments)) -
To configure the desired callbacks in your Magento admin account go to Stores > Configuration > Sales > Payment Methods > Bolt Pay > Advanced Options.
Set Up for WooCommerce
Before You Start
- Install the Klaviyo integration in WooCommerce, according to Klaviyo’s How to Integrate with WooCommerce guide.
- Install the Bolt plugin for Klaviyo.
Enable Newsletters
If enabling the newsletter subscriber function, configure a newsletter checkbox in Bolt checkout by contacting your customer success manager.
This automatically adds anyone who opts-in to newsletters when checking out via Bolt to a list.
Klaviyo then pulls customer emails from the list via the Klaviyo integration installed in the platform. Bolt does not directly pass this information to Klaviyo.
Enable Callbacks
-
To leverage any additional Klaviyo functionality, merchants should use Bolt callback functionality to trigger messaging based on shopper actions in checkout.
-
If you are unsure which properties are available in a given callback, use
console.logto return theargumentsobject. You’ll then see all available arguments you can use to build out callbacks in checkout:console.log(arguments) / console.log(JSON.stringify(arguments)) -
Configure the desired callbacks in your WooCommerce admin account by navigating to Plugins > WooCommerce Bolt Checkout > Settings.
Send Started Checkout Event (Optional)
To trigger the Started Checkout event when an email is captured, add the following snippet to the Bolt plugin Settings in WooCommerce:
window.dispatchEvent(new CustomEvent('boltKlaviyoStartedCheckout', { detail: { email: email }}));
Collect Shopper Email Consent at Checkout (Optional)
You can collect shopper consent at checkout to opt in to email marketing using the Klaviyo integration. Contact a Bolt representative.
Collect Shopper SMS Consent at Checkout (Optional)
You can collect shopper consent at checkout to opt in to SMS marketing using the Klaviyo integration. Contact a Bolt representative.
Set Up Callbacks for Other Commerce Platforms
In the event that you don’t use any of the ecommerce platforms in this guide, you may still be able to set up an integration between Klaviyo and Bolt using callbacks.
How you do this usually varies per commerce platform, however, it typically requires providing your Publishable Bolt API key and enabling Bolt Pay. Then, you’ll need to set up callbacks and other Bolt functionalities in checkout according to the Klaviyo Feature Enablement Options section.
Set Up for Direct API
For all events and features, use the Klaviyo guide for direct API implementations: Integrate a platform without a pre-built Klaviyo integration.