Chat Pop-Up integration guide

This guide explains how to integrate the Workforce Hub Chat Pop-Up on your website. We start with the integration steps for a quick and secure setup, followed by code examples. The detailed parameter reference and required CDN access are provided.

Prerequisite: You must have valid system user credentials before proceeding. These credentials are required to authenticate and obtain an access token, which is necessary for all subsequent integration steps. If you don't have one, please contact Things Solver team to request access.

Integration Steps

This guide explains how to integrate the Workforce Hub Chat Pop-Up on your website using a secure server-side authentication flow.

1. Authentication & token handling (server-side)

• Your server application should perform the login request to the Auth API, with a system user.
• After a successful login, the server receives an access_token.
• The server should then set this token as a secure cookie, for example (JavaScript syntax, adapt as needed for your backend):
  document.cookie = `wfh-token=${access_token}; path=/; SameSite=None; Secure`;

This ensures the token is stored securely and will be automatically available for the Chat pop-up on the frontend.

2. Embedding the Chat Pop-up (Frontend)

On the frontend, embed the Chat pop-up script as described in the section below, following these guidelines:

• Use the attribute: data-chat-mode="secure"
• The pop-up will automatically read the authentication token from the secure cookie (wfh-token).
• You must define the following attributes:
  - data-tenant-id="[your tenant ID]"
  - data-agent-id="[your agent ID]"

3. Benefits of this approach

1. Improved security – the token is handled server-side and passed via secure cookies.
2. No credentials in frontend – no need to hardcode tokens or secrets.
3. Simpler maintenance – tokens are automatically refreshed and managed by your server.

Quick Start

To integrate the chatbot into the website, paste the following tags just before the closing </body> tag of your HTML:

<link rel="stylesheet" href="https://cdn.thingsolver.com/workforce-hub/v1/chat.min.css" />
<script
  src="https://cdn.thingsolver.com/workforce-hub/v1/chat.min.js"
  data-wf-agent
  data-agent-id=""
  data-tenant-id=""
  data-popup-type=""
  data-language=""
  data-auto-open=""
  data-color-text=""
  data-color-main=""
  data-color-bubble=""
  data-color-bubble-text=""
  data-border-radius=""
  data-icon-url=""
  data-button-text=""
  data-title-prefix=""
  data-title=""
  data-input-placeholder=""
  data-starting-message=""
  data-chat-mode=""
  data-login-info=""
  data-user-info-text=""
  data-user-info-button-text=""
  data-regulation-info=""
  data-additional-regulation-info=""
  data-proactive=""
  data-enable-prompts=""
  data-scroll-to-bottom=""
  data-secure-hide-popup=""
>
</script>

Required CDN Access

To ensure the popup displays responses correctly, please allow outbound requests to the following resources:

• https://cdn.jsdelivr.net/npm/dompurify@2.3.4/dist/purify.min.js

• https://cdn.jsdelivr.net/npm/marked/marked.min.js

If you have a Content Security Policy (CSP) or use firewall/network restrictions, please whitelist the full file URLs above.

Example Usage

Here is an example configuration for embedding the agent:

<link rel="stylesheet" href="https://cdn.thingsolver.com/workforce-hub/v1/chat.min.css" />
<script
  src="https://cdn.thingsolver.com/workforce-hub/v1/chat.min.js"
  data-wf-agent
  data-agent-id="solver"
  data-tenant-id="demo"
  data-popup-type="popup-right"
  data-language="en"
  data-auto-open="3"
  data-color-text="#1f2937"
  data-color-main="#2ba1dc"
  data-color-bubble="#2ba1dc"
  data-color-bubble-text="#ffffff"
  data-border-radius="8px"
  data-icon-url=""
  data-button-text="Need help? Ask Solver"
  data-title-prefix="Ask"
  data-title="Solver"
  data-input-placeholder="Ask Solver..."
  data-starting-message="Hi, I'm Solver, an AI agent that can answer your questions and connect you with our experts."
  data-chat-mode="secure"
  data-login-info="Log in to start new chat."
  data-user-info-text="The conversation is over."
  data-user-info-button-text="Start New Chat"
  data-regulation-info="This response was generated by an AI system. AI models can make mistakes or provide incomplete information."
  data-additional-regulation-info="More info here"
  data-proactive="true"
  data-enable-prompts="true"
  data-scroll-to-bottom="true"
  data-secure-hide-popup="true"
>
</script>

Script Attributes Reference

The following attributes can be used to customize the chat pop-up. Parameter data-wf-agent should be present AS IT IS, so the script can initialize.  For the rest of the parameters, only data-agent-id and data-tenant-id are required (plus secure mode for auth), and you can use the other parameters to customize the popup .

This is how the final pop-up window looks like: