Skip to main content

Chat Pop-Up integration guide

Updated

This lightweight, embeddable popup allows you to easily add our AI-powered agent to any website by simply including a <script> and <link> tag in HTML.

The popup is fully responsive, easily customizable and optimized for both mobile and desktop environments.

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/chat.min.css" />
<script
  src="https://cdn.thingsolver.com/workforce-hub/chat.min.js"
  data-wf-agent
  data-agent-id=""
  data-token=""
  data-tenant-id=""
  data-client-id=""
  data-client-secret=""
  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=""
>
</script>

Script Attributes Reference

Attribute Required Description
data-agent-id Yes Unique identifier for your agent.
data-token Yes (if not providing client-id and client-secret) Token for authentication.
data-client-id Yes (if not providing token) Client ID for obtaining the token.
data-client-secret Yes (if not providing token) Client secret key for obtaining the token.
data-tenant-id Yes Identifies your workspace/tenant.
data-popup-type No Chat display mode: bar , popup-right , or popup-center .
data-language No ISO code like en , fr , etc. Default: auto
data-auto-open No Open the popup automatically, available only for `popup-right` Input in seconds: e.g. 3
data-color-text No Text color in HEX. Default: #1f2937
data-color-main No Accent color in HEX. Default: #2ba1dc
data-color-bubble No User bubble background color. Default: #2ba1dc
data-color-bubble-text No User bubble text color. Default: #ffffff
data-border-radius No Border radius for corners, e.g., 8px .
data-icon-url No Custom bot avatar image URL.
data-title No Title displayed on chat window. Default: Workforce
data-title-prefix No Title prefix displayed on chat window. Default: Ask
data-button-text No Button text displayed on trigger button. Default: Need help? Ask Workforce
data-input-placeholder No Placeholder in input field. Default: Ask me anything...
data-starting-message No Initial bot message shown. Optional.
data-chat-mode No Chat mode: secure or public .
data-login-info No Optional, for secure mode only. Inform the user that they need to log in to start a new chat. Example: Log in to start new chat.
data-user-info-text No Optional. Text to display when the conversation is over. Default: The conversation is over.
data-user-info-button-text No Optional. Text for the button to start a new chat. Default: Start New Chat

Note: The attribute data-wf-agent must be included exactly as shown above for proper rendering.

Required CDN Access

To ensure the popup displays the responses correctly, please ensure your site allows 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


<link rel="stylesheet" href="https://cdn.thingsolver.com/workforce-hub/chat.min.css" />
<script
  src="https://cdn.thingsolver.com/workforce-hub/chat.min.js"
  data-wf-agent
  data-agent-id="solver"
  data-token="demo-token"
  data-client-id="demo-client-id"
  data-client-secret="demo-client-secret"
  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 SAIS questions and connect you with our Sales Experts. This experience, powered entirely by Workforce, keeps improving daily! Ask me things like, 'Can I chat with a Sales Expert?' or 'What is CRM?'"
  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"
>
</script>

Related articles

Comments

0 comments

Please sign in to leave a comment.

Powered by Zendesk