Cookies and the Web Storage API (Webchat 2.0)
Warning
Webchat 2.0 is no longer supported. It uses Flex UI 1.x.x's legacy messaging, which has reached end-of-life.
If you are using Webchat 2.0, migrate to Webchat 3.x.x.
If you are starting out with Webchat, build with Webchat 3.x.x instead.
Flex Webchat 2.0 persists some client-side data to create a better user experience. This can cause some issues when your customers have the Web Storage API disabled. This page discusses cookies, local storage, and session storage, and how Flex Webchat utilizes each one.
Flex Webchat utilizes each storage strategy in the following ways:
Used to persist chat after page reload and for error logging. Disabling local storage will cause degraded experience, especially on page reloads, but Webchat should still function.
Required for the proper functioning of Webchat (e.g., opening and maintaining the WebSocket.) Disabling session storage prevents Webchat from functioning.
| Storage Type | Definition | Max Size | Expiration |
|---|---|---|---|
| Cookies | Stores data that has to be sent back to the server with subsequent XHR requests | 4KB | Expires at a chosen expiration date, or when the session ends in the case of a session cookie |
| Local Storage | Stores data in the browser across sessions. Opening two tabs with the same URL will share local storage. Data is never sent to the backend | Up to 5 MB of data in the browser in key/value pairs | Data never expires but can be cleared by the user |
| Session Storage | Temporarily stores data in the browser. Data does not persist across sessions (i.e., two tabs with the same URL will have different session storage.) Data is never sent to the backend. | Stores up to 10 MB of data in the browser in key/value pairs | Data expires when the session ends, e.g., if the browser tab is closed |
| Key/name | Value | Function | Required for functionality of Webchat |
|---|---|---|---|
| twilio-flex-cf | Object | Key to the behavior of the UI in persisting state across page reloads. Contains: - ID of the current user - Channel SID -Whether chat window expanded or not - Current state of chat engagement - Whether to ignore previous chat sessions on page refresh - Map of user avatars - JSON Web Token (JWT) for making API calls | For a better UX experience like persisting chat after reloading, yes. Otherwise, no. |
| loglevel:twilio-flex-webchat-ui | Enum | For debugging flex-webchat-ui; determines the level of logs that will be printed to the console | No |
| loglevel | Enum | For debugging; determines the level of logs that will be printed to the console | No |
| Key/name | Value | Function | Required for functionality of Webchat |
|---|---|---|---|
| twilio_twilsock_token_storage | Boolean | Indicates initialization state of twilsock token storage. | Yes |
| twilio_continuation_token_ip_messaging | JWT | A Continuation Token from previous connection in JSON Web Token format, allows client to reuse same endpoint-id for messaging | Yes |
| <id>::map::<id>.channels | Object | Contains uri and id data for sending/fetching channel information | Yes |
| <id>::map::<id>.info | Object | Contains uri and id data for sending/fetching channel information | Yes |
| <id>::document::<id>.channel | Object | Contains uri and id data for sending/fetching channel information | Yes |
| <id>::map::<id>.roster | Object | Contains uri and id data for sending/fetching channel information | Yes |
| <id>::list::<id>.messages | Object | Contains uri and id data for sending/fetching message information | Yes |