Persist Conversation History

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
  • Save Session Function
  • Retrieve Session Function
  • Initialize with Persisted History
• Complete Examples

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:

HTMLJS
1<script type="module">
2  import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.0.5-alpha.12/lib/index.js?module";
3  
4  const saveSession = (conversationHandler, responses) => {
5    const sessionData = {
6      conversationId: conversationHandler.currentConversationId(),
7      responses: responses,
8    };
9    sessionStorage.setItem("touchpoint-session", JSON.stringify(sessionData));
10  };
11  
12</script>

Retrieve Session Function

Retrieve the saved session data on page load:

HTMLJS
1<script type="module">
2  import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.0.5-alpha.12/lib/index.js?module";
3  
4  const retrieveSession = () => {
5    try {
6      const data = JSON.parse(
7        sessionStorage.getItem("touchpoint-session") || "{}",
8      );
9      if (data.responses && data.conversationId) {
10        return data;
11      }
12      return null;
13    } catch (err) {
14      return null;
15    }
16  };
17  
18</script>

Initialize with Persisted History

Use the saved session when creating the Touchpoint instance:

HTMLJS
1<script type="module">
2  import { create, React, html } from "https://unpkg.com/@nlxai/touchpoint-ui@1.0.5-alpha.12/lib/index.js?module";
3  
4  const savedSession = retrieveSession();
5  
6  const config = {
7    applicationUrl: "YOUR_APPLICATION_URL",
8    headers: { "nlx-api-key": "YOUR_API_KEY" },
9    languageCode: "en-US",
10    conversationId: savedSession?.conversationId,
11    responses: savedSession?.responses,
12  };
13  
14</script>

Complete Examples

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