There are many situations in which you will want to trigger push notifications to your users, here are some examples:
- A private message has been received
- An order has been delivered
- A new file has been added to the account
- A subscription is about to expire
For all of these examples, the notification will need to target a specific user when a specific event happens on your website. In order to be able to send these notifications you will need the following implemented into your website's code:
- Klaviyo Open API
- MobiLoud native functions
Keep in mind that this is not an implementation guide for the Klaviyo Open API, each server and website is different and will require a developer to find the best approach for integrating the Klaviyo Open API. The purpose of this guide is to give you a better understanding of how to integrate your website with the MobiLoud platform for sending targeted, or transactional push notifications.
Let's go through each one of the requirements:
Klaviyo Open API
Since MobiLoud uses Klaviyo for push notifications, you will need to use the Klaviyo REST API to trigger the notifications.
Whenever a push notification is expected to be sent, you will need to make a call to the Klaviyo Open API with the notification details (title, text, link, image, tags, etc), this call must be implemented on your website.
Here you can find the complete documentation for the Klaviyo REST API: https://developers.klaviyo.com/en/reference/api_overview#openapi-and-postman
MobiLoud native functions
Implementing the Klaviyo Open API should be straightforward, but at some point, you will ask yourself "How do I target a specific user?", and that's where the MobiLoud native functions come into play.
On your website, you are probably using a unique ID or even an email to identify your users, but in Klaviyo that unique identifier is not available out of the box, so the idea here is to tell Klaviyo to store the same unique user ID from your website into the Klaviyo profile of that user.
To do this, we are going to trigger the following Javascript function as soon as the user has logged in.
We highly recommend using emails to identify users, so the user profile in Klaviyo automatically merges all the existing data for matching profiles.
Here is an example of how that piece of code would look like:
<script>
// Check the user agent for the "canvas" string
const isApp = navigator.userAgent.toLowerCase().indexOf('canvas') > -1;
// Check if we are in the app
if (isApp) {
try {
// Set the user email
let userEmail = "john@example.com";
// Trigger the native function to save to Klaviyo
nativeFunctions.klaviyoSetEmail(userEmail);
// Log the event in the console
console.log("Email has been set");
} catch (ex) {
console.log(ex.message);
}
}
</script>Alternatively, if you prefer to use an ID instead, you can use the following version:
<script>
// Check the user agent for the "canvas" string
const isApp = navigator.userAgent.toLowerCase().indexOf('canvas') > -1;
// Check if we are in the app
if (isApp) {
try {
// Set the external ID
let userExternalId = 1;
// Trigger the native function to save to Klaviyo
nativeFunctions.klaviyoSetExternalUserId(userExternalId);
// Log the event in the console
console.log("External ID has been set");
} catch (ex) {
console.log(ex.message);
}
}
</script>For more details on how to target users using the External User ID and Emails, you can refer to the Klaviyo documentation here: https://help.klaviyo.com/hc/en-us/articles/115005247088
