NLX | Developers

Persisting conversation history allows users to continue their conversations across page reloads, navigation, or browser sessions. You can use browser storage APIs to save and restore conversation state.

Implementation

Local Storage (

localStorage) persists conversations across browser sessions. Session storage (sessionStorage) clears when the tab closes, while local storage persists until manually cleared.

To use local storage instead of session for persistence across browser sessions, make the change in the code below:

replace
sessionStorage with
localStorage

Save Session Function

Save the current conversation state to session storage:


1<html lang="en">
2  <head>
3    <title>Touchpoint Sample HTML</title>
4    <meta name="viewport" content="width=device-width, initial-scale=1">
5  </head>
6  <body>
7    <script type="module">
8      import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.1.3/lib/index.js?module";
9      
10      const saveSession = (conversationHandler, responses) => {
11        const sessionData = {
12          conversationId: conversationHandler.currentConversationId(),
13          responses: responses,
14        };
15        sessionStorage.setItem("touchpoint-session", JSON.stringify(sessionData));
16      };
17      
18    </script>
19  </body>
20</html>

Retrieve Session Function

Retrieve the saved session data on page load:


1<html lang="en">
2  <head>
3    <title>Touchpoint Sample HTML</title>
4    <meta name="viewport" content="width=device-width, initial-scale=1">
5  </head>
6  <body>
7    <script type="module">
8      import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.1.3/lib/index.js?module";
9      
10      const retrieveSession = () => {
11        try {
12          const data = JSON.parse(
13            sessionStorage.getItem("touchpoint-session") || "{}",
14          );
15          if (data.responses && data.conversationId) {
16            return data;
17          }
18          return null;
19        } catch (err) {
20          return null;
21        }
22      };
23      
24    </script>
25  </body>
26</html>

Initialize with Persisted History

Use the saved session when creating the Touchpoint instance:


1<html lang="en">
2  <head>
3    <title>Touchpoint Sample HTML</title>
4    <meta name="viewport" content="width=device-width, initial-scale=1">
5  </head>
6  <body>
7    <script type="module">
8      import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.1.3/lib/index.js?module";
9      
10      const savedSession = retrieveSession();
11      
12      const config = {
13        applicationUrl: "YOUR_APPLICATION_URL",
14        headers: { "nlx-api-key": "YOUR_API_KEY" },
15        languageCode: "en-US",
16        conversationId: savedSession?.conversationId,
17        responses: savedSession?.responses,
18      };
19      
20    </script>
21  </body>
22</html>

Complete Examples


1<html lang="en">
2  <head>
3    <title>Touchpoint Sample HTML</title>
4    <meta name="viewport" content="width=device-width, initial-scale=1">
5  </head>
6  <body>
7    <script type="module">
8      import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.1.3/lib/index.js?module";
9      
10      const storageKey = "touchpoint-session";
11      
12      const saveSession = (conversationHandler, responses) => {
13        const sessionData = {
14          conversationId: conversationHandler.currentConversationId(),
15          responses: responses,
16        };
17        sessionStorage.setItem(storageKey, JSON.stringify(sessionData));
18      };
19      
20      const retrieveSession = () => {
21        try {
22          const data = JSON.parse(sessionStorage.getItem(storageKey) || "{}");
23          if (data.responses && data.conversationId) {
24            return data;
25          }
26          return null;
27        } catch (err) {
28          return null;
29        }
30      };
31      
32      // Initialize touchpoint with persisted history
33      const savedSession = retrieveSession();
34      
35      const touchpoint = await create({
36        config: {
37          applicationUrl: "YOUR_APPLICATION_URL",
38          headers: { "nlx-api-key": "YOUR_API_KEY" },
39          languageCode: "en-US",
40          conversationId: savedSession?.conversationId,
41          responses: savedSession?.responses,
42        },
43      });
44      
45      // Save session on every update
46      touchpoint.conversationHandler.subscribe((responses) => {
47        saveSession(touchpoint.conversationHandler, responses);
48      });
49      
50    </script>
51  </body>
52</html>