Life Cycle API

Turnkey

Embed-SDK React

Embed-SDK Web

Provides API to register hooks which will be executed on life cycle events

lifecycle : lifecycle

Accepts object of lifecycle hooks

The overrides are applied by passing the object under the top-level lifecycle key to the Customization API config object.

Lifecycle Object Keys

Key	Type	Description
useAfterEndCall?	EndCallHookType	Hook that returns a function
useBeforeEndCall?	EndCallHookType	Hook that returns a function

EndCallHookType

Hook that return a function

type EndCallHookType = () => (
  isHost: boolean,
  history: History,
) => Promise<void>;

Use the example code given below showcasing how to add the lifecycle events into the App Builder.

turnkey

import { customize } from "customization-api";
...
const useBeforeEndCall = () => {
  return () =>{
    //the logic that is written here will be executed before the end call
  }
}

const useAfterEndCall = () => {
  return () =>{
    //the logic that is written here will be executed after the end call
  }
}

const customization = customize({
  lifecycle:{
    useBeforeEndCall:useBeforeEndCall,
    useAfterEndCall:useAfterEndCall
  }
})

export default customization;

react-sdk

import { customEvents } from "@appbuilder/react";
...

const useBeforeEndCall = () => {
  return () =>{
    //the logic that is written here will be executed before the end call
  }
}

const useAfterEndCall = () => {
  return () =>{
    //the logic that is written here will be executed after the end call
  }
}

const customization = customize({
  lifecycle:{
    useBeforeEndCall:useBeforeEndCall,
    useAfterEndCall:useAfterEndCall
  }
})

export default customization;

web-sdk

import { customEvents } from "@appbuilder/web";
...
const useBeforeEndCall = () => {
  return () =>{
    //the logic that is written here will be executed before the end call
  }
}

const useAfterEndCall = () => {
  return () =>{
    //the logic that is written here will be executed after the end call
  }
}

const customization = customize({
  lifecycle:{
    useBeforeEndCall:useBeforeEndCall,
    useAfterEndCall:useAfterEndCall
  }
})

export default customization;