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. No frameworks or build tools are used in development, only pure JavaScript and CSS.
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-popup-type=""
data-language=""
data-color-text=""
data-color-main=""
data-color-bubble=""
data-color-bubble-text=""
data-border-radius=""
data-icon-url=""
data-title=""
data-input-placeholder=""
data-starting-message=""
>
</script>
Script Attributes Reference
| Attribute | Required | Description |
|---|---|---|
data-agent-id |
Yes | Unique identifier for your agent. |
data-token |
Yes | Token for authentication. |
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-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-input-placeholder |
No | Placeholder in input field. Default: Ask me anything...
|
data-starting-message |
No | Initial bot message shown. Optional. |
Note: The attribute data-wf-agent must be included exactly as shown above for proper rendering.
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-tenant-id="demo"
data-popup-type="popup-right"
data-language="en"
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-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?'"
>
</script>
Comments
0 comments
Please sign in to leave a comment.