Callbacks

callbacks: {
  on_url_change: (page) => {
    console.log(page); // {hostname: HOSTNAME, url: URL}
  },
  on_socket: (event) => {
    console.log(event); // {event: channelJoin | joinChannelError | unmonitor | onError, time: TIMESTAMP}
  },
  on_autocapture: (payload, type) => {
    console.log(element_chain, type); // {element: Object, type: click | submit | change}
  },
  on_render: ({ type, id, element, height }) => {
    console.log(type, id, element, height);
  }
}

// Masking page view url call
callbacks: {
  on_url_change: (page = {url, hostname}) => {
    page.hostname = "https://example.com"
    page.url = `${page.hostname}${new URL(page.url).pathname}`
  }
}

// logging element

const maskAutoCaptureURLs = (payload, key) => {
  console.log(payload[key]);
  
  return payload[key];
}

....

callbacks: {
  on_autocapture: (payload, type) => {
    const maskedKeys = ['href', 'elements_chain'];
    
    maskedKeys.forEach(key => {
      payload[key] = maskAutoCaptureURLs(payload, key)
    })
  }
}

window.userpilotSettings = window.userpilotSettings || {};
window.userpilotSettings.callbacks = {
  ...window.userpilotSettings.callbacks,
  on_render({ type, id, element, height }) {
    console.log('Rendered Userpilot content:', type, id);
    if (type === 'banner' || type === 'card') {
      console.log('Height before display:', height);
      // Observe `element` if the host layout must track later size changes.
    }
  },
};

type CallbacksConfig = {
  on_url_change?: (page: { hostname: string; url: string }) => void;
  on_socket?: (event: { event: "channelJoin" | "joinChannelError" | "unmonitor" | "onError"; time: number }) => void;
  on_autocapture?: (element: Element, type: "click" | "submit" | "change") => void;
  on_render?: (event: RenderEvent) => void;
};

type RenderEvent = {
  type: "banner" | "card" | "modal" | "slideout" | "tooltip" | "driven" | "spotlight" | "checklist" | "survey" | "nps" | "resource_center";
  id: string | number;
  element: Element;
  height?: number;
  flow_id?: string | number;
  embed_id?: string | number;
  module_id?: string | number;
  spotlight_type?: string;
  embedded?: boolean;
};