Using “onComplete”

Using “onComplete”

Using “onComplete”

When launching your flow, you have the option to supply an onComplete function to be executed prior to your subscriber exiting the flow.
The onComplete function is called prior to any exit actions defined within your flow and it’s executed for all paths that result in the user leaving the flow:
  • Canceled
  • Incomplete
  • Accepted a Response
 
The function will provide a single argument - the outcome of the flow.
Here's a very simple example on how an onComplete callback function would look like:
window.raaft('startCancelFlow', 
    subscriptionId: 'sub_fdak4k3k4223m',
    authKey: '<security-token>'
    //... 
    onComplete: function (result) {
        // example: retrieve new data and update UI
    }
}
 
The result object has all the details of what your customer did during their interaction with the Flow.
These are all the properties you can use:
Property
Type
Description
appId
String
Your Raaft’s app id.
createdAt
Date Object
The timestamp of the outcome generation.
customer
Object
An object containing the details of your customer, such as the email and other information provided by your payment provider if connected.
feedback
String
Text containing the feedback left by your user.
flowId
String
The id of the flow that generated the outcome.
motivator
String
The last option selected in the last survey of the flow.
outcome
String
The main value you'll want to look for, which will have a value of "canceled", "saved", "aborted", or "error" depending on the how the user exited the flow.
path
Array
An array containing the steps your user followed when navigating through the flow. Each array element is an object containing relevant information about each step.
responseAccepted
Object
The response accepted in case of a “saved” outcome. This object contains details such as the new plan accepted or the discount details, etc., that provide information about the changes applied to the subscription.
subscription
Object
The subscription details of your user in case you’ve connected your payment provider.
The result object returned on the onComplete function can have the this structure:
{
    "appId": "your-app-id",
    "createdAt": "2024-10-07T08:10:07.558Z",
    "customer": {
        "email": "customer@email.com",
        "id": "customer-id",
        "name": "Customer Name",
        "photo": "Photo Url"
    },
    "feedback": "String with feedback",
    "flowId": "your-flow-id",
    "motivator": "Missing features or integrations",
    "outcome": "saved",
    "path": [
        {
            "stepId": 105,
            "stepType": "lossAversion"
        },
        {
            "selectedChoice": {
                "text": "Missing features or integrations",
                "type": "product",
                "choiceId": 2,
                "isSelected": false
            },
            "stepId": 106,
            "stepType": "survey"
        },
        {
            "offerName": "Switch Plans",
            "stepId": 110,
            "stepType": "offer"
        }
    ],
    "responseAccepted": {
        "name": "Switch Plans",
        "plan": {
            "amount": 8,
            "bodyText": "<h6>Basic</h6><h6><br></h6><p><b>10 </b>active users</p><p><b>8</b>&nbsp;flows</p>",
            "buttonText": "<p>Switch plan</p>",
            "currency": "USD",
            "id": "plan-id",
            "interval": "months",
            "name": "plan-name"
        },
        "timingOfChange": "period_end",
        "type": "change-plans"
    },
    "subscription": {
        "created_at": "2023-03-09T08:11:01.000Z",
        "currency": "USD",
        "customer": {
            "email": "customer@email.com",
            "id": "customer-id",
            "name": "Customer Name"
        },
        "id": "subscription-id",
        "plan": {
            "amount": 10,
            "currency": "USD",
            "id": "current-plan-id",
            "interval": "month",
            "name": "current-plan-name"
        }
    }
}
 
Here are a few ideas for how to use the onComplete function:
  • Update your CRM with the results of the flow
  • Retrieve new data from your subscription processor
  • Log out canceled users
  • Update UI elements based on outcome