The new Freshchat web interface is built as a single-page application. In contrast to a traditional web application, single-page apps do not reload the entire page when the context is changed, only relevant sections are modified. For example, if you are already on the Inbox page and you navigate to a new conversation, only certain sections of the page are reloaded.

For an app to refresh its data at the right time, the parent application emits an app.activated() method. The method timing differs depending on the app’s location. The app should register to listen for an app.activated method when the page containing the app is loaded for the first time, which is denoted by the app.initialized() method.

app.initialized()

This method is invoked when the page containing the app is loaded for the first time. On success, it returns the client object which can be used to register for the app.activated and app.deactivated methods. As the app renders within an IFrame, all communication (Data method, Interface method, Events method) between the app and parent page occurs through the client object.

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
app.initialized().then(
    function(client)
    {
      //If successful, register the app activated and deactivated event callback.
      client.events.on("app.activated", onAppActivated);
      client.events.on("app.deactivated", onAppDeactivated);
    },
    function(error)
    {
      //If unsuccessful
      console.log();
    }
  );

Unless you are building an app that is completely isolated (independent of the data on the page), the core logic of the app should not be within the app.initialized() callback. It should be within the app.activated() callback to ensure that the app can react whenever the conversation changes. For example, on the Inbox page, when you navigate from one conversation to another, app.activated() is triggered and the corresponding callback is executed.

app.activated()

This method is triggered when the app is brought into scope, and the timing differs based on the location of the app.

app.js

1
2
3
4
5
client.events.on("app.activated", onAppActivated);

function onAppActivated() {
  console.log("App Activated");
}

app.deactivated()

This method is triggered when the app is taken out of scope. In addition, the app.deactivated method can be used to clean stale data. For apps on the Inbox page, this method is triggered when the agent moves from one conversation to the next.

app.js

1
2
3
4
5
client.events.on("app.deactivated", onAppDeactivated);

function onAppDeactivated() {
  console.log("App Deactivated");
}