Adding the code snippet

Now that you have completed your configuration of LlamaKeep, you are ready to implement the code snippet on your website. You will find the code that you need to add within the LlamaFi setup page. All you'll have to do is copy and paste it into your website.

The code snippet already has your unique api token and you just need to enter your brand color by replacing "YOUR-BRAND-HEXCOLOR". This is the primary color for your brand so we can use it in the cancellation flow to make it look on brand with your website. The color must be in HEX format e.g. #0000ff and should match the color of your CTA buttons in your app and website.

We recommend putting the code snippet in the <head>tag of your web app. You need to add the code snippet to all the pages where the user is logged-in, so not on your marketing website.

Initializing LlamaFi

This is where we need to get a bit technical, once you have added the script to the page you need to initialize it. Initialization is as simple as calling a javascript function and passing a config object.

You can call the function anywhere in your app, just make sure that you have already loaded the required data for the logged-in user (you could for instance call this after the document is loaded, or after an API call to your backend).

const config = { 
    id: 'string', 
    billingId: 'string', 
    email: 'string', 
    firstName: 'string', 
    lastName: 'string',
};
window.LlamaFi.init(config);

The only mandatory parameters are:

  • id: this is the unique identifier for the current user, you can use the id you use in your database.

  • billingId: this is the id for this user in your billing system (e.g. for Stripe is similar to "cus_[...]")

The other parameters are recommended, but not mandatory for managing the cancellation flow of a user, you should still put them in the config so you are ready to use other LaamaFi features without worrying about configuration (the other parameters will be explained in detail in the sections that require them).

You can call the .init() function as soon as you have the data for the current user ready, just make sure to call it once before starting any cancellation flow. After you call the .init() function we perform some logic, so be sure to keep the development console open for any error messages.

Launching the cancellation flow

At any point in your app, you can call the function startCancellationFlow which accepts an optional parameter callback, which is a function that if you pass, will be executed after the user completes a cancellation flow with the result of the flow.

window.LlamaFi.startCancellationFlow(callback)

After calling the function we will take it from there and try to save the user from churning, in either case, this is the object that will be passed to your callback function (typescript).

export interface ICancellationFlowResult {
    selectedOffer: 'pause30' | 'pause60' | 'change-plan' | 'discount' | 'cancel';
    answers: string[];
}

After the cancellation flow

After the user completes the cancellation flow, LlamaKeep takes care of updating any data required in your billing system, so changing subscriptions, canceling, and applying discounts, are all applied automatically by LlamaKeep.

The subscription of the customer is not canceled instantly, but is set to be canceled at the end of his billing period. So if a customer is charged monthly starting from the 12th and cancels his subscription on the 5th of the month, then his subscription will be active until the 12th of the month, then it will be automatically canceled.

If you don't want to handle locking out the user from your app after the end of his billing period, you can use LlamaLockout to do it for you.

We return the result of the cancellation flow if you want to update some data in your own system or if you want to trigger some external logic.

Last updated